按钮 DataTemplate 宽度太大

Question

我从按钮创建了一个 DataTemplate，并将 MinWidth 和 MinHeight 放入 0。我在 DataTemplate 的网格上将宽度和高度设置为 75。网格有一个边框，它的 MinWidth 和 MinHeight 也都设置为 0。边框的宽度和高度设置为auto(75).

现在，当我将按钮放在我的页面上时，它的宽度为 109.166664123535，高度为 75。在 Blend 中查看 DataTemplate 时，它说 Grid 及其子项的宽度为 75，但 DataTemplate 本身更宽。

如何使整个 DataTemplate 成为 75 的 width 而不仅仅是 DataTemplate 子级？

编辑 1 在@Guttsy 建议之后，这就是我将代码更改为的样子。另请注意，NumberPadButtonStyle 删除了按钮 ControlTemplate 边框上的顶部和底部填充。代码如下：

<Grid HorizontalAlignment="Center" VerticalAlignment="Top">
    <Grid.Resources>
        <Style x:Key="SetDominationsNumberPadButtonStyle"
               BasedOn="{StaticResource NumberPadButtonStyle}"
               TargetType="Button">
            <Setter Property="Width" Value="110" />
            <Setter Property="Height" Value="110" />
        </Style>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Button Content="1" Style="{StaticResource SetDominationsNumberPadButtonStyle}" />
    <Button Grid.Column="1"
            Content="2"
            Style="{StaticResource SetDominationsNumberPadButtonStyle}" />
    <Button Grid.Column="2"
            Content="3"
            Style="{StaticResource SetDominationsNumberPadButtonStyle}" />
    <Button Grid.Row="1"
            Grid.Column="0"
            Content="5"
            Style="{StaticResource SetDominationsNumberPadButtonStyle}" />
    <Button Grid.Row="1"
            Grid.Column="1"
            Content="6"
            Style="{StaticResource SetDominationsNumberPadButtonStyle}" />
    <Button Grid.Row="1"
            Grid.Column="2"
            Content="7"
            Style="{StaticResource SetDominationsNumberPadButtonStyle}" />
</Grid>

Answer 1

如果您希望 Button 的宽度为 75 个单位，则应将 Button 本身的 Width 设置为 75。不要在 ControlTemplate 中强加任何特定的 width/height 约束。您将永远无法在 DataTemplate 中设置 Width/Height 并使 Button 控件的 ActualWidth/ActualHeight 匹配，除非 Button 没有 chrome.

如果您希望您的按钮看起来大小一致，我建议将 MinWidth（而不是 Width）设置为您希望适用于大多数按钮的数字。这样，如果您决定本地化您的应用程序，您将允许更长的翻译以适应按钮。

注意：我相信 Windows Phone 和 Windows Store 应用程序上的按钮和其他控件的样式在默认情况下已针对触摸进行了优化，因此控件会略微比您预期的要大。我不知道这是否正在发挥作用，因为您的问题不完整。请包括一些 XAML.

<UniformGrid Rows="3" Columns="3" VerticalAlignment="Center" HorizontalAlignment="Center">
    <UniformGrid.Resources>
        <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="NumberPadButtonStyle">
            <Setter Property="Width" Value="75" />
            <Setter Property="Height" Value="75" />
            <Setter Property="Margin" Value="2" />
        </Style>
    </UniformGrid.Resources>

    <Button Content="1" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="2" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="3" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="4" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="5" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="6" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="7" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="8" Style="{StaticResource NumberPadButtonStyle}" />
    <Button Content="9" Style="{StaticResource NumberPadButtonStyle}" />
</UniformGrid>

按钮 DataTemplate 宽度太大

Button DataTemplate width too large

xaml

blend

datatemplate

windows-phone-8.1

visual-studio-2015