We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set background color alternatively in Xamarin.Forms ListView (SfListView)

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: March 26, 2020 |
Last Revised Date: March 26, 2020

You can change the BackgroundColor of ItemTemplate loaded in the Xamarin.Forms SfListView based on the value changed in Trigger with consideration of Selection.

XAML

Defined Trigger for the parent element of SfListView ItemTemplate and bind the model class property to change the Background color of the item.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RowStyle"
             xmlns:listView="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="RowStyle.MainPage">
 
    <ContentPage.BindingContext>
        <local:ContactsViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
 
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:IndexToColorConverter x:Key="IndexToColorConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <ContentPage.Content>
        <listView:SfListView x:Name="listView" ItemsSource="{Binding Items}" ItemSize="50" SelectionMode="SingleDeselect" 
                             SelectionChanging="ListView_SelectionChanging" SelectionBackgroundColor="Beige">
            <listView:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10,0,0,0"  x:Name="grid">
                        <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="SlateBlue" />
                            </DataTrigger>
                        </Grid.Triggers>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Label LineBreakMode="NoWrap" 
                   VerticalTextAlignment="End"
                   Text="{Binding ContactName}"/>
                        <Label Grid.Row="1"
                   VerticalTextAlignment="Start"
                   Text="{Binding ContactNumber}"/>
                    </Grid>
                </DataTemplate>
            </listView:SfListView.ItemTemplate>
        </listView:SfListView>
    </ContentPage.Content>
</ContentPage>

C#

Create model class property to indicate whether the item is selected or not. The background color will be updated based on the property value.

 

namespace ListViewXamarin
{
    public class Contacts : INotifyPropertyChanged
    {
        private bool isSelected;
 
        public bool IsSelected
        {
            get { return isSelected; }
            set
            {
                if (isSelected != value)
                {
                    isSelected = value;
                    this.RaisedOnPropertyChanged("IsSelected");
                }
            }
        }
    }
}

C#

Changing the IsSelected property in the SelectionChanging event of ListView.

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;
    }
}

C#

Coverter to apply the alternate row style based on the index value of items.

namespace ListViewXamarin 
{
    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 ? Color.LightGray : Color.Aquamarine;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Output

Image for alternate row style in SfListView

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile