Question

我正在制作一个BlackJack程序，目前正在进行手持显示。

我有一个PlayerSeat UserControl，里面有一个ItemsControl用于显示卡片。正如BlackJack的正常游戏一样，卡片（在我的情况下是图像）彼此叠加在一起。不同的游戏动作（分割，双击等）必须改变屏幕上卡片的布局。 ItemsControl的ItemSource属性是我的Player的ViewModel中的“ObservableCollection<Card> Hand”属性。 Card对象包含带有Card图像的BitmapSource。

我查看了几个网页（见帖子末尾），了解如何完成我想要的工作。我正在寻找一种方法来做两种选择之一。

（首选）为每个“手动模式”（分割，双击等）指定布局，并指定Hand（OC<Card>）的每个索引应按顺序放置的位置。例如，对于Hand中的第一张卡，将一个Image控件的Source绑定到Hand [0] .CardImage（X1，Y1），然后将Hand [1]图像放在（X2，Y2），依此类推。通过在ItemsControl上设置某种绑定模板属性（在手模式之间切换），可以最佳地调整它。
（Fallback）显示绑定了Source属性的所有Image控件。将这些图像的Top / Left属性绑定到Hand [0] .Top / Left并在Hand类中进行放置计算。

如果不自己调查这个问题我就不应该问。看来我需要使用带有StackPanel的ItemsPanelTemplate，但不知道从哪里开始。关键是使图像重叠并放置在我想要的位置。你可以解决我的问题的任何亮点都会有所帮助。

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

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属性。这些属性的返回值可能会根据您当前的“手动模式”而改变。

Answer 2

如果您正确设计视图，您的视图模型根本不需要了解卡片的物理位置。这是一个非常简单的例子。我为TextBlock和Border创建的默认样式控制它们的大小，以及（通过负边距）它们堆叠在一起时的重叠方式。 ItemsControl使用水平StackPanel进行布局。

如果您采用这种方法，您可以将项目控件放置在视图中需要放置的位置（我，我会使用停靠面板和边距的某种组合来组织它），并且要么具有不同的集合您要查看的每个项目控件的视图模型。

这可能有点复杂，但是你也可以拥有一个卡片对象集合，并将每个ItemsControl的{{1}}绑定到ItemsSource，这些CollectionView过滤了某些属性卡片。关于这一点的好处是，只需更改该属性的值，即可将卡从一个地方“移动”到另一个地方。

在任何一种情况下，您都会看到，一旦您使项目控件负责管理其内容的布局，您就可以在视图中自由移动它们而无需触摸您的视图模型。

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
  <Style TargetType="TextBlock">
    <Setter Property="Height" Value="150"/>
    <Setter Property="Width" Value="100"/>
  </Style>
   <Style TargetType="Border">
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Background" Value="Lightgray"/>
    <Setter Property="Margin" Value="0, 0, -80, 0"/>
    </Style>
   </Page.Resources>
  <StackPanel>  
    <ItemsControl>
      <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"/>
       </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <Border>
       <TextBlock Text="Foo"/>
      </Border>
      <Border>
       <TextBlock Text="Bar"/>      
      </Border>
      <Border>
       <TextBlock Text="Baz"/>      
      </Border>
    </ItemsControl>
  </StackPanel>
</Page>

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

2 个答案: