Mouseover Event for RadListView

1 Answer 287 Views
ListView
Nauman
Top achievements
Rank 1
Nauman asked on 08 Nov 2022, 09:15 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Antoan
Telerik team
answered on 11 Nov 2022, 02:20 PM

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.

Tags
ListView
Asked by
Nauman
Top achievements
Rank 1
Answers by
Antoan
Telerik team
Share this question
or