Question

我从Button创建了一个DataTemplate，并将MinWidth和MinHeight放到0。我在DataTemplate的Grid上将width和height设置为75。网格有边框，它的MinWidth和MinHeight也都设置为0。边框的宽度和高度设置为自动（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中强制使用任何特定的宽度/高度约束。你永远无法在DataTemplate中设置Width / Height，并且Button控件的ActualWidth / ActualHeight匹配，除非Button没有chrome。

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

注意：我认为Windows Phone和Windows应用商店应用上的按钮和其他控件的样式默认情况下针对触摸进行了优化，因此控件的大小会比您预期的要大一些。我不知道这是否现在正在发挥，因为你的问题不完整。请加入一些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宽度太大

1 个答案: