Skip to content

This repository contains sample about how to change the selected item background in Xamarin.Forms ListView (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/item-template-elements-selection-listview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to change the selected item background in Xamarin.Forms ListView (SfListView)

You can change the BackgroundColor of the elements in the ItemTemplate based on selection in Xamarin.Forms [SfListView](https://help.syncfusion.com/xamarin/listview/overview? using converter.

You can also refer the following article.

https://www.syncfusion.com/kb/11543/how-to-customize-the-background-color-of-selected-itemtemplate-elements-in-xamarin-forms

XAML

Define the converter for Grid and Label inside ItemTemplate to change the BackgroundColor when the item is selected using SelectionChangedCommand of ListView.

<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.Resources>
        <ResourceDictionary>
            <local:ColorConverter x:Key="colorConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
  <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}" SelectionChangedCommand="{Binding ListViewSelectionChanged}">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="grid" BackgroundColor="{Binding IsSelected, Converter={StaticResource colorConverter}, ConverterParameter={x:Reference 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 x:Name="label1" LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" BackgroundColor="{Binding IsSelected, Converter={StaticResource colorConverter}, ConverterParameter={x:Reference label1}}"/>
                                <Label x:Name="label2" Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" BackgroundColor="{Binding IsSelected, Converter={StaticResource colorConverter}, ConverterParameter={x:Reference label2}}"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C#

Change the IsSelected property of item based on selection using the SelectionChangedCommandParameter.

namespace ListViewXamarin
{
    public class ContactsViewModel : INotifyPropertyChanged
    {
        public Command ListViewSelectionChanged { get; set; }
        Contacts previousItem = null;
 
        public ContactsViewModel()
        {
            ListViewSelectionChanged = new Command(OnSelectionChanged);
        }
 
        private void OnSelectionChanged(object obj)
    {
        foreach (var selectedItem in (obj as Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs).AddedItems)
            (selectedItem as Contacts).IsSelected = true;
 
        foreach (var removedItem in (obj as Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs).RemovedItems)
            (removedItem as Contacts).IsSelected = false;
    }
    }
}

C#

Converter to change the BackgroundColor of the ItemTemplate elements.

namespace ListViewXamarin
{
    public class ColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? parameter as Grid != null ? Color.Blue : Color.Yellow : Color.Transparent;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Output

ElementSelection

About

This repository contains sample about how to change the selected item background in Xamarin.Forms ListView (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages