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

Question

我正在构建BlackJack程序，目前正在手显示器上工作。

我有一个PlayerSeat UserControl，里面有一个ItemsControl用于显示卡片。和普通的大酒杯比赛一样，这张牌（我的情况是这样）是放在彼此顶上的。不同的游戏动作（分割，双下等）必须改变屏幕上卡片的布局。 ItemsControl的ItemSource属性是我的Player的ViewModel中的“ObservableCollection<Card> Hand”属性。卡片对象包含具有卡片图像的BitmapSources。

我已经浏览了几个网页（请参阅文章的结尾），以了解如何实现我想要的功能。我正在寻找一种方法来做两种选择之一。

1. （优选）指定每个“手动模式”的布局（分体，双下，等），并指定手（OC<Card>）的每个索引应放置在顺序。例如，对于Hand中的第一张牌，将源控件绑定到Hand [0] .CardImage的Image控件放在（X1，Y1）处，然后将Hand [1]图像放在（X2，Y2）等等。这可以通过在ItemsControl上设置某种绑定模板属性（在手形模式之间切换）来进行优化调整。

2. （回退）显示所有带有其属性绑定的图像控件。将这些图像的Top/Left属性绑定到Hand [0] .Top/Left并在Hand类中执行布局计算。

我不是一个人问问自己没有调查的问题。看来我需要使用StackPanel的ItemsPanelTemplate，但不知道从哪里开始。关键是让图像重叠并放置在我想要的地方。你可以在我的问题上解决任何问题都会有所帮助。

参考： http://drwpf.com/blog/itemscontrol-a-to-z/（具体 “的ItemsControl： 'P' 是面板”）

Answer 1

你可以使用一个帆布为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类中拥有位置属性。如果这不合适，则可以创建一个包含Hand实例的包装HandViewModel，以及仅用于显示目的的这些附加X，Y属性。这些属性的返回值可能会根据您当前的“手形模式”而改变。

Answer 2

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

如果你采用这种方法，你可以将项目控件放置在任何他们需要在视图中定位的地方（我会用一些停靠面板和边距的组合来组织它），并且可以有不同的集合在你的视图模型中为每个项目控件绑定。

这可能稍微复杂一点，但是您也可以拥有一个卡对象集合，并将每个ItemsControl的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>