How to retrieve the dragged item index in ViewModel command with the Prism framework in Xamarin.Forms ListView (SfListView)?

1 min read

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

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

Gif image to show how to retrieve item index of the dragged item in ListView.

View sample in GitHub

Did you find this information helpful?

Yes

Comments

How to retrieve the dragged item index in ViewModel command with the Prism framework in Xamarin.Forms ListView (SfListView)?

Access denied