How to change visual aspect of SfListView Items when mouse over

[Roberto Becchetti]

Goodmorning,

i have a SfListView with a list of Image Items. I would like to chenge the property (BackgroundColor, Cornerradius) at the item when is selected or mouseover that. I'm watching to VisualState but while I be able to change its appearance when the mouse over i d0n't be able when the item is selecdet.

This is an example of xaml code:

            <listView:SfListView Margin="5,20,5,20" Grid.Column="0" SelectionMode="Single" SelectedItem="{Binding SelectedModuleItem}">

                <listView:SfListView.ItemsSource>

                    <x:Array Type="{x:Type Image}">

                        <Image Source="delivery_cart.png"/>

                        <Image Source="config_system_a.png"/>

                    </x:Array>

                </listView:SfListView.ItemsSource>

                <listView:SfListView.ItemTemplate>

                    <DataTemplate x:DataType="Image">

                            <Image Source="{Binding Source}" Margin="5"/>

                    </DataTemplate>

                </listView:SfListView.ItemTemplate>

            </listView:SfListView>

In the example the first image is selected and I would like to change the BackgroundColor and the CornerRadius.

Thanks.

Roberto

[Jayashree Ravishankar]

Hi Roberto Becchetti,

We have checked the reported query , you can customize the background color and the corner radius of selected item using SelectedItemTemplate. Please see the attached code snippet for more reference and let us know if you have any other queries.

Code snippet:

<listView:SfListView.SelectedItemTemplate>

    <DataTemplate>

        <Border Background="LightGray">

            <Border.StrokeShape>

                <RoundRectangle CornerRadius="20"/>

            </Border.StrokeShape>

            <Image Source="{Binding Source}" Margin="5"/>

        </Border>                   

    </DataTemplate>

</listView:SfListView.SelectedItemTemplate>

UG Link : https://help.syncfusion.com/maui/listview/selection#selected-item-customization

[Roberto Becchetti]

Thank a lot. 

if I wanted to do the same thing when the mouse go over the item which is the best way?

Thanks.

Roberto

[Suthi Yuvaraj]

Roberto Becchetti,

We have checked your requirements, and we would like to let you know that you can customize the HoverBackground color, but the corner radius cannot be customize the corner radius , Please refer the below documentation to customize the MouseHover background color and let us know if you have any concerns,

UG Link:https://help.syncfusion.com/maui/listview/viewappearance#change-mouse-hover-item-background