如何设置 WPF 的 ItemsControl 以在唯一位置显示每个元素？

Question

我正在构建一个二十一点程序，目前正在研究手牌显示。

我有一个 PlayerSeat UserControl，其中有一个 ItemsControl 用于显示卡片。与正常的二十一点游戏一样，纸牌（在我的例子中是图像）是一张一张地叠在一起的。不同的游戏动作（拆分、双倍下注等）必须改变屏幕上纸牌的布局。ItemsControl 的 ItemSource 属性是ObservableCollection<Card> Hand我的 Player 的 ViewModel 中的“”属性。Card 对象包含带有 Card 图像的 BitmapSource。

我浏览了几个网页（参见帖子末尾），寻找实现我想要的目标的方法。我正在寻找一种方法来执行两个选项之一。

1. （首选）指定每个“手模式”（拆分、双下等）的布局，并指定手 ( OC<Card>) 的每个索引应按顺序放置的位置。例如，对于 Hand 中的第一张卡片，将 Source 绑定到 Hand[0].CardImage 的 Image 控件放在 (X1, Y1) 处，然后将 Hand[1] Image 放在 (X2, Y2) 处，依此类推。最好可以通过在 ItemsControl 上设置某种绑定模板属性（以在手部模式之间进行更改）来进行调整。

2. （后备）显示所有已绑定 Source 属性的 Image 控件。将这些图像的 Top/Left 属性绑定到 Hand[0].Top/Left 并在 Hand 类中进行位置计算。

我不是一个在没有亲自调查这个问题的情况下就提出问题的人。看来我需要将 ItemsPanelTemplate 与 StackPanel 一起使用，但不知道从哪里开始。关键是使图像重叠并放置在我想要的位置。您对我的问题的任何启发都会有所帮助。

参考： http: //drwpf.com/blog/itemscontrol-a-to-z/（特别是“ItemsControl：'P'代表面板”）

Answer 1

你可以使用 Canvas 作为 吗ItemsPanelTemplate？就像是：

<ItemsControl ItemsSource="{Binding Hand}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Canvas />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Image Source="{Binding Image}" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
  <ItemsControl.ItemContainerStyle>
    <Style>
      <Setter Property="Canvas.Left" Value="{Binding ImageX}" />
      <Setter Property="Canvas.Top" Value="{Binding ImageY}" />                    
    </Style>
  </ItemsControl.ItemContainerStyle>
</ItemsControl>

这假设您的Hand班级具有职位属性。如果这不合适，那么您可以创建一个HandViewModel包含Hand实例的包装器，以及这些仅用于显示目的的附加 X,Y 属性。这些属性的返回值可能会根据您当前的“手动模式”而改变。