按钮数据模板宽度太大

Question

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

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

如何使整个 DataTemplate 成为 width 的 75 而不仅仅是 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 中强制任何特定的宽度/高度约束。除非 Button 没有镶边，否则您将永远无法在 DataTemplate 中设置 Width/Height 并使 Button 控件的 ActualWidth/ActualHeight 匹配。

如果您希望按钮的大小保持一致，我建议您将 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>