将按钮动态添加到 ItemsControl答案

【问题标题】：Dynamically adding buttons to ItemsControl将按钮动态添加到 ItemsControl
【发布时间】：2011-09-28 22:09:12
【问题描述】：

我有一个问题，我想要你的输入。我有一个外部网格，它有两列。在第一列中，我使用绑定到视图模型的 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 设置为vertical all come，但它们不会自动换行。只有当我悬挂并扩展窗口的宽度时，所有这些都是可见的。顺序也不正确：

他们来了：

A C
乙D

任何想法。

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

【问题讨论】：

请阅读editing help 并在下次尝试正确格式化内容（不过这仍然可以改进）
所以总结一下您的问题：如果内容不适合垂直放置，您需要知道如何自动使您的包装面板变宽？
是的，如果高度不合适，我要求它们分成两列

标签： wpf xaml wpf-controls

【解决方案1】：

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

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

我希望这会引导你正确的方向。

【讨论】：

很高兴我能帮上忙。如果适用，也请投票作为答案。

【解决方案2】：

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

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

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

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

可以这样使用：

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

其实你可以用MathConver来设置Width的WrapPanel，应该可以正常工作。

【讨论】：