Your application layout is one of the first things you have to plan before starting the actual development. In this basic tutorial, I will show you how to design a basic layout for your applications using the Grid control.

First of all, we will need to create a new WPF Application project. To do so, fire up Visual Studio and select File > New > Project... Choose WPF Application and click OK. Once your project has been created, we will change the size of our application window so we can better see our progress as shown in the following code snippet:

<Window x:Class="WPFBasicLayout.Window1"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="WPF Basic Layout" Height="350" Width="500">     <Grid>

     </Grid> </Window>

Notice that Visual Studio automatically places a Grid control for us. The Grid is the most complex layout control and probably the one we will use the most. Our next task is to declare columns and rows definitions inside our Grid. The idea is to have four parts in our application: the header, the footer, a sidebar and the main content.

<Grid.ColumnDefinitions>     <ColumnDefinition />     <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>     <RowDefinition />     <RowDefinition />     <RowDefinition /> </Grid.RowDefinitions>

So far, our window should look like this in the Visual Studio designer:

To keep this tutorial simple, we will use Border and Label controls as the content of the four parts of our application. We will add one Border and a Label for each part of our application. Notice how we place them in the row and column we want using Grid.Row and Grid.Column properties respectively:

<Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" BorderBrush="LightBlue" BorderThickness="2,2,2,2" CornerRadius="10,10,10,10" Margin="05,05,05,05">     <Label FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center">Header</Label> </Border> <Border Grid.Column="0" Grid.Row="1" BorderBrush="LightBlue" BorderThickness="2,2,2,2" CornerRadius="10,10,10,10" Margin="05,05,05,05">     <Label FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center">Sidebar</Label> </Border> <Border Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" BorderBrush="LightBlue" BorderThickness="2,2,2,2" CornerRadius="10,10,10,10" Margin="05,05,05,05">     <Label FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center">Footer</Label> </Border> <Border Grid.Column="1" Grid.Row="1" BorderBrush="LightBlue" BorderThickness="2,2,2,2" CornerRadius="10,10,10,10" Margin="05,05,05,05">     <Label FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center">Main Content</Label> </Border>

Notice also the Grid.ColumnSpan property. That means that that specific column will take two columns, beginning from the one it was placed. This happens with the header and the footer because we want then to take all the width they have available.

In future posts, I will show you how to move those repeated properties into Styles for cleaner code.

Our application is getting the look we are looking for, but as you can see we got some problems: the header and the footer are too big and the sidebar and the main content are taking the same space. What we want is a smaller header and footer and a thinner sidebar, so the room left is taken by the main content. In order to get the desired effect, we need to add Width and Height properties to some of the ColumnDefinition and RowDefinition elements respectively. We will set those properties to Auto for the the first column and for the first and third row. That way, the header, the footer and the sidebar will resize accordingly based on the size of their content. All the room left will be available for the main content.

<Grid.ColumnDefinitions>     <ColumnDefinition Width="Auto"/>     <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>     <RowDefinition Height="Auto"/>     <RowDefinition />     <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

Now it is time to run our application and check the final result. As you can see, the layout is pretty basic but quite common and useful. Notice how the different parts of our application are resized accordingly when the application is resized or maximized.

Now that you have this basic layout set up, it is up to you to add controls, images and text to improve the results.