如何使用 WPF 中使用网格的模板显示项目集合？

Question

我有一个对象集合，我想将它们表示为 Grid，每个对象表示为 矩形（或 Button - 避风港）尚未确定这一点）。每个对象都有一个 X 和 Y 属性，表示其在 Grid 中的位置。

例如，我可能有四个对象：

var one = new MyClass(){X=0, Y=0}
var two = new MyClass(){X=1, Y=0}
var three = new MyClass(){X=0, Y=1}
var four = new MyClass(){X=1, Y=1}

Grid 应该有两行和两列。对象one 将表示为网格左上角的矩形。对象two将位于对象one右侧的槽中，三将位于one下方，并且< code>four 将位于右下角的插槽中。

我试图弄清楚如何以惯用的 WPF 方式创建这两个模板（例如使用 DataTemplate 和类似的构造），但需要一些帮助。有什么建议吗？

我还希望能够将模板存储在主窗口之外的单独文件中，但我也不知道如何做到这一点。

Answer 1

关于您的第一个问题，这可能是您正在寻找的模式：

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="50"/>          
          <RowDefinition Height="50"/>          
          <RowDefinition Height="50"/>          
        </Grid.RowDefinitions>
      </Grid>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <Button Grid.Row="1" Grid.Column="2">R1C2</Button>
  <Button Grid.Row="2" Grid.Column="1">R2C1</Button>
  <Button Grid.Row="0" Grid.Column="0">R0C0</Button>
</ItemsControl>

在真实的应用程序中，您将 ItemsControl.ItemsSource 设置为 Binding ，其源是对象的集合，然后创建一个 DataTemplate ，如下所示：

<DataTemplate DataType="{x:Type MyObject}">
   <Rectangle Grid.Row="{Binding Row}" Grid.Column="{Binding Column}">
     <!-- other visuals go here -->
   </Rectangle>
</DataTemplate>

至于将代码组织到单独的文件中：您应该考虑创建一个 UserControl 来显示对象，而不是一个数据模板。创建其中一个并不比创建另一个更困难，并且 UserControl 是存在于其自己的 XAML 文件中的类，并且可以像任何其他对象一样通过其名称在 XAML 中实例化。

根据您的设计，您可以将网格定位与对象的实际视觉呈现分开，以便您可以在其他地方重用该呈现。这可能就是我的处理方式。为我的对象创建 UserControl 后，我会在 Grid.Resources 中创建一个 DataTemplate （因为它描述了特定的 Grid 如何 应该显示对象），如下所示：

<DataTemplate DataType="{x:Type MyObject}">
   <DockPanel Grid.Row="{Binding Row}" Grid.Column="{Binding Column}">
      <local:MyObjectUserControl DataContext="{Binding}"/>
   </DockPanel>
</DataTemplate>

还可以使用类似包含的方法来组织 XAML：创建一个包含资源字典的独立 XAML 文件，然后将字典合并到您的窗口（或应用程序或任何其他内容）中否则真的）资源字典：

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="myresourcedictionary.xaml"/>
      <ResourceDictionary Source="myresourcedictionary2.xaml"/>
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

这可能是组织大量样式和模板的好方法，但它的问题是，如果设置了 ResourceDictionary.MergedDictionaries ，则无法直接放置任何项目字典中，因此您必须创建一个单独的 XAML 文件来包含仅属于窗口的资源，这有点痛苦。

Answer 2

一种方法是使用 ListView。您可以将其 ItemsPanel 设置为 Canvas，然后在数据模板中将 Canvas.Top 和 Canvas.Left 绑定到您希望项目具有的 X 和 Y 坐标：

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
             <Button Canvas.Top="{Binding YPosition}", Canvas.Left="{Binding XPosition}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如果需要，您可以使用转换器来相乘YPosition 和 XPosition 按像元大小排列，以便属性可以引用像元数量而不是像素大小。

---

另一方面（更简单）：如果您事先知道网格将有多少行或列，并且每个单元格只有一个元素，那么您可以使用 UniformGrid 而不是 ListView。