By Sujith Chandana

Layout with Panels

Layout is a critical component of an application’s usability on a wide range of devices, but without good platform support it can be extremely hard to get right. Arranging the pieces of your user interface simply with static pixel-based coordinates and static pixel-based sizes can work in limited environments, but these types of interfaces start to crumble under the influence of many varying factors: different screen resolutions and dimensions, user settings such as font sizes, or content that changes in unpredictable ways.

When using Layouts, applications (or dialogs) that don’t allow resizing are invariably too small. Some applications stretch out to fill the space, but their content doesn’t scale as you might like it to. HTML has features for flexible layout, it’s often hard to use them and still get the exact look that designers insist upon. WPF contains built-in panels that can make it easy to avoid layout pitfalls.

Ex:

The Windows Calculator is small and doesn’t resize.

Following panels are five main built-in panels, all in the System.Windows.Controls namespace, in increasing order of complexity.

• Canvas

• StackPanel

• WrapPanel

• DockPanel

• Grid

Canvas

Canvas is the most basic panel. So basic, in fact, that you probably should never bother using it for arranging typical user interfaces. Canvas only supports the “classic” notion of positioning elements with explicit coordinates, although at least those coordinates are device-independent pixels, unlike older UI systems. You can position elements in a Canvas using its attached properties: Left, Top, Right, and Bottom.

Ex:

<Window x:Class="WPF_6.Window1"

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

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

    Title="Buttons in a Canvas" Height="229" Width="255">

    <Canvas>

    <Button Background="Red">Left=0, Top=0</Button>

    <Button Canvas.Left="18" Canvas.Top="18"   

Background="Orange">Left=18, Top=18</Button>

    <Button Canvas.Right="18" Canvas.Bottom="18" Background="Yellow">Right=18, Bottom=18</Button>

    <Button Canvas.Right="0" Canvas.Bottom="0" Background="Lime">Right=0, Bottom=0</Button>

    <Button Canvas.Right="0" Canvas.Top="0" Background="Aqua">Right=0, Top=0</Button>

    <Button Canvas.Left="0" Canvas.Bottom="0" Background="Magenta">Left=0, Bottom=0</Button>

    </Canvas>

</Window>

 Check the window for minimize and maximize states.

If you try to set Canvas.Left and Canvas.Right simultaneously, Canvas.Right gets ignored. And if you try to set Canvas.Top and Canvas.Bottom simultaneously, Canvas.Bottom gets ignored. Therefore, you can’t dock an element to more than one corner of the Canvas at a time.

Although Canvas is too primitive a panel for creating flexible user interfaces, it is the most lightweight panel. So, you should keep it in mind for maximum performance when you really do need precise control over the placement of elements.

 StackPanel

StackPanel is a popular panel because of its simplicity and usefulness. As its name suggests, it simply stacks its children sequentially. It has no attached properties for arranging children; you just have one way to customize the behavior of StackPanel setting its Orientation property (of type System.Windows.Controls.Orientation) to Horizontal or Vertical.

Following example shows simple Buttons, with no properties set other than Background and Content, in two StackPanels with only their Orientation set.

Ex:

<StackPanel Orientation="Horizontal" >

                <Button Background="Red" >1</Button>

                <Button Background="Orange">2</Button>

                <Button Background="Yellow">3</Button>

                <Button Background="Lime">4</Button>

                <Button Background="Aqua">5</Button>

                <Button Background="Magenta">6</Button>

</StackPanel>

Following properties are Child Layout Properties in StackPanel

• Margin

• HorizontalAlignment and VerticalAlignment

• LayoutTransform

The code bellow is an example for LayoutTransform property.

<Button Background="Orange" >70 deg.                                                                       

    <Button.LayoutTransform>                                                                     

    <RotateTransform Angle="70"/>

    </Button.LayoutTransform>

 </Button>

WrapPanel

WrapPanel is similar to StackPanel. But in addition to stacking its child elements, it wraps them to additional rows or columns when there’s not enough space for a single stack. This is useful for displaying an indeterminate number of items with a more interesting layout than a simple list, much like Windows Explorer does.

WrapPanel also has no attached properties for controlling element positions. It defines three properties for controlling its behavior. Those are Orientation, ItemHeight and ItemWidth.

Ex:

<WrapPanel>

    <Button Background="Red" >1</Button>

    <Button Background="Orange" >70 deg.

    <Button.LayoutTransform>

    <RotateTransform Angle="70"/>

    </Button.LayoutTransform>

    </Button>

    <Button Background="Yellow">3</Button>

    <Button Background="Lime">4</Button>

    <Button Background="Aqua">5</Button>

    <Button Background="Magenta">6</Button>

    </WrapPanel>

 

When FlowDirection is set to RightToLeft, wrapping occurs right to left for a WrapPanel with Vertical Orientation, and stacking occurs right to left for a WrapPanel with Horizontal Orientation. Above StackPanel’s child layout properties are use here also.

DockPanel

This is not like a canvas; this enables easy docking of elements to an entire side of the panel, stretching it to fill the entire width or height. It also enables a single element to fill all the remaining space unused by the docked elements. To control the children DockPanel has a property called Dock.

Ex:

<DockPanel>

    <Button DockPanel.Dock="Top" Background="Red">1 (Top)</Button>

    <Button DockPanel.Dock="Left" Background="Orange">2 (Left)</Button>

    <Button DockPanel.Dock="Right" Background="Yellow">3 (Right)</Button>

    <Button DockPanel.Dock="Bottom" Background="Lime">4 (Bottom)</Button>

    <Button Background="Aqua">5</Button>

    </DockPanel>

DockPanel is useful for arranging your top-level UI in a Window or Page, where most docked elements are actually other panels containing the real meat. For example, applications typically dock a Menu on top, perhaps a panel on the side, a StatusBar on the bottom, and then fill the remaining space with the main content.

Grid

Most often uses Grid as a flexible panel that enables you to arrange its children in a multirow and multicolumn fashion without relying on wrapping (like WrapPanel), and provides a number of features to control the rows and columns in interesting ways. Working with Grid is a lot like working with a Table in HTML.

For an example Grid can use for following interactive page:

<Grid Background="LightBlue">

    <!-- Define four rows: -->

    <Grid.RowDefinitions>

    <RowDefinition/>

    <RowDefinition/>

    <RowDefinition/>

    <RowDefinition/>

    </Grid.RowDefinitions>

    <!-- Define two columns: -->

    <Grid.ColumnDefinitions>

    <ColumnDefinition/>

    <ColumnDefinition/>

    </Grid.ColumnDefinitions>

    <!-- Arrange the children: -->

    <Label Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White"

HorizontalContentAlignment="Center">Start Page</Label>

    <GroupBox Grid.Row="1" Grid.Column="0" Background="White"

Header="Recent Projects">…</GroupBox>

    <GroupBox Grid.Row="2" Grid.Column="0" Background="White"

Header="Getting Started">…</GroupBox>

    <GroupBox Grid.Row="3" Grid.Column="0" Background="White"

Header="Headlines">…</GroupBox>

    <GroupBox Grid.Row="1" Grid.Column="1" Background="White"

Header="Online Articles">

    <ListBox>

    <ListBoxItem>Article #1</ListBoxItem>

    <ListBoxItem>Article #2</ListBoxItem>

    <ListBoxItem>Article #3</ListBoxItem>

    <ListBoxItem>Article #4</ListBoxItem>

    </ListBox>

    </GroupBox>

    </Grid>

 Reference Book:

Sams Windows Presentation Foundation Unleashed