动态添加按钮到 ItemsControl

Question

我有一个问题需要你的意见。我有一个外部网格，它有两列。在第一列中，我使用绑定到视图模型的 ItemsControl（此视图模型用于动态创建按钮）。我有一个为项目模板定义的包装面板模板。第二列用于列表框。

我在视图模型中为按钮创建对象，并将其绑定到视图。要求是，如果窗口高度适合，则所有按钮应出现在单个列中（一个在另一个列下面），否则应出现在两列中。

如果一栏

1
2
3
4

如果有两列：

1 2
3 4

下面给出了我的代码：

ItemsControl:

<Grid>...
<ItemsControl ItemsSource="{Binding buttonsViewModelColl}"
           ItemsPanel="{StaticResource WrapPanelTemplateA}"
         ItemTemplate="{StaticResource ButtonsDataTempleteA}" Width="{Binding ActualWidth, ElementName=<OuterGrid>}" Grid.Row="2" HorizontalAlignment="Center"/>     
</Grid>

WrapPannelTemplete:

<ItemsPanelTemplate x:Key="WrapPanelTemplate">
             <WrapPanel/>
         </ItemsPanelTemplate>

DataTempleteForButton ：

<DataTemplate x:Key="ButtonsDataTempleteA">
             <Button 
                            Content="{Binding Path=Text}" 
                            IsEnabled="{Binding Path=IsEnabled}"
                             Style="{StaticResource StyleButtonA}" 
                            FontFamily="Segoe UI Semibold"
                             HorizontalAlignment="Left" />
         </DataTemplate>

问题是在渲染时只有一两个按钮可见。如果我将 WrapPannel Orientation 设置为垂直，所有内容都会出现，但不会自动换行。仅当我拖动并扩展窗口的宽度时，所有内容都是可见的。而且序列不正确：

它们是：

A C
BD

任何想法。

另一个问题：有没有办法可以在 XAML 运行时根据外部网格高度增加内部网格列的宽度？

Answer 1

我认为您需要的是 UniformGrid 而不是 WrapPanel 因为您希望按钮总数、整个容器的高度和面板中的列数相互依赖。包裹面板无法控制第三个因素（即面板中的列数）。

UniformGrid 具有完全可绑定的 Rows 和 Columns 属性。它们可以与上述 3 个因素进行多重绑定，并且多值转换器可以根据某些自定义启发式算法决定要显示的行数和列数。

我希望这能引导您走向正确的方向。

Answer 2

我怀疑这与 ItemsControl 允许的宽度有关。如果手动设置 WrapPanel 的宽度是否有效？

至于你的最后一个问题，根据网格的高度设置列的宽度，你可以简单地绑定到它。

<ColumnDefinition Width="{Binding ElementName=OuterGrid, Path=ActualHeight}" />

如果您需要对该值执行计算，我通常使用转换器，它接受网格高度的参数，并将其转换为我想要的任何值。我实际上有一个用于此类事情的 MathConverter ，因为我懒得为我想要的每个绑定计算编写自己的转换器，并且可以找到代码 这里

它可以这样使用：

Width="{Binding ElementName=OuterGrid, Path=ActualHeight,
                Converter={StaticResource MathConverter},
                ConverterParameter=@VALUE/2}"

实际上，你可以使用MathConver 设置 WrapPanel 的Width，它应该可以正常工作。