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

Question

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

沙姆尔

<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 的 Drag and Drop GestureRecognizers ：

\n

在您的 XAML 中：

\n

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

\n

在你的 ViewModel 中：

\n

public class MyViewModel {\n   ...\n   Store itemBeingDragged;\n   public ObservableCollection<Store> Stores = new ObservableCollection<Store>();\n   public Command<Store> DragStartingCommand { get; }\n   public Command<Store> DragOverCommand { get; }\n   ...\n\n   public MyViewModel() {\n      Stores.Add(new Store() { Id = 0, ... };\n      ...\n\n      DragStartingCommand = new Command<Store>((s) =>\n      {\n         itemBeingDragged = s;\n      });\n\n      DragOverCommand = new Command<Store>((s) =>\n      {\n         if (s.Id == itemBeingDragged.Id)\n            return;\n\n         Stores.Move(Stores.IndexOf(itemBeingDragged), Stores.IndexOf(s));\n      });\n}\n

\n