Mouseover Event for RadListView

[Nauman]

Hi, 

Is it possible to customise the 'mouse over' styling of the RadListView.

The docs just have information on styling the selected or pressed view.

Thanks

 

[Antoan]

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