You can change the background color of ItemTemplate loaded in the .NET MAUI ListView (SfListView) based on the value changed in Trigger with consideration of Selection. XAML Defined Trigger for the parent element of ListView ItemTemplate and bind the model class property to change the Background color of the item. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ListViewMaui.MainPage" xmlns:local="clr-namespace:ListViewMaui" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView" BackgroundColor="{DynamicResource SecondaryColor}"> <ContentPage.Resources> <ResourceDictionary> <local:IndexToColorConverter x:Key="IndexToColorConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <StackLayout> <syncfusion:SfListView x:Name="listView" ItemSpacing="1" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.Triggers> <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference grid}, Path=BindingContext.IsSelected}" Value="False"> <Setter Property="BackgroundColor" Value="{Binding ., Converter={StaticResource IndexToColorConverter}, ConverterParameter={x:Reference listView}}" /> </DataTrigger> <DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference grid}, Path=BindingContext.IsSelected}" Value="True"> <Setter Property="BackgroundColor" Value="PaleVioletRed" /> </DataTrigger> </Grid.Triggers> … </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage> C# Defining IsSelected property in Model with INotifyPropertyChanged. public class Musiqnfo : INotifyPropertyChanged { private bool isSelected; public bool IsSelected { get { return isSelected; } set { isSelected = value; RaisePropertyChanged("IsSelected"); } } public event PropertyChangedEventHandler PropertyChanged; private void RaisePropertyChanged(String name) { if (PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs(name)); } } Updating the IsSelected value in ListView_SelectionChanged method. public class Behavior : Behavior<ContentPage> { ListView.SelectionChanging += ListView_SelectionChanging; private void ListView_SelectionChanging(object sender, ItemSelectionChangingEventArgs e) { for (int i = 0; i < e.AddedItems.Count; i++) { var item = e.AddedItems[i] as Contacts; item.IsSelected = true; } for (int i = 0; i < e.RemovedItems.Count; i++) { var item = e.RemovedItems[i] as Contacts; item.IsSelected = false; } } } Converter to apply the alternate row style based on the index value of items. public class IndexToColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var listview = parameter as SfListView; return listview.DataSource.DisplayItems.IndexOf(value) % 2 == 0 ? Colors.Lavender : Colors.AliceBlue; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } View sample in GitHub
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. 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 the 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 the 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 the 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 View sample in GitHubConclusion I hope you enjoyed learning about how to apply hover effect for ListView Item in Xamairn.Forms (SfListView).You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can apply the selection color before navigating to another page using thread in Xamarin.Forms SfListView. XAML Bind SfListView.SelectionChangedCommand to navigate to the next page. <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="60" ItemsSource="{Binding ContactsInfo}" SelectionChangedCommand="{Binding SelectionCommand}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.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> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage> C# In the SelectionChangedCommand, use MainThread to navigate to another page. public class ContactsViewModel : INotifyPropertyChanged { public ObservableCollection<Contacts> ContactsInfo { get; set; } public Command<object> SelectionCommand { get; set; } public ContactsViewModel() { ContactsInfo = new ObservableCollection<Contacts>(); SelectionCommand = new Command<object>(OnItemSelected); GenerateInfo(); } private void OnItemSelected(object obj) { var selectedItem = (obj as Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs).AddedItems[0] as Contacts; var newPage = new NewPage(); newPage.BindingContext = selectedItem; Device.BeginInvokeOnMainThread(async () => { await Task.Delay(200); await App.Current.MainPage.Navigation.PushAsync(newPage); }); } } Output View sample in GitHub
By default, the selection backcolor will not be drawn for current cell. In order to set the selection backcolor for current cell also, set backcolor for that cell in QueryCellInfo event and refresh that cell in SelectionChanged event. Code Snippet C# //Event Subscription. this.gridControl1.SelectionChanged += gridControl1_SelectionChanged; this.gridControl1.QueryCellInfo += gridControl1_QueryCellInfo; //Event Customization private void gridControl1_SelectionChanged(object sender, GridSelectionChangedEventArgs e) { selectedrange = e.Range; GridCurrentCell currentCell = this.gridControl1.CurrentCell; this.gridControl1.InvalidateRange(GridRangeInfo.Cell(currentCell.RowIndex, currentCell.ColIndex)); } private void gridControl1_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e) { GridRangeInfo range = GridRangeInfo.Cell(e.Style.CellIdentity.RowIndex, e.Style.CellIdentity.ColIndex); GridCurrentCell currentCell = gridControl1.CurrentCell; if (selectedrange.Contains(range) && !range.IsEmpty && currentCell != null && e.Style.CellIdentity.ColIndex == currentCell.ColIndex && e.Style.CellIdentity.RowIndex == currentCell.RowIndex) { e.Style.BackColor = this.gridControl1.Model.Options.AlphaBlendSelectionColor; } } VB 'Event Subscription. AddHandler Me.gridControl1.SelectionChanged, AddressOf gridControl1_SelectionChanged AddHandler Me.gridControl1.QueryCellInfo, AddressOf gridControl1_QueryCellInfo 'Event Customization Private Sub gridControl1_SelectionChanged(ByVal sender As Object, ByVal e As GridSelectionChangedEventArgs) selectedrange = e.Range Dim currentCell As GridCurrentCell = Me.gridControl1.CurrentCell Me.gridControl1.InvalidateRange(GridRangeInfo.Cell(currentCell.RowIndex, currentCell.ColIndex)) End Sub Private Sub gridControl1_QueryCellInfo(ByVal sender As Object, ByVal e As GridQueryCellInfoEventArgs) Dim range As GridRangeInfo = GridRangeInfo.Cell(e.Style.CellIdentity.RowIndex, e.Style.CellIdentity.ColIndex) Dim currentCell As GridCurrentCell = gridControl1.CurrentCell If selectedrange.Contains(range) AndAlso (Not range.IsEmpty) AndAlso currentCell IsNot Nothing AndAlso e.Style.CellIdentity.ColIndex = currentCell.ColIndex AndAlso e.Style.CellIdentity.RowIndex = currentCell.RowIndex Then e.Style.BackColor = Me.gridControl1.Model.Options.AlphaBlendSelectionColor End If End Sub Screenshot Sample Link: C#: Selection color for currentcell_CS VB: Selection color for currentcell_VB
