Question

我有一个奇怪的ItemsControl布局。

我有一个4x6网格，其格式如下：

1  2  3  4 
13 14 15 16
5  6  7  8
17 18 19 20
9  10 11 12
21 22 23 24

有一种简单的方法吗？我应该使用6个项目控件并列出我的列表中的“部分”吗？有一个很好的方法来做到这一点？通知怎么样？

重要的是要注意我可能会或可能不会有所有24个条目，但布局需要保持（想想它就像宾果卡上的填充插槽或其他东西）

编辑：

理想情况下，我希望能够列出一个列表，并对列表中项目的属性进行一些有趣的排序/填充类型填充。

例如，如果我有一个带有几个单位的ObservableCollection，并且Unit有一个属性“Index”，我想生成一个视图消耗品Collection，它自动使用Index来制作一个填充列表。我想一个可观察的字典可以工作，但这看起来很糟糕。也许新的自定义布局面板是有序的吗？

Answer 1

使用ItemsControl的自定义模板，在纯XAML中有一种巧妙的方法。如果你所有的“卡片”都有固定的尺寸，比如100x100：

，这是最简单的

<!-- Wrap each card in a decorator twice as high as the card cell -->
<DataTemplate x:Key="ItemInDoubleHighBox">
  <Decorator Width="100" Height="200">
    <Decorator Width="100" Height="100" ClipToBounds="True">
      <ContentPresenter />
    </Decorator>
  </Decorator>
</DataTemplate>

<!-- Define a template for use with WrapPanel -->
<ItemsPanelTemplate x:Key="WrapPanelTemplate">
  <WrapPanel />
</ItemsPanelTemplate>

<!-- Now the actual ItemsControl template -->
<ControlTemplate TargetType="ItemsControl">
  <Grid Width="600" Height="600" ClipToBounds="True">

    <!-- Items 1 to 12 -->
    <ItemsControl ItemsSource="{TemplateBinding ItemsSource}"
                  ItemsPanel="{StaticResource WrapPanelTemplate}"
                  ItemTemplate="{StaticResource ItemInDoubleHighBox}" />

    <!-- Items 13 to 24 -->
    <ItemsControl ItemsSource="{TemplateBinding ItemsSource}"
                  ItemsPanel="{StaticResource WrapPanelTemplate}"
                  ItemTemplate="{StaticResource ItemInDoubleHighBox}"
                  RenderTransform="1 0 0 1 0 -500" />

  </Grid>
</ControlTemplate>

工作原理：DataTemplate导致项目为“双倍间距”，只有1-12可见，而第二个ItemsControl上的RenderTransform使得项目13-24也出现在“双倍行距”中第一行项目之间的空格。

注意：您可以使高度和宽度数据可绑定，但需要更多XAML。只需添加ScaleTransforms，XAML中就会出现“200”，“500”或“600”。例如，要处理“200”，您可以在内部装饰器上使用ScaleY =“0.5”设置缩放变换，并在每个ItemsControl上使用ScaleY =“2”进行缩放变换。现在外部装饰器的高度将为100，这可以是数据绑定的。其他常量可以通过类似的内容缩放前和后缩放来处理。并且因为WPF在渲染之前组合了所有变换，所以额外的变换基本上不会花费任何东西。

Answer 2

WPF使这非常简单。基本上你只需要指定一个ItemsPanelTemplate。

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

现在，您添加到ListBox的任何项目都将根据面板的布局逻辑进行排列，在本例中为UniformGrid。

请注意，您仍需要按照希望它们的显示顺序保留集合中的项目。所以我先将它们排序，然后再将它们添加到ListBox中。如果你需要在集合中创建“漏洞”，那么我会使用某种类型的占位符对象（也许是新的对象（）会这样做）而不是尝试使用复杂的布局逻辑来传播项目。

不规则的布局ItemsControl

2 个答案: