1

我正在构建一个 BlackJack 程序，目前正在研究手显示器。

我有一个 PlayerSeat UserControl，其中有一个 ItemsControl 用于显示卡片。与普通的二十一点游戏一样，这些牌（在我的例子中是图像）是相互叠放的。不同的游戏动作（Split、Double Down 等）必须改变卡牌在屏幕上的布局。ItemsControl 的 ItemSource 属性是ObservableCollection<Card> Hand我的 Player 的 ViewModel 中的一个“”属性。卡片对象包含带有卡片图像的 BitmapSources。

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

  1. （优选）为每个“手模式”（Split、Double Down 等）指定布局，并指定 Hand ( 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'是面板”）

4

2 回答 2

4

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

于 2011-02-07T10:56:31.003 回答
0

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

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

这可能有点复杂，但您也可以拥有一个卡片对象集合，并将每个对象绑定到根据卡片的某些属性过滤ItemsControl的ItemsSourcea 。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>
于 2011-02-08T03:28:04.253 回答