How to add Hover state for ComboBox custom ItemTemplate

1 Answer 258 Views
ComboBox
Allen
Top achievements
Rank 1
Iron
Iron
Allen asked on 23 Sep 2022, 09:08 AM | edited on 23 Sep 2022, 09:11 AM

Hey Team, 

I created a ItemTemplate for ComboBox, and did some styles update, but I found there was no Hover status like default BackgroundColor changed when hover the items. May I know how can I add it?


<telerik:RadComboBox.ItemTemplate>
                    <DataTemplate>
                        <telerik:RadBorder MinimumWidthRequest="300">
                            <Label Padding="16,7,0,7"
                                   Text="{Binding Name}"
                                   TextColor="Green" />
                        </telerik:RadBorder>
                    </DataTemplate>
                </telerik:RadComboBox.ItemTemplate>
                <telerik:RadComboBox.SelectedItemTemplate>
                    <DataTemplate>
                        <telerik:RadBorder BackgroundColor="Gray"
                                           MinimumWidthRequest="300">
                            <Label Margin="8,0,0,0"
                                   Padding="8,7,0,7"
                                   Text="{Binding Name}"
                                   TextColor="Red" />
                        </telerik:RadBorder>
                    </DataTemplate>
                </telerik:RadComboBox.SelectedItemTemplate>

You can add this code into Sample code to reproduce it. 

My Current ComboBox drop down list:

                                                           

 

 

Expect Drop down list:

                                   

 

The 3223334 option has a BackgroundColor when we hover it.

 

Thanks

Allen

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 23 Sep 2022, 12:10 PM

Hi Allen,

When you modify the default template you override the behavior. In order to apply the hover style you have to use the VisualState Manager and add a MouseOver state. Here is an example:

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                                 DisplayMemberPath="Name"
                                 Placeholder="Select City">
                <telerik:RadComboBox.ItemTemplate>
                    <DataTemplate>
                        <telerik:RadComboBoxItem>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="LightBlue"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid VerticalOptions="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Name}"/>
                            </Grid>
                        </telerik:RadComboBoxItem>
                    </DataTemplate>
                </telerik:RadComboBox.ItemTemplate>

Also it is important the State manager to be applied to the RadComboBox item. It inherits from RadBorder. Inside the RadComboBoxItem you can add the UI you want in your custom ItemTemplate.

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ComboBox
Asked by
Allen
Top achievements
Rank 1
Iron
Iron
Answers by
Didi
Telerik team
Share this question
or