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

我正在构建一个BlackJack程序，目前正在进行手动显示。我有一个PlayerSeat UserControl，里面有一个ItemsControl用于显示卡片。正如BlackJack的正常游戏一样，卡片（在我的情况下是图像）彼此叠加在一起。不同的游戏动作（分割，双击等）必须改变屏幕上卡片的布局。 ItemsControl的ItemSource属性是我的Player的ViewModel中的“ObservableCollection<Card> Hand”属性。 Card对象包含带有Card图像的BitmapSources。我查看了几个网页（见帖子末尾），了解如何完成我想要的工作。我正在寻找一种方法来做两种选择之一。（首选）为每个“手动模式”（分割，双击等）指定布局，并指定手的每个索引（OC<Card>）应按顺序放置的位置。例如，对于Hand中的第一张卡，将一个Image控件的Source绑定到Hand [0] .CardImage（X1，Y1），然后将Hand [1]图像放在（X2，Y2），依此类推。通过在ItemsControl上设置某种绑定模板属性（在手模式之间切换），可以最佳地调整这一点。（后备）显示绑定了Source属性的所有Image控件。将这些图像的Top / Left属性绑定到Hand [0] .Top / Left并在Hand类中进行放置计算。如果不自己调查这个问题，我就不会问。看来我需要使用带有StackPanel的ItemsPanelTemplate，但不知道从哪里开始。关键是使图像重叠并放置在我想要的位置。你可以解决我的问题上的任何亮点都会有所帮助。参考： http://drwpf.com/blog/itemscontrol-a-to-z/（特别是“ItemsControl：'P'代表Panel”）

已邀请:

2 个回复

漂截嘘

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

殿虫

如果正确设计视图，您的视图模型根本不需要了解卡的物理位置。这是一个非常简单的例子。我为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>

要回复问题请先登录或注册

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

2 个回复

发起人

itemspaneltemplate

问题状态

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

与内容相关的链接

2 个回复

发起人

itemspaneltemplate

问题状态