Rank 1
Iron
Iron
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
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.