按钮数据模板宽度太大

Posted 2023-02-22

【中文标题】按钮数据模板宽度太大

【英文标题】：Button DataTemplate width too large

【发布时间】：2015-02-12 21:35:03

【问题描述】：

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

【参考方案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>

【讨论】：

感谢您的快速回答。我正在制作一个数字键盘，并认为在 DataTemplate 上将宽度和高度设置为 75 是最好的方法，所以我只需要在一个地方调整它。

@Michael 好吧，您当然不想指定它十几次。我已经用一个潜在的解决方案更新了我的答案。

它告诉我“Windows Phone 项目不支持 UniformGrid。”我也有其他风格变化。例如网格背景颜色变化和边框颜色变化。

@Michael 适合我在 WPF 项目而不是 Windows Phone 项目中执行此操作。您可以改用普通的 Grid 并手动设置行和列。

感谢您的帮助。即使您在 DataTemplate 之外对其进行硬编码，它似乎也永远不会达到 75。所以它必须是 ActualWidth 防止它低于某个阈值。