Question

I currently have a grid with 4 columns and 2 rows.
Inside each cell of this grid is a custom button (made out of a canvas, rectangle and a textblock grouped into a button control with blend 4).

So basicaly this grid has 8 custom buttons that are all alike in size but just differ from text content.

Problem:

When i enlarge my screen the grid and the cells grow with the window size correctly.
The position of the buttons also size correctly. But the size of the buttons never changes.

How to modify the grid/button so the buttons actually grow in size when the screen gets larger?
All settings like width and height are set to auto.

Example of some code of the grid:

 <Grid x:Name="gridSubCategories" Margin="15,125,15,50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Button x:Name="btnTestOne" Content="TestOne" Margin="9.426,29.05,9.425,29.05" Style="{DynamicResource ButtonStyleTestOne}" 
                Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="Stretch"/>

Best regards.

Answer 1

Add a Viewbox as a parent of the button

Defines a content decorator that can stretch and scale a single child to fill the available space.

<Viewbox>
  Child
</Viewbox>

http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx