C# UWP拖放功能问题：10x10网格图片交换无法获取选中与目标图片

实现步骤 #

• 首先在拖放启动时记录源图片对象
• 然后在释放操作触发时计算坐标匹配目标图片
• 最终传入两个图片对象完成交换校验

调整后的完整代码 #

public MainViewModel()
{
    GameGrid = new Grid { AllowDrop = true };
    GameGrid.DragOver += GameGrid_DragOver;
    GameGrid.Drop += GameGrid_Drop;

    for (int row = 0; row < 10; row++)
    {
        GameGrid.RowDefinitions.Add(new RowDefinition());
        for (int col = 0; col < 10; col++)
        {
            if (row == 0)
                GameGrid.ColumnDefinitions.Add(new ColumnDefinition());

            var image = new Image { Source = logic.GetImage(), CanDrag = true, AllowDrop = true };
            // 新增：订阅拖放启动事件
            image.DragStarting += Image_DragStarting;
            Grid.SetRow(image, row);
            Grid.SetColumn(image, col);
            GameGrid.Children.Add(image);
        }
    }
}

// 新增：拖放启动事件处理，存储源图片
private void Image_DragStarting(UIElement sender, DragStartingEventArgs args)
{
    args.Data.Properties.Add("SourceImage", sender as Image);
    args.Data.RequestedOperation = DataPackageOperation.Move;
}

private void GameGrid_DragOver(object sender, Windows.UI.Xaml.DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Move;
}

private async void GameGrid_Drop(object sender, Windows.UI.Xaml.DragEventArgs e)
{
    // 读取源图片
    if (!e.DataView.Properties.TryGetValue("SourceImage", out var sourceObj) || sourceObj is not Image sourceImage)
        return;

    // 计算释放位置对应的网格行列
    Point dropPosition = e.GetPosition(GameGrid);
    double cellWidth = GameGrid.ActualWidth / 10;
    double cellHeight = GameGrid.ActualHeight / 10;
    int targetColumn = Math.Clamp((int)Math.Floor(dropPosition.X / cellWidth), 0, 9);
    int targetRow = Math.Clamp((int)Math.Floor(dropPosition.Y / cellHeight), 0, 9);

    // 查找目标位置的图片
    Image targetImage = GameGrid.Children.Cast<Image>()
        .FirstOrDefault(img => Grid.GetRow(img) == targetRow && Grid.GetColumn(img) == targetColumn);

    // 排除同一个图片的情况，执行校验
    if (targetImage != null && sourceImage != targetImage)
    {
        if (logic.IsValidSwap(sourceImage, targetImage))
        {
            // 校验通过后执行交换逻辑，此处为交换图片源，也可根据需求交换两个图片的行列位置
            var tempSource = sourceImage.Source;
            sourceImage.Source = targetImage.Source;
            targetImage.Source = tempSource;
        }
    }
}

关键说明 #

如果你的业务需求是交换两个图片的位置而非图片内容，只需要把交换Source的逻辑替换为交换两个Image对象的Grid.Row和Grid.Column附加属性即可。

内容的提问来源于stack exchange，提问作者OfekCatz