Windows Presentation Foundation Layout with Panels

1
Windows Presentation FoundationLayout with Panels

• By Kester Marrain

2
Chapter Overview

• Canvas
• StackPanel
• WrapPanel
• DockPanel
• Grid
• Primitive Panels
• Handling Content Overflow

3
Examples of Bad Layout
4
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.

5
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.

6
Canvas - Continued
7
Canvas - Continued
8
Canvas - continued
9
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).

10
Stack Panel - continued
11
Stack Panel - continued

• When FlowDirection is set to RightToLeft,
  stacking occurs right to left for a stack panel
  with a horizontal orientation.

12
Stack Panel - continued
13
Stack Panel - continued
14
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.

15
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.

16
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 xStatic markup
  extension.

17
Wrap Panel - continued
18
Wrap Panel - continued
19
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.

20
Dock Panel continued
21
Dock Panel - continued
22
Dock Panel - continued
23
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.

24
Grid - continued
25
Grid - continued
26
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

27
Grid Sizing the Rows and Columns - continued
28
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.

29
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.

30
Grid Converter, Splitters, and More - continued
31
Grid Converter, Splitters, and More - continued
32
Grid Converter, Splitters, and More - continued
33
Grid Converter, Splitters, and More - continued
34
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.

35
Grids Interaction with Child Layout Properties
36
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.

37
Primitive Panels - continued

• ToolBarTray only supports ToolBar children and
  arranges ToolBar sequentially horizontally.
• UniformGrid simplified Grid where all rows and
  columns are of size .

38
Handling Content Overflow

• Can be done using one of the following
  strategies
• Clipping
• Scrolling
• Scaling
• Wrapping
• Trimming

39
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.

40
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.

41
Handling Content Overflow - Scrolling
42
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).

43
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.

44
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

45
Handling Content Overflow - Scaling
46
Handling Content Overflow - Scaling
47
Reference

• Sams Windows Presentation Foundation Unleashed
  WPF by Adam Nathan.