How To Retrieve The Dragged Item Index In Viewmodel Command With The Prism Framework In Xamarin.Forms Listview (Sflistview)?

Updated on Feb 15, 2024

You can retrieve the drag index of ListViewItem in ViewModel using the Prism framework DelegateCommand in Xamarin.Forms SfListView.

You can also refer the following article.

https://www.syncfusion.com/kb/11371

XAML

EventToCommandBehavior to convert the ItemDragging event to a command and set ListView behavior.

<syncfusion:SfListView x:Name="listView" Grid.Row="1" ItemSize="60" BackgroundColor="#FFE8E8EC" GroupHeaderSize="50" ItemsSource="{Binding ToDoList}" DragStartMode="OnHold,OnDragIndicator" SelectionMode="None">

    <syncfusion:SfListView.Behaviors>
        <local:EventToCommandBehavior EventName="ItemDragging" Command="{Binding ItemDraggingCommand}"/>
    </syncfusion:SfListView.Behaviors>

    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <Frame HasShadow="True" BackgroundColor="White" Padding="0">
                <Frame.InputTransparent>
                    <OnPlatform x:TypeArguments="x:Boolean" Android="True" iOS="False"/>
                </Frame.InputTransparent>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="60" />
                    </Grid.ColumnDefinitions>
                    <Label x:Name="textLabel" Text="{Binding Name}" FontSize="15" TextColor="#333333" VerticalOptions="Center" HorizontalOptions="Start" Margin="5,0,0,0" />
                    <syncfusion:DragIndicatorView Grid.Column="1" ListView="{x:Reference listView}" 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>

Create command for the ItemDragging event with the ItemDraggingEventArgs parameter. You can access the item index from NewIndex field of the ItemDraggingEventArgs.

public class ViewModel
{
    public DelegateCommand<ItemDraggingEventArgs> ItemDraggingCommand { get; set; }
    public ViewModel()
    {
        ItemDraggingCommand = new DelegateCommand<ItemDraggingEventArgs>(OnItemDragging);
    }

    private void OnItemDragging(ItemDraggingEventArgs args)
    {
        if (args.Action == DragAction.Drop)
            App.Current.MainPage.DisplayAlert("Message", "ListView item index after reordering " + args.NewIndex, "Ok");
    }
}

Output

DragAndDropIndex