How to show the reordered sorted index in Xamarin.Forms ListView (SfListView)
You can show the reordered index of ListViewItems in Xamarin.Forms SfListView.
XAML
Define DragDropController.UpdateSource as True to update the underlying collection after reordering. The converter is used to display the index of the item.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewXamarin;assembly=ListViewXamarin"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
x:Class="ListViewXamarin.MainPage">
...
<ContentPage.Resources>
<ResourceDictionary>
<local:IndexConverter x:Key="indexConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout >
<syncfusion:SfListView x:Name="ToDoListView" ItemSize="60" IsStickyHeader="True" ItemsSource="{Binding ToDoList}" DragStartMode="OnHold,OnDragIndicator" SelectionMode="None">
<syncfusion:SfListView.DragDropController>
<syncfusion:DragDropController UpdateSource="True"/>
</syncfusion:SfListView.DragDropController>
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Frame HasShadow="True" Padding="0">
...
<Label Text="{Binding ., Converter={StaticResource indexConverter}, ConverterParameter={x:Reference ToDoListView}}" Grid.Column="1" Margin="5,3,0,0" VerticalOptions="Center" HorizontalOptions="Start" />
<syncfusion:DragIndicatorView Grid.Column="2" ListView="{x:Reference ToDoListView}" HorizontalOptions="Center" VerticalOptions="Center">
<Grid Padding="10, 20, 20, 20">
<Image Source="DragIndicator.png" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>
</syncfusion:DragIndicatorView>
</Grid>
</Frame>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
</ContentPage>
C#
Returns the index of each ListViewItem using the DisplayItems.IndexOf method.
public class IndexConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null) return 0;
var item = value as ToDoItem;
var listView = parameter as SfListView;
return listView.DataSource.DisplayItems.IndexOf(item);
}
}
C#
The SfListView.ItemDragging event is triggered to refresh the UI after reordering the items using the RefreshListViewItem method in the DropAction.Drop action.
public class Behavior : Behavior<ContentPage>
{
SfListView ListView;
protected override void OnAttachedTo(ContentPage bindable)
{
ListView = bindable.FindByName<SfListView>("ToDoListView");
ListView.ItemDragging += ListView_ItemDragging;
base.OnAttachedTo(bindable);
}
private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
{
if (e.Action == DragAction.Drop)
{
if (e.NewIndex < e.OldIndex)
{
Device.BeginInvokeOnMainThread(() => ListView.RefreshListViewItem(-1, -1, true));
};
}
}
}
