Search code examples
xamlgridmarginsstretch

Windows 8.1 xaml stretch doesnt shrink button

I have a grid that has multiple rows and columns (shown below) and in each cell there is a button, much like a calculator. The buttons have the HorizontalAlignment and VerticalAlignment set to "Stretch"

However, due to different screen sizes and my need to maintain equal sizing of the widths and heights of the cells and controls in them, I have given the widths and the heights as *

I would expect that the buttons therefore fill the cell that they're in, but they don't fit. You can see this is the screenshot from the development environment. The first button shows where the border of the button is... They actually bust out of the side, and have a margin at the top and bottom of about 8 pixels.

The text in each button is a single digit so I know the size of the text can't be the issue and wondered if anyone had any ideas? I don't want to have to manually set margins for each button as this is not only time consuming, but if the application runs on a different sized screen, they might fit.

        <Grid Grid.Row="2" x:Name="ButtonsGrid" Margin="18,9,18,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Content="1"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="0" Grid.Column="1" Content="2" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="0" Grid.Column="2" Content="3" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="0" Grid.Column="3" Content="4" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <Button Grid.Row="1" Grid.Column="0" Content="5" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="1" Grid.Column="1" Content="6" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="1" Grid.Column="2" Content="7" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="1" Grid.Column="3" Content="8" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

        <Button Grid.Row="2" Grid.Column="0" Content="9" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="2" Grid.Column="1" Content="0" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Button Grid.Row="2" Grid.Column="2" Content="Clear" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.ColumnSpan="2" />
    </Grid>

Screen shot from development environment

Solution

  • The button has certain margins and paddings, this is why it can only shrink to a certain size.

    Your cell size is smaller than that, you can workaround this by editing the ControlTemplate of the button.