In learning WPF I wanted to see how I could break down an app’s UI into discrete elements and implement the interface using the WPF Layout Controls. So let me start with the basic requirements of what I want to try and implement, the easiest way to do that is sketch it out.  

Thought process…In looking at the wireframe of the desired UI a couple of concepts come to mind. I’m not sure which is best so I’ll try both. 

Concept 1 – Using the Grid control with 3 Rows Columns defined

• Row 1 – will hold menu (span both cols)
• Row 2
  • Col 1 – holds a stack panel
    • Stack panel holds 3 expandable panels
  • Col 2 holds a main content area
• Row 3 – hold status bar (span both cols)

Concept 2 – Using DockPanel with Grid

• DockPanel with 3 items
  • Menu docked to top
  • status bar docked to bottom
  • Grid (1 row, 2 columns) to fill rest of area
    • Column 1 – holds stack panel
      • stack panel contains 3 expandable panels
    • Column 2 – holds main content area

Concept 1- The Grid Control

So lets try laying this out in XAML.  The first thing is to setup the grid definition by defining the rows and cols and their sizes.

<Window x:Class="BasicWPFLayoutSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="768" Width="1024">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200*" />
            <ColumnDefinition Width="804*" />
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

This sets up 3 rows for the menu, content and status bar areas and 2 columns to host the main controls on the 2nd row. Notice the ShowGridLines attribute is set to True.  This makes the grid regions visible when the app is run and is useful in laying out the structure.

You will notice there are 3 types of notation for setting height:

• Height=”30″:
• Absolute Sizing – does not grow or shrink as size changes
• Height=”*” :
• Proportional Sizing (star sizing) – Use all the remaining space and it grows and shrinks as the grid is resized
• <ColumnDefinition Width=”200*” /> <ColumnDefinition Width=”804*” /> :
• Multiple Column Proportional Sizing (star sizing) – Resize based on the ratio the 2nd col will be roughly 4 times the size of the first
• This is equivalent to <ColumnDefinition Width=”1*” /> <ColumnDefinition Width=”4*” />

For this layout we set the 1st and 3rd row to be of an absolute height of 30 as we don’t want the menu or status bar to grow or shrink as the window is resized. The 2nd row is set to * so it will use up the remaining space.  For the columns we want the 1st column to be roughly 1/4 the width of the 2nd column so we can set up the width attributes to be * and 4* respectively.  If you build and run it you will see the basic layout of the app taking shape. Now lets add some controls.

Add Some Controls

Adding controls is quite simple with the grid layout we have created.  You add the markup for the control you want to add and set its Grid.Column and Grid.Row attributes to tell it where you want it to reside in the grid.  Controls that span more than 1 row or column use Grid.ColumnSpan and Grid.RowSpan attributes to define how many it will span (default is 1). 

So based on our specifications lets add a menu( row 0 spaning 2 cols), a stack panel(row1, col1), a text box (row 1 col2), a grid splitter( row 1 between col 1 and col2), and a status bar (row 3, spaning 2 cols).  Whew thats a long description, as I am getting used to XAML markup it really is remarkable how verbose it is in describing the layout in markup.  Here’s the XAML:

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <!-- MENU -->
        <Menu Grid.ColumnSpan="2">MENU</Menu>
        <!-- LEFT PANEL-->
        <StackPanel Grid.Row="1" Margin="15"></StackPanel>
        <!--GRID SPLITTER -->        <GridSplitter Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Width="5" ></GridSplitter>        <!--RIGHT PANEL-->
        <TextBox Grid.Row="1" Grid.Column="2" Margin="15" BorderBrush="Black">Main Area</TextBox>
        <!--STATUS BAR-->
        <StatusBar Grid.Row="2" Grid.ColumnSpan="2" >Status</StatusBar>
    </Grid>

New Items

Grid.ColumnSpan=”2″ - defines how many columns the control will span staring from its Grid.Column value.  In this sample there are 2 columns so it spans the entire grid.

Margin=”#” – defines how much space to leave around a control. a single value such as 15 would create a margin of 15 for the left, top,right,bottom.

Margin=”#,#” – defines margin where 1st value is left and right and 2nd value is top and bottom

Margin=”#,#,#,#” – defines margin going clockwise around control starting with left 

GridSplitter - set which column and row it belongs to and set its horizontalalignment to place it on that edge of the grid cell and define its width

Pretty basic but not bad for day 1 of learning WPF.  In the next post I’ll add to this by building a menu structure, adding some expandable control boxes in the left StackPanel and creating some visual styles.