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

1 Answer 109 Views
ComboBox
Jon
Top achievements
Rank 1
Jon asked on 24 Nov 2023, 05:16 PM
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

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 28 Nov 2023, 06:51 AM

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

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Tags
ComboBox
Asked by
Jon
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or