We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: April 8, 2020 |
Last Revised Date: April 8, 2020

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>

C#

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Steven Marcus
Jul 13, 2020

I've copied the code and I get following error as soon as dragging happens.

System.NullReferenceException: 'Object reference not set to an instance of an object.'

Reply
Steven Marcus
Jul 13, 2020

Adding

if (args is null) return;

in the onitemdragging function shows that args is never anything but a null value. Thoughts?

Steven Marcus
Jul 13, 2020

SOLUTION TO THE ISSUE ...

You need to copy over the folder Helper containing BehaviorBase.cs / EventToCommandBehavior.cs into your project. Ensure that your page is set to xmlns:local to your namespace not PRISMLIBRARY.com

Lakshmi Natarajan [Syncfusion]
Jul 14, 2020

Hi Steven,

Greetings from Syncfusion.

You can refer to our online document to use Prism framework EventToCommandBehavior with default event args from the following link, KB link: https://www.syncfusion.com/kb/11680/how-to-work-with-prism-using-the-eventtocommandbehavior-in-xamarin-forms-listview

Regards, Lakshmi Natarajan

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon