WPF Line of Business Application XAML Layouts Presentation

1. Don Burnett
http://blog.donburnett.com
http://www.uxmagic.com
Microsoft Expression M.V.P. 2008-2009

3.  Panels
 Advanced Panels
 Transformations
 Layout Engine

5.  Panels In WPF
 Canvas
 StackPanel
 WrapPanel
 DockPanel
 Grid
 Columns and Rows
 Star Sizing
 Properties That Affect Layout
 Properties That Relate to Layout
 Demo: Panels

6.  Panels are responsible for layout
 Framework panels:
 Canvas
 StackPanel
 WrapPanel
 DockPanel
 Grid

7. Top, Left Top, Right
Y
X
Absolute
Positioning
Bottom, Left Bottom, Right

8.  The Canvas panel enables absolute position, and
it is the closest panel to the layout available in
traditional Windows Forms applications. Objects
placed within the Canvas are not
clipped, therefore, if you arranged a Button on a
Canvas with a Height and Width of zero, the
Button will still be visible, relative to the top-left
corner of the Canvas.
 Position by using attached properties:
 Canvas.Left
 Canvas.Top
 Canvas.Bottom
 Canvas.Right

9.  Stacks child elements together
 Orientation:
 Vertical
 Horizontal

10.  The StackPanel layout panel stacks child elements
together. The Orientation property determines the
direction in which elements are stacked. Setting
Orientation property to Vertical, the default, stacks
elements on top of one another; the width of the
panel becomes infinite. Setting the Orientation
property to Horizontal stacks elements next to one
another; the height of the panel becomes infinite.

11.  Stacks child elements together
 When the bounds of the panel are exceeded child
elements are wrapped
 Orientation:
 Horizontal
 Vertical

12.  The WrapPanel layout panel stacks child elements
together, similar to the StackPanel, but once the
bounds of the panel have been reached the child
elements within the panel are wrapped.
 The Orientation property determines the direction
in which elements are stacked. Setting the
Orientation property to Horizontal, the
default, stacks elements next to one another and
the panel wraps under the existing elements.
 Setting the Orientation property to Vertical stacks
elements on top of one another; the panel wraps
child elements next to one another.

13. Top
Left Right
Bottom
LastChildFill

14.  The DockPanel layout panel that stack (MP
replace “that stack” with” stacks”) child
elements either horizontally or
vertically, relative to each other based on
the Dock attached property, (MP replace
“,” with “;”) possible values are Left (the
default), Right, Top, and Bottom.
 The LastChildFill boolean property
specifies if the (MP remove “if the”)
whether the last child element within the
panel stretches to fill the remaining
available space.

15. Column = 0 Column = 1 Column = 2
Row = 0
Row = 0
Column = 0
Row = 1 RowSpan = 3
Row = 0
Column = 2
Row = 2
Row = 3
Row = 3 Column = 0
ColumnSpan = 2

16.  Grid rows are defined by:
 RowDefinition objects
 Grid columns are defined by:
 ColumnDefinition objects
 Use GridLength values to represent:
 Height of a row
<Grid>
 Width of a column <Grid.RowDefinitions>
<RowDefinition Height='100' />
<RowDefinition Height=‘Auto'/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width='50' />
<ColumnDefinition Width='100'/>
<ColumnDefinition Width=‘*‘/>
</Grid.ColumnDefinitions>
</Grid>

17.  Star sizing is used to express proportional values
 Star values can be weighted, for example:

18.  Star sizing is used to express values as a weighted
proportion of available space.
 The first example breaks the columns into the ratio of
50 percent for the first column and 25 percent for the
remaining columns. The second example uses a fixed
size of 300 for the last column, the first column then
has 25 percent of the remaining space, after the 300
has been allocated to the last column; and then the
middle column takes up the remaining space.
 Star sizing is very flexible and enables many different
grid configurations.

19.  HorizontalAlignment- Specifies how an element should be aligned from side to side.
 VerticalAlignment- Specifies how an element should be aligned from top to bottom.
 Margin- Specifies distance between content of a control and it’s margins or border.
 Padding- Amount of space between the content of a Control and it’s margin or border.
Margin between an
element and any
other child elements
Text box
Padding around
element

20.  ClipToBounds. True for clipping its children.
 Clip. Geometry used to define the outline of the contents of an
element.
 Visibility:
Collapsed – layout will ignore
Hidden – not visible but still affects layout
Panel (Canvas) area
Text box Canvas.ClipToBounds = False
Text Canvas.ClipToBounds = True

22.  VirtualizingPanel
 Custom Panels

23.  A virtualized panel displays the UI elements that
are visible.
 You often have more child elements than are
actually visible. Virtualization optimizes UI creation
by creating child elements when they are visible.

24.  Abstract class that enables UI virtualization
 Does not enable data virtualization
 VirtualizingStackPanel
 ListBox
VirtualizingPanel is an abstract class that provides the
foundation for building panels that need to virtualize
their child elements. The VirtualizingPanel enables UI
virtualization, but not data virtualization. WPF provides
one VirtualizingPanel implementation, the
VirtualizingStackPanel. The VistualizingStackPanel is
the default items host for the ListBox control.

26.  Transforms In WPF
 Render Transforms
 Layout Transforms
 Demo: Transforms

27.  Framework Transforms:
 ScaleTransform
 TranslateTransform
 SkewTransform
 RotateTransform
 TransformGroup Before Transform
Scale Translate Skew Rotate
Scale
Translate
After Transform

28.  All UIElements have a RenderTransform property
 Transforms applied to RenderTransform do not
affect layout
Before Transform
Button 1 Button 2 Button 3
Rotate Rotate Rotate
After Transform

29.  All FrameworkElements have a LayoutTransform
property
 Transforms applied to the LayoutTransform
property affect layout
Before Transform
Button 1 Button 2 Button 3
Rotate Rotate Rotate
After Transform

30. • ScaleTransform
• TranslateTransform
• SkewTransform
• RotateTransform

31.  “Layout” is the sizing and positioning of visual
elements within a user interface
 Layout Elements (Panels):
 Maintains a collection of child elements
 Are responsible for sizing child elements
 Are responsible for positioning child elements

32. 1. Inherit from Panel (or anything else)
2. Implement MeasureOverride
• Call Measure on each child
3. Implement ArrangeOverride
• Call Arrange on each child

33. public class CustomPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
...
}
}
protected override Size ArrangeOverride(Size finalSize)
{
foreach (UIElement child in InternalChildren)
{
child.Arrange(...);
...
}
}
}

34.  There are usually two reasons to create a custom panel:
• Performance
• Algorithmic Layout
 Creating a new panel for performances reasons is a rare occurrence; but, for
example the UniformGrid was created for performance reasons.
 Algorithmic layout means a layout that is based on a algorithm as opposed
to positional layout; for example, child elements positioned along a circular
path.
 To write a custom Panel inherit from Panel. WPF has a two phase model for
layout, a measure and a arrange phase; the MeasureOverride and
ArrangeOverride methods must be implemented. It is very important that in
each phase you call the appropriate Measure and Arrange methods on each
child; or it is very likely WPF will not render the child element.
 A great example of custom panels can be found in “Kevin’s Bag-o-Tricks” by
Kevin Moore : http://j832.com/bagotricks/

35. Don Burnett
http://blog.donburnett.com
http://www.uxmagic.com
Microsoft Expression M.V.P. 2008-2009