syncfusionexamples/hover-effect-listview-xamarin-uwp

This repository contains sample about how to apply hover effect for ListView Item in Xamairn.Forms UWP (SfListView)

How to apply hover effect for ListView Item in Xamairn.Forms UWP (SfListView)

You can apply mouse hover effect for ListViewItem by loading custom control in Xamarin.Forms. To enable the hovering effect, implement a custom renderer for the UWP platform.

You can also refer the following article.

https://www.syncfusion.com/kb/11936/how-to-apply-hover-effect-for-listview-item-in-xamairn-forms-uwp-sflistview

C#

Define the custom control derived from the Grid in the Xamarin.Forms PCL project.

namespace ListViewXamarin
{
    public class CustomGrid : Grid
    {
        
    }
}

XAML

Load the CustomGrid in the SfListView.ItemTemplate.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="70" SelectionBackgroundColor="#a6dcef" ItemsSource="{Binding ContactsInfo}" SelectionChangedCommand="{Binding ListViewSelection}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <local:CustomGrid x:Name="grid">
                            <local:CustomGrid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                            </local:CustomGrid.ColumnDefinitions>
                            <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                            <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                            </Grid>
                        </local:CustomGrid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C#

Create custom platform renderer for UWP and hook PointerEntered and PointerExited events. In the events, you can get the CustomGrid from Element property and change the BackgroundColor of the item. Also, you can change the selected item color in the PointerPressed event and skip the hovering effect for the selected item based on model class property.

[assembly: ExportRenderer(typeof(CustomGrid), typeof(CustomGridRenderer))]
namespace ListViewXamarin.UWP
{
    public class CustomGridRenderer : VisualElementRenderer<CustomGrid, FrameworkElement>
    {
        public CustomGridRenderer()
        {
            this.PointerEntered += CustomGridRenderer_PointerEntered;
            this.PointerExited += CustomGridRenderer_PointerExited;
            this.PointerPressed += CustomGridRenderer_PointerPressed;
        }

        private void CustomGridRenderer_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            var item = this.Element;
            item.BackgroundColor = Xamarin.Forms.Color.FromHex("#a6dcef");
        }

        private void CustomGridRenderer_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            var item = this.Element;
            item.BackgroundColor = Xamarin.Forms.Color.Transparent;
        }

        private void CustomGridRenderer_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            var item = this.Element;
            var itemData = item.BindingContext as Contacts;
            if (itemData.IsSelected)
                item.BackgroundColor = Xamarin.Forms.Color.Transparent;
            else
                item.BackgroundColor = Xamarin.Forms.Color.WhiteSmoke;
        }
    }
}

C#

In the SelectionChangedCommand, update the IsSelected model property to update the selection color in platform renderer.

namespace ListViewXamarin
{
    public class ContactsViewModel : INotifyPropertyChanged
    {
        public Command<object> ListViewSelection { get; set; }

        public ContactsViewModel()
        {
            ListViewSelection = new Command<object>(OnItemSelected);
        }

        private void OnItemSelected(object obj)
        {
            var args = obj as Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs;
            if (args.AddedItems.Count > 0)
            {
                var item = args.AddedItems[0] as Contacts;
                item.IsSelected = true;
            }
            else
            {
                var item = args.RemovedItems[0] as Contacts;
                item.IsSelected = false;
            }
        }
    }
}

Output