Hi..
I created a simple custom Telerik Maui Combox control. With a similiar style as the Telerik documentation: [Telerik Maui Controls Combobox Styling][1]
[1]: https://docs.telerik.com/devtools/maui/controls/combobox/styling
<Style TargetType="telerik:RadButton" x:Key="DropDownButtonStyle">
<Setter Property="FontSize" Value="14"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="WidthRequest" Value="24"/>
<Setter Property="HeightRequest" Value="24"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="Blue"/>
<Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='6, 0, 10, 0'}"/>
</Style>
I just want to change the dropdown button to use a custom Icon. So I added:
<Setter Property="BackgroundImage" Value="downarrow.png">
When I add the custom control to a view. It works! But on initial load - the dropdown icon does not appear. Even after binding. If I start selecting drop downs and perform other actions, the icons appear! Why doesn't the icon appear on load/init? It does finally appear. How can I force it to show? Here's the code for the control.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
x:Class="ABC.CustomControls.CustomDropdown"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:eventToCommand="http://ABC.com/schemas/ToolKits"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:Image="http://ABC.com/schemas/Image"
x:Name="CustomDdUnique">
<ContentView.Resources>
<ResourceDictionary>
<Style x:Key="DropDown_ButtonStyle" TargetType="telerik:RadButton">
<Setter Property="FontSize" Value="14" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="WidthRequest" Value="15" />
<Setter Property="HeightRequest" Value="11"/>
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0,0,10,0" />
<Setter Property="BackgroundImage" Value="arrow_down_1.png"/>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="TextColor" Value="Transparent" />
<!--<Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='-20, 0, 0, 0'}" />-->
</Style>
</ResourceDictionary>
</ContentView.Resources>
<Grid
ColumnDefinitions="*"
HorizontalOptions="{Binding HorizontalOptionsDD, Source={x:Reference CustomDdUnique}}"
VerticalOptions="{Binding VerticalOptionsDD, Source={x:Reference CustomDdUnique}}"
WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
<Border
HeightRequest="{Binding HeightRequestDD, Source={x:Reference CustomDdUnique}}"
Stroke="#D9D9D9"
StrokeThickness="1"
WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<telerik:RadComboBox
x:Name="CustomDd"
BackgroundColor="{Binding BackgroundColor, Source={x:Reference CustomDdUnique}}"
DisplayMemberPath="{Binding DisplayMemberPath, Source={x:Reference CustomDdUnique}}"
DropDownButtonStyle="{StaticResource DropDown_ButtonStyle}"
FlowDirection="LeftToRight"
FontFamily="{Binding FontFamily, Source={x:Reference CustomDdUnique}}"
FontSize="{Binding FontSize, Source={x:Reference CustomDdUnique}}"
HeightRequest="{Binding HeightRequestDD, Source={x:Reference CustomDdUnique}}"
HorizontalOptions="Start"
IsClearButtonVisible="False"
IsDropDownOpen="{Binding IsDropDownOpen, Source={x:Reference CustomDdUnique}}"
ItemsSource="{Binding ItemsSource, Source={x:Reference CustomDdUnique}}"
MinimumWidthRequest="50"
Opacity="1"
SelectedIndex="{Binding SelectedIndex, Source={x:Reference CustomDdUnique}, Mode=TwoWay}"
SelectedItem="{Binding SelectedItem, Source={x:Reference CustomDdUnique}, Mode=TwoWay}"
TextColor="{Binding TextColor, Source={x:Reference CustomDdUnique}}"
VerticalOptions="Start"
WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
<telerik:RadComboBox.Behaviors>
<eventToCommand:EventToCommandBehavior Command="{Binding Source={x:Reference CustomDdUnique}, Path=SelectionChangedCommand}" EventName="SelectionChanged" />
</telerik:RadComboBox.Behaviors>
</telerik:RadComboBox>
</Border>
<Polygon
x:Name="ChangeIndicator"
Fill="#B43218"
HeightRequest="13"
HorizontalOptions="Start"
IsVisible="{Binding HasChanges, Source={x:Reference CustomDdUnique}}"
Points="0,0 0,13 14,0"
StrokeThickness="0"
VerticalOptions="Start"
WidthRequest="14" />
</Grid>
</ContentView>
I use the control like this: Why doesn't my dropdown icon show when loaded?
<controls:CustomDropdown
Margin="10,10,0,0"
Width="30"
ItemsSource="{Binding Mapping.ListOptions}"
SelectedItem="{Binding Mapping.List, Mode=TwoWay}"
DisplayMemberPath="Name">
</controls:CustomDropdown>
thx
I created a simple custom Telerik Maui Combox control. With a similiar style as the Telerik documentation: [Telerik Maui Controls Combobox Styling][1]
[1]: https://docs.telerik.com/devtools/maui/controls/combobox/styling
<Style TargetType="telerik:RadButton" x:Key="DropDownButtonStyle">
<Setter Property="FontSize" Value="14"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="WidthRequest" Value="24"/>
<Setter Property="HeightRequest" Value="24"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="TextColor" Value="Blue"/>
<Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='6, 0, 10, 0'}"/>
</Style>
I just want to change the dropdown button to use a custom Icon. So I added:
<Setter Property="BackgroundImage" Value="downarrow.png">
When I add the custom control to a view. It works! But on initial load - the dropdown icon does not appear. Even after binding. If I start selecting drop downs and perform other actions, the icons appear! Why doesn't the icon appear on load/init? It does finally appear. How can I force it to show? Here's the code for the control.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
x:Class="ABC.CustomControls.CustomDropdown"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:eventToCommand="http://ABC.com/schemas/ToolKits"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:Image="http://ABC.com/schemas/Image"
x:Name="CustomDdUnique">
<ContentView.Resources>
<ResourceDictionary>
<Style x:Key="DropDown_ButtonStyle" TargetType="telerik:RadButton">
<Setter Property="FontSize" Value="14" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="WidthRequest" Value="15" />
<Setter Property="HeightRequest" Value="11"/>
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0,0,10,0" />
<Setter Property="BackgroundImage" Value="arrow_down_1.png"/>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter Property="TextColor" Value="Transparent" />
<!--<Setter Property="Padding" Value="{OnPlatform Android='8, 2, 4, 2', iOS='4, 2, 12, 2', MacCatalyst='4, 0, 8, 0', WinUI='-20, 0, 0, 0'}" />-->
</Style>
</ResourceDictionary>
</ContentView.Resources>
<Grid
ColumnDefinitions="*"
HorizontalOptions="{Binding HorizontalOptionsDD, Source={x:Reference CustomDdUnique}}"
VerticalOptions="{Binding VerticalOptionsDD, Source={x:Reference CustomDdUnique}}"
WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
<Border
HeightRequest="{Binding HeightRequestDD, Source={x:Reference CustomDdUnique}}"
Stroke="#D9D9D9"
StrokeThickness="1"
WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<telerik:RadComboBox
x:Name="CustomDd"
BackgroundColor="{Binding BackgroundColor, Source={x:Reference CustomDdUnique}}"
DisplayMemberPath="{Binding DisplayMemberPath, Source={x:Reference CustomDdUnique}}"
DropDownButtonStyle="{StaticResource DropDown_ButtonStyle}"
FlowDirection="LeftToRight"
FontFamily="{Binding FontFamily, Source={x:Reference CustomDdUnique}}"
FontSize="{Binding FontSize, Source={x:Reference CustomDdUnique}}"
HeightRequest="{Binding HeightRequestDD, Source={x:Reference CustomDdUnique}}"
HorizontalOptions="Start"
IsClearButtonVisible="False"
IsDropDownOpen="{Binding IsDropDownOpen, Source={x:Reference CustomDdUnique}}"
ItemsSource="{Binding ItemsSource, Source={x:Reference CustomDdUnique}}"
MinimumWidthRequest="50"
Opacity="1"
SelectedIndex="{Binding SelectedIndex, Source={x:Reference CustomDdUnique}, Mode=TwoWay}"
SelectedItem="{Binding SelectedItem, Source={x:Reference CustomDdUnique}, Mode=TwoWay}"
TextColor="{Binding TextColor, Source={x:Reference CustomDdUnique}}"
VerticalOptions="Start"
WidthRequest="{Binding WidthRequestDD, Source={x:Reference CustomDdUnique}}">
<telerik:RadComboBox.Behaviors>
<eventToCommand:EventToCommandBehavior Command="{Binding Source={x:Reference CustomDdUnique}, Path=SelectionChangedCommand}" EventName="SelectionChanged" />
</telerik:RadComboBox.Behaviors>
</telerik:RadComboBox>
</Border>
<Polygon
x:Name="ChangeIndicator"
Fill="#B43218"
HeightRequest="13"
HorizontalOptions="Start"
IsVisible="{Binding HasChanges, Source={x:Reference CustomDdUnique}}"
Points="0,0 0,13 14,0"
StrokeThickness="0"
VerticalOptions="Start"
WidthRequest="14" />
</Grid>
</ContentView>
I use the control like this: Why doesn't my dropdown icon show when loaded?
<controls:CustomDropdown
Margin="10,10,0,0"
Width="30"
ItemsSource="{Binding Mapping.ListOptions}"
SelectedItem="{Binding Mapping.List, Mode=TwoWay}"
DisplayMemberPath="Name">
</controls:CustomDropdown>
thx