Button DataTemplate width too large

Question

I created a DataTemplate from a Button and put the MinWidth and MinHeight to 0. I set the width and height to 75 on the Grid of the DataTemplate. The grid has a border and it's MinWidth and MinHeight are also both set to 0. The width and height of the border is set to auto(75).

Now when I put the button on my page it's width is 109.166664123535 and height is 75. When viewing the DataTemplate in Blend it says the Grid and it's children are width of 75 but the DataTemplate itself wider.

How do I make the entire DataTemplate a width of 75 and not just the DataTemplate children?

Edit 1 After @Guttsy suggestions, this is what I changed the code to look like. Also note NumberPadButtonStyle removes the top and bottom padding on the buttons ControlTemplate border. The code is below:

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

Guttsy Guttsy · Accepted Answer · 2015-02-12T21:44:58

If you want the Button to be 75 units wide, then you should set Width on the Button itself to be 75. Do not force any particular width/height constraints in your ControlTemplate. You'll never be able to set Width/Height in your DataTemplate and have the ActualWidth/ActualHeight of your Button control match unless the Button has no chrome.

If you want your buttons to look consistently-sized, I'd recommend setting MinWidth (as opposed to Width) to a number that you would expect to work for most of your buttons. That way, should you decide to localize your application, you'll allow for longer translations to fit inside the buttons.

Note: I believe the styles for buttons and other controls on Windows Phone and Windows Store apps are, by default, optimized for touch, so the controls will be slightly larger than you expect them to be. I don't know if this is coming into play right now because your question is incomplete. Please include some 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>

Button DataTemplate width too large

1 Answers