September 05, 2006

WPF - Layout

Layout elements can be used to build an adaptable user interface like –

  • flow-style layout, where content flows left to right and then onto the start of the next line

  • a grid layout, which enables table-like layouts, where contents can resize automatically or proportionally. You can nest layout elements to produce complex layouts and write new element types if the built-in types are not suitable

Example:

<Page x:Class="TestXBAP.Page1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Page1"

>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="5*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.Column="1"

Grid.ColumnSpan="3"

Background="Honeydew" FontSize="18pt"

TextAlignment="Center" Foreground="Red">

iKnown

</TextBlock>

<ListBox Grid.Row="1">

<ListBoxItem>WPF</ListBoxItem>

<ListBoxItem>WCF</ListBoxItem>

<ListBoxItem>WF</ListBoxItem>

<ListBoxItem>InfoCard</ListBoxItem>

</ListBox>

<TextBlock Grid.Row="1" Grid.Column="1"

>This is Text Block with some text

</TextBlock>

<TextBlock Grid.ColumnSpan="2" Text="Copyright 2006" TextAlignment="Center" VerticalAlignment="Bottom" Grid.Row="1" />

</Grid>

</Page>