1 Answer, 1 is accepted
0
Hi Nauman,
Indeed it is possible to customize the mouse over functionality in the ListView. Microsoft recently released a PointerOver VisualState which you can use in this case. This is how you can implement it:
Define a cell template for the ListView and add the VisualState design to it:
<DataTemplate x:Key="DefaultTemplate">
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<Grid>
<Label Margin="10"
Text="{Binding Name}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Pink" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="LightBlue" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
Attach the DataTemplate to the ListView:
<telerik:RadListView x:Name="listView" ItemsSource="{Binding Source}" AutomationId="listView" ItemTemplate="{StaticResource DefaultTemplate}">
<telerik:RadListView.BindingContext>
<local:ViewModel />
</telerik:RadListView.BindingContext>
</telerik:RadListView>
The result looks as follows:
Let me know if this works for you.
Regards,
Antoan
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.