layout which allows controls to scale properly

Question

For my WPF project in C#, I have to create a menu state with a layout. Here is an image sample of how menu state should look like this.

So, my question is, which layouts should I use to make my components scalable when I resize the window and with components arranged like in prototype? I have used so far gridlayout, but I'm not sure if it is the way to go with components arranged like in prototype image.

score 3 · Accepted Answer · edited May 23 '17 at 11:54

Ideally for components that are stacked identical you use a stack panel resizing automatically depends on what the default behaviours for the panels are.

With that said horizontal stack panels auto expand only vertically and vertical stack panels expand horizontally.

Some sample code of it expanding horizontally.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <TextBlock Margin="5,0,5,60" HorizontalAlignment="Center">Title</TextBlock>
        <Button>State</Button>
        <Button>State</Button>
        <Button>State</Button>
        <Button>State</Button>
    </StackPanel>
</Window>

If you want for them to grow both ways the easiest way is to use a grid and set them to proportional sizes.

Note the text inside the component won't auto grow. If you need that you have to use a viewbox. How to grow/shrink a TextBlock (Font Size) to the available space in WPF?

Thanks for the tips Alfredo Alvarez! However, in a meantime, I figured out myself how to do this with grid. — Kapparino, Dec 14 '14 at 19:12

Kapparino · Answer 2 · 2014-12-19T18:38:44.183

I figured out myself how to do this. A trick is to use the properties for Horizontal and Vertical Alignment with value of Stretch and to not use width and height.

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

Example:

<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0">
        <Viewbox>
            <TextBlock>1</TextBlock>
        </Viewbox>
    </Button>
    <Label Grid.Row="0" Grid.Column="1">
        <Viewbox>
            <TextBlock>2</TextBlock>
        </Viewbox>
    </Label>
    <Button Grid.Row="0" Grid.Column="2">
        <Viewbox>
            <TextBlock>3</TextBlock>
        </Viewbox>
    </Button>
</Grid>

The width on you column definitions are proportional when you add the *. You can say * , 2* and * and get the same result. — Alfredo Alvarez, Dec 14 '14 at 20:27

layout which allows controls to scale properly

2 Answers2