Question

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

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

这是我的ListView：

<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>

Answer 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;
}

Answer 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属性。然后所有元素应具有相同的宽度

如何在ListView / WrapPanel中使用相同宽度的按钮？

2 个答案: