Category / Section
How to change selected image in .NET MAUI ListView (SfListView) ?
2 mins read
You can change the selected item image in .NET MAUI ListView (SfListView) using Converters.
XAML
Binding IsSelected Property and converter to Label Text.
<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:IconColorConverter x:Key="IconColorConverter"/> <local:SelectionIconConverter x:Key="SelectionIconConverter"/> <DataTemplate x:Name="ItemTemplate" x:Key="ItemTemplate" > … <Label Grid.Row="0" Grid.Column="2" Padding='{OnPlatform UWP="0,10,0,0"}' WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" HorizontalTextAlignment="Start" VerticalOptions="Center" VerticalTextAlignment="Center" FontSize="{OnPlatform Android=Large, UWP=Medium, WPF=Medium, iOS=Large, MacCatalyst=Large}" Text="{Binding IsSelected, Converter={StaticResource SelectionIconConverter}}" TextColor="{Binding Path=IsSelected, Converter={StaticResource IconColorConverter}}" FontFamily="{OnPlatform iOS=Sync FontIcons, MacCatalyst=Sync FontIcons, Android=Sync FontIcons.ttf#, UWP=Sync FontIcons.ttf#Sync FontIcons}"/> … </DataTemplate> </ResourceDictionary> </ContentPage.Resources> <syncfusion:SfListView x:Name="listView" Grid.Row="1" AutoFitMode="None" SelectionGesture="Tap" SelectionMode="Multiple" SelectedItems="{Binding SelectedItems}" SelectionBackground ="#E4E4E4" ItemTemplate="{StaticResource ItemTemplate}" ItemSize="65" ItemSpacing="0,0,0,1" IsStickyHeader="True" ItemsSource="{Binding MusicInfo}"> </syncfusion:SfListView> </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 SfListViewSelectionBehavior : Behavior<ContentPage> { ListView.SelectionChanged += ListView_SelectionChanged; ListView.SelectionChanged -= ListView_SelectionChanged; private void ListView_SelectionChanged(object sender, ItemSelectionChangedEventArgs e) { if (ListView.SelectionMode == Syncfusion.Maui.ListView.SelectionMode.Multiple) { SelectionViewModel.HeaderInfo = ListView.SelectedItems.Count + " item(s) selected"; for (int i = 0; i < e.AddedItems.Count; i++) { var item = e.AddedItems[i]; (item as Musiqnfo).IsSelected = true; } for (int i = 0; i < e.RemovedItems.Count; i++) { var item = e.RemovedItems[i]; (item as Musiqnfo).IsSelected = false; } } } }
Setting Image based on the IsSelected value in Converter.
public class IconColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) return Color.FromArgb("#1a75ff"); else return Color.FromArgb("#b3b3b3"); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } public class SelectionIconConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if ((bool)value) return "\ue748"; else return "\ue718"; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }
Take a moment to peruse the documentation, to learn more about selection in SfListView with code.