Windows Presentation
Foundation
Layout with Panels
By Kester Marrain
Chapter Overview







Canvas
StackPanel
WrapPanel
DockPanel
Grid
Primitive Panels
Handling Content Overflow
Examples of Bad Layout
CANVAS



The canvas is the most basic panel.
Canvas only supports the “classic”
notion of positioning elements with
explicit coordinates (coordinates are
device independent pixels).
Canvas also enables you to specify
coordinates relative to any corner of it.
Canvas - continued


Elements can be positioned by using a
canvas’ attached properties: Left, Top,
Right, Bottom and ZIndex. In essence,
choosing the corner in which to “dock”
each element and attached properties
serve as margins.
Elements cannot use more than two of
the canvas’ attached properties.
Canvas - Continued
Canvas - Continued
Canvas - continued
Stack Panel


Stack panels do not define their own
attached properties.
There is only one way to customize the
behavior of StackPanel – setting its
orientation property to Horizontal or
Vertical (Vertical is the default).
Stack Panel - continued
Stack Panel - continued

When FlowDirection is set to
RightToLeft, stacking occurs right to left
for a stack panel with a horizontal
orientation.
Stack Panel - continued
Stack Panel - continued
Wrap Panel - continued


Similar to StackPanel but in addition to
stacking, it wraps its child elements to
additional rows and columns when there
is not enough space for a single stack.
Like a stack panel the wrap panel has no
attached properties for controlling
element positions.
Wrap Panel - continued

Defines three properties for controlling
its elements behavior:
• Orientation – Just like stack panel with default
•
•
of horizontal.
ItemHeight - A uniform height for all child
elements.
ItemWidth – A uniform width for all child
elements.
Wrap Panel - continued

You can force wrap panels to arrange
elements in a single row or column by
setting its Width for Horizontal and
Height for Vertical to Double.MaxValue
or Double.PositiveInfinity. In XAML this
must be done using the x:Static markup
extension.
Wrap Panel - continued
Wrap Panel - continued
Dock Panel



Dock Panel enables easy docking of elements
to an entire side of a panel, stretching it to fill
the entire width or height.
It also enables a single element to fill the
remaining space unused by the docked
element.
Dock Panel has a Dock attached property, so
children can control their docking with one of
four properties: Left, Right, Top, Bottom.
Dock Panel – continued
Dock Panel - continued
Dock Panel - continued
Grid




Grid is the most versatile panel.
Enables arrangement of children in a
multi-row or multi-column fashion.
Has Row, RowSpan, Column and
ColumnSpan attached properties.
Grid cells can be left empty and multiple
elements can appear in the same Grid
cell.
Grid - continued
Grid - continued
Grid – Sizing the Rows and
Columns


RowDefinition and ColumnDefinition properties
do not default to Auto. They are of type
System.Windows.GridLength rather than
double.
Grid supports three different types of
RowDefinition and ColumnDefinition sizing:
•
•
•
Absolute Sizing
Auto Sizing
Proportional Sizing
Grid – Sizing the Rows and
Columns - continued
Grid – Converter, Splitters, and
More




System.Windows.GridLengthConverter is the
type converter that converts strings to
GridLength structures.
Interactive sizing of rows and columns is
accomplished using a GridSplitter.
Any number of GridSplitter can be added to a
Grid.
The GridSplitter attached properties are
Grid.Row, Grid.Column, Grid.RowSpan,
GridColumnSpan, ResizeDirection,
ResizeBehavior and SharedSizeGroup.
Grid – Converter, Splitters, and
More - continued



The best way to use GridSplitter is to place it in
its own autosized row or column. To avoid
overlapping the existing content in the adjacent
cells.
If it is in a cell with other content it should be
added last so it has the topmost Z order.
The GridSplitter must be given an explicit width
or height to be seen.
Grid – Converter, Splitters, and
More - continued
Grid – Converter, Splitters, and
More - continued
Grid – Converter, Splitters, and
More - continued
Grid – Converter, Splitters, and
More - continued
Comparing Grid to other Panels



A single row and single column Grid with
HorizontalAlignment and VerticalAlignment of
all children to values other than stretch Grid
functions like a Canvas.
A single column Grid with autosized rows looks
like a vertical stack panel.
Using RowSpan and ColumnSpan a Grid is
emulate a dock panel.
Grid’s Interaction with Child
Layout Properties
Primitive Panels



Exist in the
System.Windows.Controls.Primitives
namespace except for ToolBarTray.
TabPanel default style for TabControl
and can be thought of as a lightweight
Wrap Panel.
ToolBarOverflowPanel default style of
ToolBar and also similar to Wrap Panel.
Primitive Panels - continued


ToolBarTray only supports ToolBar
children and arranges ToolBar
sequentially horizontally.
UniformGrid simplified Grid where all
rows and columns are of size *.
Handling Content Overflow

Can be done using one of the following
strategies:
• Clipping
• Scrolling
• Scaling
• Wrapping
• Trimming
Handling Content Overflow Clipping



Clipping (truncating or cropping) is the default
way that panels handle content that is to large.
All UIElements have a Boolean ClipToBounds
property that controls whether a child element
can be rendered outside of its bounds.
Clipping occurs before RenderTransforms are
applied.
Handling Content Overflow Scrolling


To accomplish scrolling simply wrap an
element in a
System.Windows.Controls.ScrollViewer.
ScrollViewer uses the ScrollBar control
and hooks it up to the content
automatically.
Handling Content Overflow Scrolling
Handling Content Overflow Scrolling

VirtualizingStackPanel acts like a Stack
Panel, but it temporarily discards any
items off-screen to optimize performance
(only when data binding).
Handling Content Overflow Scaling




The Viewbox control provides an easy
mechanism to scale arbitrary content
within a given space.
Viewbox is a type of Decorator and only
has one child element.
By default Viewbox stretches in both
dimensions to fill space given to it.
Viewbox removes all wrapping.
Handling Content Overflow Scaling

The StretchDirection property of Viewbox controls
whether content should be shrunk, enlarged or both.
•
•
•

UpOnly
DownOnly
Both
Viewbox has a stretch property to control how its single
child gets scaled within its bounds. The property is an
enumeration consisting of:
•
•
•
•
None
Fill
Uniform (Default)
UniformToFill
Handling Content Overflow Scaling
Handling Content Overflow Scaling
Reference

Sams Windows Presentation Foundation
Unleashed WPF by Adam Nathan.