Custom RadCombo does not show drop down icon. The Styles work. but icon does not always display.

[Jon]

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

[Yana]

Hi Jon,

I've tried to recreate the described behavior in a simple app based on the provided snippet, still, I am afraid without much success. It seems I am missing something with the setup. I've attached my test app, could you take a look and test it on your side? Do you find anything different in the app setup from the actual app you have?

Regards,
Yana
Progress Telerik