如何在StackPanel或ListView中叠加项目?

我正在制作一个纸牌游戏,我想在玩家的手中显示半张相互覆盖的牌。 如何使用ListView或StackPanel执行此操作? 这是一个如何显示玩家手牌的示例。

球员手

    

UPDATE

我为ListView的ItemContainerStyle设置了边距并且它有效,但我有另一个问题。 ListView项目的宽度不适合图像,并且有一些间距。 我该如何删除它。 请参阅XAML代码下方的图像。

                 

玩家的手

我会在列表中使用Canvas,并将您的卡绘制到canvas上,因为canvas中绘制的内容不会被剪裁,而是通过canvasZIndex等进行管理。

根据所需的间距调整canvas大小,并使内容过大。 我还建议在使用列表框和使用模板时绑定到Items-source。

顺便说一下,我使用solidColorBrushes定义我的卡片,所以我可以绘制矩形,用你的图像源替换它。 我已经在资源中定义了我的源代码,但实际上它将绑定到ObservableCollection(Say,PlayersCurrentHand或其他东西):

           

现在,我假设您正在使用ListBox,因为您想支持选择? 如果是这样,WPF突出显示列表框项的方式会搞乱这种重叠,所以我们需要替换它。 如果您不想选择,只需使用itemsControl,您就可以跳过所有选择内容。

这是我们的基本列表框:

               

这给了我们这个:

在此处输入图像描述

现在,我们想要在canvas中绘制所有列表项,所以让我们定义ItemContainerStyle:

     

看看我们如何将canvas宽度设置为15? 这定义了我们卡片的间距。 所有canvas都以15的间隔堆叠。但是,我们在DateTemplate中绘制的矩形宽度为60,因此这些矩形向右溢出。

在此处输入图像描述

我们已经超越了凌乱的标准选择和突出风格。 但是我们不知道突出显示和选择了什么,所以让我们重新添加一些function。我们还可以添加阴影等内容:

                  

所以现在我们有了这个:

在此处输入图像描述

注意,gif没有完全正确地选择。 如果没有一些代码,我认为宽度问题很难修复。 一种选择是创建一个IValueConverter,它计算卡片列表的宽度,并将其绑定到Listview的Width属性。

编辑

找到了解决尺寸问题的方法! 填充! 当然。 但是,我发现滚动查看器甚至剪辑它包含的canvas(如果你考虑它就有意义),但我们将所有的努力隐藏起来:

在此处输入图像描述

因此,您必须通过手动设置ControlTemplate来覆盖滚动查看器function:

         

所以现在padding占了最后一张额外50张卡。

总代码,有一些更多的视觉调整:

                          

在此处输入图像描述

它非常灵活,很容易添加“伸出”function。 动画将是下一个重要的步骤。

编辑2

我现在正在玩。 我不确定我喜欢“跳到前面”function,如果他们只是偷看会更好。 另外,将它们扇出(使用多重绑定):

在此处输入图像描述

使用以下模板: