WPF按钮相同/推荐宽度

Question

假设您有一个带有多个按钮的窗口，如确定/取消或是/否/取消。所有的按钮都需要相同的宽度。显然，这可以通过猜测一个数字并将它们全部硬连线到这个数字来完成。

有没有更好的方法来做到这一点，一个会考虑到首选/推荐的尺寸（只要ok按钮有多宽？这不是一个修辞问题，我其实不知道答案！ ），最长字幕文本需要什么，如果字体大小增加等等，会发生什么？

Answer 1

有几种方法可以做到这一点：

1）使用网格布局。每个Button都有自己的Star，它是Star的大小。这样一来，所有列的大小相同：

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Button Grid.Column="0">Yes</Button> 
    <Button Grid.Column="1">No</Button> 
    <Button Grid.Column="2">Cancel</Button> 
</Grid> 

2）你可以有一个项目为“主尺寸”和所有其他的宽度绑定到这个项目的宽度。

<StackPanel Orientation="Horizontal"> 
    <Button Name="MasterButton" Width="100">Yes</Button> 
    <Button> 
     <Button.Width> 
      <Binding ElementName="MasterButton" Path="Width"/> 
     </Button.Width> 
     No 
    </Button> 
</StackPanel> 

编辑：在实际的代码，你将可能有WIDTH = “自动”。由于其他宽度基于“主宽度”，应选择宽度最宽（最宽文本）的按钮。

Answer 2

在最常见的情况下，您想要在部分中创建 样式，然后根据需要应用此样式。现在，当您更改样式时，所有按钮都会更改。

或者您可以更改按钮的内容，使其自动调整为文本。

Answer 3

根据用于Windows 7和Windows Vista的MS用户体验交互准则（p61），命令按钮的标准尺寸为50x14 DLU实际尺寸（75x23像素）。指南还建议您“尝试使用[这些]默认宽度和高度。”很明显，如果你需要更多的宽度来适应清晰的标签，那么需要更多的宽度。

Answer 4

在丹尼尔的答案中使用“主”控制一样，但绑定到“ActualWidth的”属性而不是“宽”：

<StackPanel Orientation="Horizontal"> 
    <Button Name="MasterButton">Yes</Button> 
    <Button> 
     <Button.Width> 
      <Binding ElementName="MasterButton" Path="ActualWidth"/> 
     </Button.Width> 
     No 
    </Button> 
</StackPanel> 

这样，该值从运行主控取时间，在考虑了最小和最大宽度以及所有其他布局计算之后。绑定到“宽度”会绑定到在编译时放入属性的任何东西，这可能不是真正使用的宽度。

此外，绑定可以写成较短像

<Button Width="{Binding ElementName=MasterButton, Path=ActualWidth}"/> 

Answer 5

另一个，也许更简单，方式做到这一点是使用SharedSizeGroup财产上的ColumnDefinition和RowDefinition类。

WPF Grid中的列（和行）可以自动调整大小以适应其内容 - 当使用SharedSizeGroup时，具有相同组名的列共享其调整逻辑。

Xaml看起来像这样...

<Grid Grid.IsSharedSizeScope="True"> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition SharedSizeGroup="Buttons" /> 
     <ColumnDefinition SharedSizeGroup="Buttons" /> 
     <ColumnDefinition SharedSizeGroup="Buttons" /> 
    </Grid.ColumnDefinitions> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

    <Button Grid.Column="1" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Center" 
      Content="Ok" 
      Margin="4" /> 

    <Button Grid.Column="2" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Center" 
      Content="Cancel" 
      Margin="4" /> 

    <Button Grid.Column="3" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Center" 
      Content="Long Button Caption" 
      Margin="4" /> 
</Grid> 

Answer 6

这些答案都是伟大的，如果你有一个按钮固定数量或固定的布局，但如果像我一样有来自约束力和包含在ItemsControl那么这是不可行的到来按钮的动态数量。但是有一个简单的方法，它仍然涉及使用Grid的sharedsize属性。

的DataTemplate：

<DataTemplate x:Key="ODIF.Mapping"> 
    <Button HorizontalContentAlignment="Left" Background="#FFEEEEEE" BorderBrush="#FFBDBDBD"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" SharedSizeGroup="PluginButtonsWidth"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" SharedSizeGroup="PluginButtonsIconHeight"/> 
       <RowDefinition Height="Auto" SharedSizeGroup="PluginButtonsNameHeight"/> 
      </Grid.RowDefinitions> 
      <Image Width="32" Height="32" Source="{Binding PluginIcon}" RenderOptions.BitmapScalingMode="HighQuality"/> 
      <TextBlock Grid.Row="1" Text="{Binding PluginName}"/> 
     </Grid> 
    </Button> 
</DataTemplate> 

父容器：

<ItemsControl ItemsSource="{Binding MappingPlugins, ElementName=page}" ItemTemplate="{StaticResource ODIF.Mapping}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Grid.IsSharedSizeScope="True"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

本质上按钮的内容本身可以是网格，然后根据需要，你可以把你的标签和图标，但即使按钮不要驻留在同一个网格中（它们都是自己的网格），只要将根容器的（ItemsControl）属性Grid.IsSharedSizeScope设置为True，网格仍可以共享它的大小。

这将强制每个按钮的内容网格基于最大的同一确切大小，而不必将按钮本身放在预定义的网格中。