How to update alternate row styling on reordering in Xamarin.Forms ListView?
You can update the alternate row style for ListViewItems after reordering in Xamarin.Forms SfListView.
C#
You can get the items index from the DataSource.DisplayItems collection and return the BackgroundColor based on the item index.
namespace ListViewXamarin
{
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);
return index % 2 == 0 ? Color.FromHex("#ffdbf6") : Color.FromHex("#e2fcff");
}
}
}
XAML
Converter bound to the BackgroundColor property of the elements loaded inside the SfListView.ItemTemplate.
<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.Behaviors>
<local:Behavior/>
</ContentPage.Behaviors>
<ContentPage.Resources>
<ResourceDictionary>
<local:IndexToColorConverter x:Key="IndexToColorConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" ItemSize="50" DragStartMode="OnHold">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,0,0,0" BackgroundColor="{Binding ., Converter={StaticResource IndexToColorConverter}, ConverterParameter={x:Reference Name=listView}}">
<Label LineBreakMode="NoWrap" VerticalTextAlignment="End" Text="{Binding ContactName}"/>
<Label Grid.Row="1" VerticalTextAlignment="Start" Text="{Binding ContactNumber}"/>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
C#
The SfListView.ItemDragging event is triggered to update the alternate row styling after reordering the item using the RefreshListViewItem method in the DropAction.Drop action. You need to set the UpdateSource property as true, to update the collection after reordering.
namespace ListViewXamarin
{
public class Behavior : Behavior<ContentPage>
{
SfListView ListView;
protected override void OnAttachedTo(ContentPage bindable)
{
ListView = bindable.FindByName<SfListView>("listView");
ListView.DragDropController.UpdateSource = true;
ListView.ItemDragging += ListView_ItemDragging;
base.OnAttachedTo(bindable);
}
private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
{
if (e.Action == DragAction.Drop)
{
Device.BeginInvokeOnMainThread(() =>
{
if (e.NewIndex < e.OldIndex)
{
ListView.RefreshListViewItem(-1, -1, true);
}
});
}
}
}
}
Output
Conclusion
I hope you enjoyed learning about how to update alternate row styling on reordering in Xamarin.Forms ListView (SfListView).
You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
