29.11.08

When to use specific WPF layouts

1. Grid- Does what it says on the tin. Provides row/column layout. Most versatile. Layout of choice for WPF window. Sizing supported via 3 strategies:
a) Absolute size - allows exact sizing via device-independent units. Inflexible and does not support changing content size, changing container size or localization.

b) Proportional size - Space divided between a group of rows and columns

<ColumnDefinition Width="*"></ColumnDefinition>

This syntax is very similar to frames

c) Automatic size - A versatile sizing mode; Row/Column allocated exact space it needs and no more.

<ColumnDefinition Width="Auto"></ColumnDefinition>

Mixing Grid Sizing Strategies
When mixing proportional sizing with other sizing modes, the proportionally sized rows or columns get the remaining space.

<strong>Assigning weights</strong>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>

Means make the height of the row above twice the height of the row below

2. Canvas
Allows the positioning of elements and controls using precise coordinates. This is ideal for a drawing application, but a sub-optimal solution for rich dynamic GUIs. The layout is fairly lightweight because it does not include complex layout for position and sizing controls and elements. It is essentially the WYSIWYG of the WPF layout world.

Example of a canvas layout:
<Canvas>
<TextBox Canvas.Left="100" Canvas.Top="50"> Is positioned at (100,50)</TextBox>
</Canvas>

3. InkCanvas - the main aim of this layout is for stylus input. Think tablet PCs and mouse interactivity. Users can annotate content using strokes.

4. UniformGrid - a highly constrained and inflexible layout system. It does not support predefined columns and rows. The Rows and Columns are defined as attributes on the UniformGrid element. Cells are allocated the same size. Elements are rendered in the grid based on the order in which they are defined.

<UniformGrid Rows="2" Columns="2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<UniformGrid>

This layout could be useful in a board game for example Nsolo.

No comments: