c# - Windows 应用商店应用程序中 XAML 网格中的图像重叠

Question

我想看看是否有人能给我指出正确的方向。我想为 Windows 应用商店创建一个基本的纸牌游戏应用程序。我已经完成了多个应用程序，并且非常熟悉 XAML 网格和在单元格中放置图像。在纸牌游戏中，我将采用与 Microsoft 红心大战非常相似的设置(纸牌排在底部并且纸牌彼此重叠)。我的问题是我不知道如何使网格单元中的图像相互重叠。有谁知道如何实现这一目标？谢谢。

顺便说一句，如果解决方案需要后台代码，我知道 VB.Net 和 C#。

Answer 1

您要查找的是 Grid.RowSpan 和 Grid.ColumnSpan。

例如:

考虑一个 3x3 网格(用 X 表示的空单元格):

X X X
X X X
X X X

现在考虑一个具有 Grid.Row=0 和 Grid.Column=1 的元素。它将像这样渲染(O 是一个填充的单元格)。

X O X
X X X
X X X

现在，如果我们增加该元素的 RowSpan 和 ColumnSpan，但保持其 Row 和 Column 位置同样，我们正在创建一个更大的盒子，在同一位置有一个左上角的单元格。考虑 Grid.RowSpan=2 和 Grid.ColumnSpan=2。

X O O
X O O
X X X

“盒子”锚定在位置 1,0(x,y 或列、行)，但延伸到下一个单元格，形成 2x2 子网格。

现在，考虑第二个元素Y。如果我们要在上一张图中添加 Y 以及 Grid.Row=1、Grid.Column=0、Grid.RowSpan=2、Grid.ColumnSpan=3，那么我们会得到:

X O O
Y Y Y
Y Y Y

请记住， Canvas 是一个“堆栈”，因为最后绘制的对象位于顶部。

您可以使用此方法重叠网格中的不同元素。最后一个例子，因为它将更好地说明您可能正在寻找的卡片重叠概念。

O := 
{
    Grid.Row=0, 
    Grid.Column=0, 
    Grid.RowSpan=2,
    Grid.ColumnSpan=2
}

Y := 
{
    Grid.Row=1, 
    Grid.Column=1, 
    Grid.RowSpan=2,
    Grid.ColumnSpan=2
}

先画 O，然后画 Y 结果

O O X
O Y Y
X Y Y

先画 Y，然后画 O 结果

O O X
O O Y
X Y Y

我相信，您也可以手动修改 Canvas.ZIndex，正如 @ChrisShao 提到的。