CODEWITHSUNDEEP
c#wpfxaml
Rakr
Rakr

Reputation: 125

Scale button inside grid

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.

Upvotes: 0

Views: 2560

Answers (2)

Save
Save

Reputation: 1423

Try to use HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" for buttons

Upvotes: 2

Julien
Julien

Reputation: 3529

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

Upvotes: 2

Related Questions