Xamarin 表单 - 在 CollectionView 中拖放（渲染器）

Question

如何在 Xamarin Forms 的 CollectionView 中实现简单的拖放功能？ 不使用任何 3rd 方 NUGET 包。下面的代码是一个简单的collectionview，但现在我需要渲染它......我如何渲染和实现拖放以重新排序数字？

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 文件

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";

}

Answer 1

要在集合视图中实现拖放排序，使用网格布局（适用于所有情况），您可以使用 Xamarin 的拖放手势识别器：

在您的 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>

在您的 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));
      });
}