Xamarin Forms - Drag and Drop in CollectionView (Renderer)

Question

How to implement a Simple Drag and Drop feature in a CollectionView in Xamarin Forms ? Without using any 3rd party NUGET package. Below code is of a simple collectionview but now i need to render it... How do i render and implement drag and drop in order to re-order the numbers ?

Xaml

<CollectionView ItemsSource="{Binding Stores}"
                 x:Name="CV"
                         VerticalOptions="Center"   
                         HorizontalOptions="Center"   
                         BackgroundColor="#F9F9F9"  
                         Margin="10,100,10,10">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="3"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="10" HorizontalOptions="CenterAndExpand">
                <Frame BorderColor="LightGray" HasShadow="True" Padding="5" HorizontalOptions="CenterAndExpand">
                    <Grid Padding="5" ColumnSpacing="0" RowSpacing="0" Margin="2" HorizontalOptions="StartAndExpand">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="{Binding Id}" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" FontAttributes="Bold"/>
                    </Grid>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

.CS file

public partial class MainPage : ContentPage
{
    public List<Store> storelist;

    public MainPage()
    {
        InitializeComponent();
        storelist = new List<Store>();
        BindingContext = this;
        storelist.Add(new Store() { Id = 1, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 21.00, Title = "Title" });
        storelist.Add(new Store() { Id = 2, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 88.12, Title = "Title" });
        storelist.Add(new Store() { Id = 3, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 65.21, Title = "Title" });
        storelist.Add(new Store() { Id = 4, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 39.95, Title = "Title" });
        storelist.Add(new Store() { Id = 5, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 958.99, Title = "Title" });
        storelist.Add(new Store() { Id = 6, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 64.85, Title = "Title" });
        storelist.Add(new Store() { Id = 7, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 2050.55, Title = "Title" });
        storelist.Add(new Store() { Id = 8, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 120500.00, Title = "Title" });
        storelist.Add(new Store() { Id = 9, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 21.00, Title = "Title" });
        storelist.Add(new Store() { Id = 10, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 88.12, Title = "Title" });
        storelist.Add(new Store() { Id = 11, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 65.21, Title = "Title" });
        storelist.Add(new Store() { Id = 12, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 39.95, Title = "Title" });
        storelist.Add(new Store() { Id = 13, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 958.99, Title = "Title" });
        storelist.Add(new Store() { Id = 14, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 64.85, Title = "Title" });
        storelist.Add(new Store() { Id = 15, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 2050.55, Title = "Title" });
        storelist.Add(new Store() { Id = 16, ImageUrl = "https://cdn.shopify.com/s/files/1/1104/4168/products/Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png", IsLike = true, Price = 120500.00, Title = "Title" });

        CV.ItemsSource = storelist;
    }
}

public class Store
{
    public int Id { get; set; }
    public bool IsLike { get; set; }
    public string ImageUrl { get; set; }
    public string Title { get; set; }
    public double Price { get; set; }
    public string Favorite { get; set; } = "favorite.png";

}

You could create a custom UICollectionView in iOS and set it as NativeControl of renderer . Here is a sample which could help you https://github.com/xamarin/ios-samples/tree/master/ios11/DragAndDropCollectionView . — Lucas Zhang, May 28 '20 at 14:45

score 2 · Answer 1 · edited Oct 11 '21 at 15:43

To implement drag and drop ordering in a collection view, with Grid layout (it works in all cases), you can use Xamarin's Drag and Drop GestureRecognizers :

In your XAML :

<CollectionView ItemsSource="{Binding Stores}"
   ...
   <DataTemplate>
      <StackLayout Padding="10" HorizontalOptions="CenterAndExpand">
      ...
      <StackLayout.GestureRecognizers>
         <DragGestureRecognizer DragStartingCommand="{Binding Path=BindingContext.DragStartingCommand, Source={x:Reference Grid}}"
            DragStartingCommandParameter="{Binding .}" />
    
         <DropGestureRecognizer DragOverCommand="{Binding Path=BindingContext.DragOverCommand, Source={x:Reference Grid}}"
            DragOverCommandParameter="{Binding .}"
    
         </StackLayout.GestureRecognizers>
      </StackLayout>
   </DataTemplate></CollectionView.ItemTemplate>
</CollectionView>

And in your ViewModel :

public class MyViewModel {
   ...
   Store itemBeingDragged;
   public ObservableCollection<Store> Stores = new ObservableCollection<Store>();
   public Command<Store> DragStartingCommand { get; }
   public Command<Store> DragOverCommand { get; }
   ...

   public MyViewModel() {
      Stores.Add(new Store() { Id = 0, ... };
      ...

      DragStartingCommand = new Command<Store>((s) =>
      {
         itemBeingDragged = s;
      });

      DragOverCommand = new Command<Store>((s) =>
      {
         if (s.Id == itemBeingDragged.Id)
            return;

         Stores.Move(Stores.IndexOf(itemBeingDragged), Stores.IndexOf(s));
      });
}

Xamarin Forms - Drag and Drop in CollectionView (Renderer)

1 Answers1