Lesson 03 Layouts in WPF

 Powerful and flexible array of tools for
controlling the layout of the user interface.
 Automate resizing, scaling, and adaptation to
localization
 WPF provides a set of panels to arrange the
elements they contain

Panel type Usage
StackPanel Lays children out in a vertical or horizontal stack; extremely
simple, useful for managing small-scale
aspects of layout.
WrapPanel Lays children out from left to right, moving onto a new line each
time it fills the available width.
DockPanel Allocates an entire edge of the panel area to each child; useful for
defining the rough layout of simple
applications at a coarse scale.
Grid Arranges children within a grid; useful for aligning items without
resorting to fixed sizes and positions.
The most powerful of the built-in panels.
Canvas Performs no layout logic—puts children where you tell it to;
allows you to take complete control of
the layout process.
UniformGrid Arranges children in a grid where every cell is the same size.

Arranges controls in a line, either horizontally or
vertically
 Note:
 Items are stretched to fit their contents (text) and
to fit the window.
 By default, items will not fill all the available space
(whitespace in screenshot).
 Layouts can be nested within one another.

<StackPanel Orientation="Horizontal">
<Button>Button1</Button>
<StackPanel Orientation="Vertical">
</StackPanel>
</StackPanel>

Arranges items in a line until the border is hit,
then wraps to the next line
 Note:
 Items are stretched to fit their contents (text).
 If an item cannot fit entirely in the allotted space,
the entire control is moved to the next line.

<WrapPanel Background="Beige">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
<Button>Five</Button>
<Button>Six</Button>
<Button>Seven</Button>
<Button>Eight</Button>
</WrapPanel>

Places controls in five different regions: top, bottom, left,
right, or center (fill).
 Note:
 Child elements tell the parent DockPanel where they
should be placed (DockPanel.Dock="Top").
 You can place more than one control in a region (Yellow 1
and Blue 2).
 If you do not specify a region, then the item will be set to
fill (default behavior).
 Items are stretched to fit their contents (text) and to fit the
region they are in.
 The size of any non-fill region is dictated by its contents
(Red 1 has a height specified so it is larger).

<DockPanel>
<Button DockPanel.Dock="Top">Top</Button>
<Button DockPanel.Dock="Bottom">Bottom</Button>
<Button DockPanel.Dock="Left">Left</Button>
<Button DockPanel.Dock="Right">Right</Button>
<Button>Fill</Button></DockPanel>

 Explicitly position controls based on
coordinates
 Note:
 Child elements tell the parent Canvas where they
should be placed (Canvas.Right="50").
 When no dimensions are specified, the labels are
stretched to fit their contents (text).
 Controls can be placed relative to any side of the
window (Blue 1 vs. Blue 2).
 Top overrides Bottom and Left overrides Right.

<Canvas Background="Yellow" Width="150" Height="100">
<TextBlock Canvas.Left="10" Canvas.Top="20">Hello</TextBlock>
<TextBlock Canvas.Right="10" Canvas.Bottom="20">world!</TextBlock>
</Canvas>

 Maintains a series of grid cells of equal size
 Note:
 Items are stretched to fit the cell.
 The total number of cells increases by square
integers

<UniformGridTextBlock.TextAlignment="Center">
<TextBlockText="X" />
<TextBlockText="O"/>
<TextBlockText="X"/>
</UniformGrid>

 Defines static columns and rows; like HTML
tables
 Note:
 Child elements tell the parent grid what cell they
should be in.
 Items are stretched to fill the cell.
 Each row or column can be given a specific size
(Height/Width).
 Cell contents can be told to span multiple rows
(RowSpan) or columns (ColumnSpan).

 Fixed: Fixed size of logical units (1/96 inch)
 new GridLength(100,GridUnitType.Pixel)
 Auto:Takes as much space as needed by the
contained control
 GridLength.Auto
 Star (*):Takes as much space as available
 new GridLength(1,GridUnitType.Star)

Lesson 03 Layouts in WPF

More Related Content

More from Quang Nguyễn Bá (20)

Recently uploaded (20)

Lesson 03 Layouts in WPF

Editor's Notes