Skip to content

This repository contains sample about how to set background color alternatively in Xamarin.Forms ListView (SfListView) ?

Notifications You must be signed in to change notification settings

SyncfusionExamples/alternative-background-color-listview-xamarin-with-selection

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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

You can also refer the following article.

https://www.syncfusion.com/kb/11295/how-to-set-background-color-alternatively-in-xamarin-forms-listview-sflistview

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

AlternateBackgroundSelection

About

This repository contains sample about how to set background color alternatively in Xamarin.Forms ListView (SfListView) ?

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages