Learning WPF: Layouts

The Grid layout

Using grids allows you to section off the window into separate parts, this is done through rows and columns. The syntax used for this is shown below, it is written in a similar syntax to HTML - you simply add a Grid element to the XAML file:

<Grid>
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
                <RowDefinition Width="*" />
        </Grid.RowDefinitions>
</Grid>

The columns and rows created require a width style to be added to each definition, using “*” creates an even distribution of the rows and columns. But individual values can be added to this, using values would be viewed as a percentage, therefore the total number of row or column values would have to equal 100.

The StackPanel layout

StackPanel is a way of laying out a group of items, such as buttons. This stacks the buttons by default in a column layout but this can be altered using the Orientation style and setting it to horizontal. The StackPanel element is used to represent this in XAML.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <Button Content="Button 1"/>
</StackPanel>

A stack panel can be added to a grid section by choosing the grid row and the grid column.

<StackPanel Grid.Row="1" Grid.Column="2">
    <Button Content="Button 1"/>
</StackPanel>

The DockPanel layout

A dock panel is used to arrange the layout of child elements relative to each other. These are positioned at the top, bottom, right and left of the window and another child element can be added to fill any remaining space, and this is stated when the DockPanel element is created.

<DockPanel LastChildFill="True">
    <Button Content="Dock=Top" DockPanel.Dock="Top"/>
    <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
    <Button Content="Dock=Left" DockPanel.Dock="Left"/>
    <Button Content="Dock=Right" DockPanel.Dock="Right"/>
    <Button Content="LastChildFill=True"/>
</DockPanel>

The Image control

Images can be added to the window using an Image element and stating the source of the image, whether this is online or from a folder on your computer. I have used images stored on my computer for this example, to use an online image simply paste the image URL to the Source instead of the file path. I added my images to a stack panel and then incorporated them into a grid row and column section.

<StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Orientation="Horizontal">
     <Image Source="/Images/Pop-2-icon.png" Margin="10" Height="70"/>
     <RadioButton Content="Pop" VerticalAlignment="Center" GroupName="MusicGenre"/>
</StackPanel>

Just to add to this section, I used a RadioButton control to identify the image and make it somewhat interactive for my learning. But previously I noted that the radio buttons did not need to be grouped, possibly because they were not separated with grids, etc. In this example I used 3 images in 3 separate columns, each radio button was working individually, meaning all buttons could be checked at the same time. Therefore when creating radio buttons you want to have grouped, but are separated into different grid sections, you would need to add a group name to each of the buttons you want in the group so only one can be checked at a time.

Styles

Styles are simple to use in WPF and very similar to HTML. To use a style on an element you would just state the style type use = to assign the value and place the value in “ ” , for example Background=”Blue”. Many style types can be used such as width, height, font styles/sizes, colours, margins, etc.