|
1 | | -# dragged-listviewitem-index-xamarin-listview |
| 1 | +# How to retrieve the dragged item index in ViewModel command with the Prism framework in Xamarin.Forms ListView (SfListView)? |
| 2 | + |
| 3 | +You can retrieve the drag index of [ListViewItem](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.ListViewItem.html?) in ViewModel using the [Prism](https://prismlibrary.com/docs/xamarin-forms/Getting-Started.html) framework [DelegateCommand](https://prismlibrary.com/docs/commanding.html#creating-a-delegatecommand) in Xamarin.Forms [SfListView](https://help.syncfusion.com/xamarin/listview/overview?). |
| 4 | + |
| 5 | +You can also refer the following article. |
| 6 | + |
| 7 | +https://www.syncfusion.com/kb/11371 |
| 8 | + |
| 9 | +**XAML** |
| 10 | + |
| 11 | +[EventToCommandBehavior](https://help.syncfusion.com/xamarin/listview/mvvm?_ga=2.48449378.576537389.1586149449-1204678185.1570168583#event-to-command) to convert the [ItemDragging](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.SfListView~ItemDragging_EV.html?) event to a command and set ListView behavior. |
| 12 | + |
| 13 | +``` xml |
| 14 | +<syncfusion:SfListView x:Name="listView" Grid.Row="1" ItemSize="60" BackgroundColor="#FFE8E8EC" GroupHeaderSize="50" ItemsSource="{Binding ToDoList}" DragStartMode="OnHold,OnDragIndicator" SelectionMode="None"> |
| 15 | + |
| 16 | + <syncfusion:SfListView.Behaviors> |
| 17 | + <local:EventToCommandBehavior EventName="ItemDragging" Command="{Binding ItemDraggingCommand}"/> |
| 18 | + </syncfusion:SfListView.Behaviors> |
| 19 | + |
| 20 | + <syncfusion:SfListView.ItemTemplate> |
| 21 | + <DataTemplate> |
| 22 | + <Frame HasShadow="True" BackgroundColor="White" Padding="0"> |
| 23 | + <Frame.InputTransparent> |
| 24 | + <OnPlatform x:TypeArguments="x:Boolean" Android="True" iOS="False"/> |
| 25 | + </Frame.InputTransparent> |
| 26 | + <Grid> |
| 27 | + <Grid.ColumnDefinitions> |
| 28 | + <ColumnDefinition Width="*" /> |
| 29 | + <ColumnDefinition Width="60" /> |
| 30 | + </Grid.ColumnDefinitions> |
| 31 | + <Label x:Name="textLabel" Text="{Binding Name}" FontSize="15" TextColor="#333333" VerticalOptions="Center" HorizontalOptions="Start" Margin="5,0,0,0" /> |
| 32 | + <syncfusion:DragIndicatorView Grid.Column="1" ListView="{x:Reference listView}" HorizontalOptions="Center" VerticalOptions="Center"> |
| 33 | + <Grid Padding="10, 20, 20, 20"> |
| 34 | + <Image Source="DragIndicator.png" VerticalOptions="Center" HorizontalOptions="Center" /> |
| 35 | + </Grid> |
| 36 | + </syncfusion:DragIndicatorView> |
| 37 | + </Grid> |
| 38 | + </Frame> |
| 39 | + </DataTemplate> |
| 40 | + </syncfusion:SfListView.ItemTemplate> |
| 41 | +</syncfusion:SfListView> |
| 42 | +``` |
| 43 | + |
| 44 | +**C#** |
| 45 | + |
| 46 | +Create command for the ItemDragging event with the [ItemDraggingEventArgs](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.ItemDraggingEventArgs.html?) parameter. You can access the item index from [NewIndex](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.ItemDraggingEventArgs~NewIndex.html?) field of the **ItemDraggingEventArgs**. |
| 47 | + |
| 48 | +``` c# |
| 49 | +public class ViewModel |
| 50 | +{ |
| 51 | + public DelegateCommand<ItemDraggingEventArgs> ItemDraggingCommand { get; set; } |
| 52 | + public ViewModel() |
| 53 | + { |
| 54 | + ItemDraggingCommand = new DelegateCommand<ItemDraggingEventArgs>(OnItemDragging); |
| 55 | + } |
| 56 | + |
| 57 | + private void OnItemDragging(ItemDraggingEventArgs args) |
| 58 | + { |
| 59 | + if (args.Action == DragAction.Drop) |
| 60 | + App.Current.MainPage.DisplayAlert("Message", "ListView item index after reordering " + args.NewIndex, "Ok"); |
| 61 | + } |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | +**Output** |
| 66 | + |
| 67 | + |
0 commit comments