如何在 ListView/WrapPanel 中有相同宽度的按钮？答案

【问题标题】：How to have buttons with the same width inside a ListView/WrapPanel?如何在 ListView/WrapPanel 中有相同宽度的按钮？
【发布时间】：2015-03-11 15:52:52
【问题描述】：

我有一个 ListView，它显示 WrapPanel 内的按钮列表。按钮内的文本可能会有所不同，因此按钮的宽度也可能会有所不同。

我希望所有按钮都具有相同的宽度，这意味着我希望所有按钮都具有 WrapPanel 内较大按钮的宽度。有没有办法做到这一点？

这是我的列表视图：

<ListView Margin="8 10 8 8"
                      VerticalAlignment="Top"
                      ScrollViewer.CanContentScroll="True"
                      Background="Transparent"
                      x:Name="ResourcesList"
                      BorderThickness="0"
                      ItemContainerStyle="{DynamicResource LvItemStyle}"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                      ItemsSource="{Binding CadResource.Values}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel HorizontalAlignment="Left" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <ItemContainerTemplate>
                        <Button Content="{Binding ResourceAlias.Value}"
                                x:Name="ResourceButton"
                                Command="{Binding ElementName=ResourcesList, Path=DataContext.SelectResourceCommand}"
                                CommandParameter="{Binding}"
                                VerticalContentAlignment="Stretch"
                                BorderThickness="0"
                                Margin="2"
                                MinWidth="75"
                                Template="{DynamicResource ResourceButtonTemplate}"
                                Foreground="{DynamicResource ResouceAliasText}"
                                Background="{Binding ResourceAlias.BackColor, Mode=TwoWay, Converter={converter:StringFormatConverter}}">
                            <Button.ContextMenu>
                                <ContextMenu Name="ContextMenu"

                                             ItemsSource="{Binding ContextMenu}"
                                             ItemContainerStyle="{StaticResource MenuItemStyle}" />
                            </Button.ContextMenu>
                        </Button>
                    </ItemContainerTemplate>
                </ListView.ItemTemplate>
            </ListView>

这是我正在使用的按钮的模板：

<ControlTemplate x:Key="ResourceButtonTemplate"
                     TargetType="{x:Type ButtonBase}">
        <Border x:Name="border"
                Background="{DynamicResource ResourceButtonBackground}"
                BorderThickness="1"
                Height="20"
                BorderBrush="{DynamicResource ResourceButtonBorder}"
                SnapsToDevicePixels="True">
            <Border BorderThickness="0 1 0 0"
                    Background="Transparent"
                    BorderBrush="{DynamicResource ResourceHighlight}">
                <Grid>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <images:ResourceSquare Fill="{TemplateBinding Background}"
                                           Grid.Column="0"
                                           Style="{StaticResource ViewBoxStyleChildWindow13X13}"
                                           x:Name="ResourceSquare"
                                           HorizontalAlignment="Left"
                                           Margin="3 2 0 2" />

                    <images:ResourceTriangle Fill="{TemplateBinding Background}"
                                             Grid.Column="0"
                                             Style="{StaticResource ViewBoxStyleChildWindow13X13}"
                                             x:Name="ResourceTriangle"
                                             Visibility="Collapsed"
                                             HorizontalAlignment="Left"
                                             Margin="3 2 0 2" />

                    <ContentPresenter x:Name="contentPresenter"
                                      Grid.Column="1"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Content="{TemplateBinding Content}"
                                      ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                      Focusable="False"
                                      TextBlock.FontSize="{Binding FontSize}"
                                      Margin="7 0 7 0"
                                      RecognizesAccessKey="True"
                                      HorizontalAlignment="Center"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                    <images:ResourceConnected Fill="{DynamicResource IconToolbar}"
                                              Grid.Column="2"
                                              Style="{StaticResource ViewBoxStyleChildWindow10X10}"
                                              HorizontalAlignment="Right"
                                              VerticalAlignment="Top" />
                </Grid>
            </Border>
        </Border>
        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding IsSelected.Value}"
                         Value="True">
                <Setter TargetName="border"
                        Property="Background"
                        Value="{DynamicResource ListSelectedLine}" />
                <Setter TargetName="border"
                        Property="BorderBrush"
                        Value="{DynamicResource BorderHighLight}" />
            </DataTrigger>
            <Trigger Property="Button.IsDefaulted"
                     Value="True">
                <Setter Property="BorderBrush"
                        TargetName="border"
                        Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            </Trigger>
            <Trigger Property="IsMouseOver"
                     Value="True">
                <Setter Property="Background"
                        TargetName="border"
                        Value="{DynamicResource CadMouseOver}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

【问题讨论】：

澄清一下，您希望所有按钮的大小都为环绕面板中最大按钮的大小？

标签： wpf xaml

【解决方案1】：

这就是我所做的：

我在 WrapPanel 上为 SizeChanged 添加了一个事件处理程序

<WrapPanel HorizontalAlignment="Left" SizeChanged="WrapPanelSizeChanged" />

而WrapPanelSizeChanged如下：

private void WrapPanelSizeChanged(object sender, EventArgs e)
{
    var panel = sender as WrapPanel;
    if(panel == null)
        return;
    if( panel.Children.Count == 0 )
        return;
    var itemWidth = panel.Children.OfType<FrameworkElement>().Max(x => x.ActualWidth);
    panel.ItemWidth = itemWidth;
}

【讨论】：

【解决方案2】：

嗯，您需要的控件称为 WrapGrid。它存在于 Windows 应用商店应用程序中，但不存在于 WPF 中。有人称它为 UniformWrapPanel。请看这个： Is there a WPF "WrapGrid" control available or an easy way to create one?

请注意，WrapPanel 具有 ItemWidth 属性。如果设置它，所有子元素都将具有此宽度。如果您可以将其设置为固定值，那将非常容易。

您可以尝试关注。将项目添加到 wrappanel，然后测量它们的大小，选择最宽的元素并将其 ActualWidth 设置为 WrapPanel.ItemWidth 属性。那么所有元素都应该有相同的宽度

【讨论】：