Skip to content

Commit 6e7dd6d

Browse files
authored
ReadMe file updated with KB content
1 parent 25f393e commit 6e7dd6d

File tree

1 file changed

+67
-1
lines changed

1 file changed

+67
-1
lines changed

README.md

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,67 @@
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+
![DragAndDropIndex](https://github.com/SyncfusionExamples/dragged-listviewitem-index-xamarin-listview/blob/master/ScreenShots/DragAndDropIndex.gif)

0 commit comments

Comments
 (0)