How to set alternate row styling on listview based on span count?
In ListView, you can assign alternate color for each item in a row based on the SpanCount property. It can be assigned by finding item index of the underlying data object loaded in the grid layout using IValueConverter.
Xaml
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" >
<ContentPage.Resources>
<ResourceDictionary>
<local:IndexToColorConverter x:Key="IndexToColorConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<syncfusion:SfListView x:Name="listView" ItemsSource="{Binding contactsinfo}">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="{Binding .,Converter={StaticResource IndexToColorConverter},ConverterParameter={x:Reference Name=listView}}" >
<Label Text="{Binding ContactName}"/>
<Label Text="{Binding ContactNumber}">
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</Grid>
</ContentPage.Content>
</ContentPage>
C#
public class IndexToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var listview = parameter as SfListView;
var index = listview.DataSource.DisplayItems.IndexOf(value);
int spanCount = ((Syncfusion.ListView.XForms.GridLayout)listview.LayoutManager).SpanCount;
Color CornBlue = Color.CornflowerBlue;
Color Blue = Color.LightBlue;
if (spanCount % 2 == 1)
{
return index % 2 == 0 ? CornBlue : Blue;
}
else
{
int row = index / spanCount;
if (row % 2 == 0)
{
return index % 2 == 0 ? CornBlue : Blue;
}
Else
{
return index % 2 == 0 ? Blue : CornBlue;
}
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Sample Link : GridLayoutSample
