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 drag and drop an item from one to another listview in xamarin.forms

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: March 12, 2020 |
Last Revised Date: March 16, 2020

You can drag and drop an item from one to another SfListView using the ItemDragging event in Xamarin.Forms.

XAML

The ListView is defined with DragStartMode, OnHold, and OnDragIndicator.

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <syncfusion:SfListView x:Name="ToDoListView"
                               ItemSize="60"
                               IsStickyHeader="True"
                               ItemsSource="{Binding ToDoList}"
                               DragStartMode="OnHold,OnDragIndicator"
                               SelectionMode="None">
            <syncfusion:SfListView.HeaderTemplate>
                <DataTemplate>
                    <Label Text="To do Items" />
                </DataTemplate>
            </syncfusion:SfListView.HeaderTemplate>
            <syncfusion:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Label Text="{Binding Name}"/>
                        <syncfusion:DragIndicatorView ListView="{x:Reference ToDoListView}">
                            <Grid Padding="10, 20, 20, 20">
                                <Image Source="DragIndicator.png" />
                            </Grid>
                        </syncfusion:DragIndicatorView>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.ItemTemplate>
        </syncfusion:SfListView>
        <syncfusion:SfListView x:Name="WorkDoneListView"
                               ItemSize="60"
                               IsStickyHeader="True"
                               ItemsSource="{Binding NewList}"
                               DragStartMode="OnHold,OnDragIndicator"
                               SelectionMode="None">
            <syncfusion:SfListView.HeaderTemplate>
                <DataTemplate>
                    <Label Text="Completed works" />
                </DataTemplate>
            </syncfusion:SfListView.HeaderTemplate>
            <syncfusion:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Label Text="{Binding Name}"/>
                        <syncfusion:DragIndicatorView ListView="{x:Reference ToDoListView}">
                            <Grid Padding="10, 20, 20, 20">
                                <Image Source="DragIndicator.png" />
                            </Grid>
                        </syncfusion:DragIndicatorView>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.ItemTemplate>
        </syncfusion:SfListView>
    </Grid>
</ContentPage>
 

C#

You can check the value of the bound of the listview in the ItemDragging event using the position and you can also handle the add or remove the item from one collection to another.

Here, the dragged item is removed from the WorkDoneListView bound collection and added to the ToDoListView bound collection.

WorkDoneListView.ItemDragging += WorkDoneListView_ItemDragging;
 
private async void WorkDoneListView_ItemDragging(object sender, ItemDraggingEventArgs e)
{
    var position = new Point();
    var xPosition = e.Position.X;
    double yPosition = e.Position.Y;
    position.X = xPosition;
    position.Y = yPosition;
    if (e.Action == DragAction.Dragging)
    {
        if (this.ToDoListView.Bounds.Contains(position))
            this.ToDoListView.BackgroundColor = Color.Red;
        else
            this.ToDoListView.BackgroundColor = Color.White;
    }
    if (e.Action == DragAction.Drop)
    {
        if (this.ToDoListView.Bounds.Contains(position))
        {
            var item = e.ItemData as ToDoItem;
            await Task.Delay(100);
            viewModel.WorkDoneList.Remove(item);
            viewModel.ToDoList.Add(item);
            item.IsDone = false;
        }
        this.ToDoListView.BackgroundColor = Color.White;
    }
}

C#

Here, the dragged item is removed from the ToDoListView bound collection and added to the WorkDoneListView bound collection.

ToDoListView.ItemDragging += ToDoListView_ItemDragging;
 
private async void ToDoListView_ItemDragging(object sender, ItemDraggingEventArgs e)
{
    var position = new Point();
    var xPosition = e.Position.X;
    double yPosition = e.Position.Y;
    position.X = xPosition;
    position.Y = yPosition;
 
    if (e.Action == DragAction.Dragging)
    {
        if (this.WorkDoneListView.Bounds.Contains(position))
            this.WorkDoneListView.BackgroundColor = Color.Red;
        else
            this.WorkDoneListView.BackgroundColor = Color.White;
    }
    if (e.Action == DragAction.Drop)
    {
        if (this.WorkDoneListView.Bounds.Contains(position))
        {
            var item = e.ItemData as ToDoItem;
            await Task.Delay(100);
            viewModel.ToDoList.Remove(item);
            viewModel.WorkDoneList.Add(item);
            item.IsDone = true;
        }
        this.WorkDoneListView.BackgroundColor = Color.White;
    }
}

 

Note:

The ListViewItem is added to the container. So, the item does not come out from it.

 

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

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