WPF ContentModel

With WPF we are far more flexible in creating UI solutions since now almost every control can contain other controls.

The classic example being ofcourse the button.
A button cannot just have a text on the surface of the button, it can just as easily have an image.

Example of button with text.

<Button Name="button1">Just text</Button>

Example of button with image.

<Button Name="button1">
 <Image Source="C:\Documents and Settings\Mark\Desktop\banner.jpg" Name="image1" Width="100"/>
</Button>

Now a lot of buttons will have an image and also some text.
With our HTML background we'll probably attempt:

<Button Name="button1">
 Just text<br/>
 <Image Source="C:\Documents and Settings\Mark\Desktop\banner.jpg" Name="image1" Width="100"/>
</Button>

Wrong! A button can contain controls, but has no 'knowledge' of how to produce a layout for multiple controls.
WPF has special controls that provide layout implementation. These are panels. There are four kinds of panels:
- DockPanel
- StackPanel
- Grid
- Canvas

The same is actually true of the Window control. A Window has no 'default' knowledge of layout. VS2005 will by
default add a 'Grid' control as the root panel.

A StackPanel is easiest to use. It will stack items either horizontally or vertically.
In our button example we would want to use the StackPanel as the child of our Button.

<Button Name="button1">
  <StackPanel Orientation="Vertical">
    <TextBlock>Just text</TextBlock>
    <Image Source="C:\Documents and Settings\Mark\Desktop\banner.jpg" Name="image1" Width="100"/>
  </StackPanel>
</Button>

Notice that we don't need the <BR> tag anymore.
The linefeed is really layout information and our StackPanel is in charge of layouting the content.
If however we have a lot of text, then we could put a newline within the TextBlock.

<Button Name="button1">
  <StackPanel Orientation="Vertical">
    <TextBlock>
      Just text
      <LineBreak/>
      The next line
    </TextBlock>
    <Image Source="C:\Documents and Settings\Mark\Desktop\banner.jpg" Name="image1" Width="100"/>
  </StackPanel>
</Button>

A Grid offers more options and acts much more like a table with rows and columns. I'll show a quick example:

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <TextBlock Grid.Column="0" Grid.Row="0">Top left</TextBlock>
  <TextBlock Grid.Column="1" Grid.Row="1">Middle</TextBlock>
  <TextBlock Grid.Column="2" Grid.Row="2">Bottom right</TextBlock>
  <Image Source="C:\Documents and Settings\Mark\Desktop\banner.jpg" Name="image1" 
      Width="50" Grid.Column="1" Grid.Row="0"/>
</Grid>

As you can see the content of an actual cell is not placed in the cell, but instead the content is listed below the column and row definitions. I must say that I'm still getting used to this notation.

The DockPanel allows you to dock content to a border of the window.
The Canvas panel performs no layout functionality, you're in charge of all layout matters. Much the way 'regular' WinForms let you do all the layouting.