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. Image for the cookie policy date
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


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
Comments
Bernd Boruttau
Apr 07, 2022

Hi, how to get a nive visual when dragging across list view borders? When reproducing your example my item visual just moves vertically but not horizontally.

Reply
Lakshmi Natarajan [Syncfusion]
Apr 12, 2022

Hi Bernd,

We could only show the dragItem in the current ListView and we could not achieve the reported requirement using SfListView. Also, we have considered it as a feature request. As of now, the plan for implementation of reported feature request is uncertain.

Thank you for requesting this feature and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts.

Feedback link: https://www.syncfusion.com/feedback/1185/provide-support-for-drag-and-drop-the-item-between-two-listviews

We will prioritize the features every release based on the demands, and we do not have an immediate plan to implement this feature since we committed to already planned work.

Please upvote this feature to make this our priority. If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.

Regards, Lakshmi Natarajan

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