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.