• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WPF Line of Business Application XAML Layouts Presentation
 

WPF Line of Business Application XAML Layouts Presentation

on

  • 7,915 views

WPF Line of Business Application XAML Layouts Presentation

WPF Line of Business Application XAML Layouts Presentation

Statistics

Views

Total Views
7,915
Views on SlideShare
7,670
Embed Views
245

Actions

Likes
2
Downloads
5
Comments
0

5 Embeds 245

http://www.uxmagic.com 185
http://www.slideshare.net 41
http://uxmagic.com 11
http://blog.donburnett.com 6
http://www.linkedin.com 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Panels are responsible for the layout of a collection of UIElement-derived children. When the Measure method is called on a panel, it must measure all its children. When the Arrange method is called on a panel, it then must arrange its children.
  • The Grid layout panel positions child elements within rows and columns. By default there is only a single row and column in to which all elements are placed.Each child element is positioned within the grid by using attached properties:Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpan
  • The Grid layout panel has two collections for managing rows and columns: RowDefinitions and ColumnsDefinitions respectively. The RowDefinitions collection is populated by using RowDefinition objects and theColumnsDefinitions collection is populated by using ColumnDefinition objects.The RowDefinition class defines a Height property of type GridLength and ColumnDefinition defines a Width property also of type GridLength. Combining these property values creates the layout for the grid. The GridLength class enable values beyond simple numbers to be assigned to the height and widths of rows and columns, values such as “Auto” and “*” can also be applied.Auto. The size is determined by the content.*. Uses all the available space to the panel, and is also used with “Star Sizing”, covered in the next topic.
  • Transforms can be used throughout WPF to effect the size, shape and position of elements. A transform defines how to map points from one position to another position by using a transformation matrix. Applying the transformation matrix to certain values, depending on the transformation required, on a target object delivers the rotation, skew, scale, and move transformation effects. All transforms in WPF are affine transforms. An affine transform is a mathematical transformation that preserves parallel lines. All 2D transforms derive from System.Windows.Media.Transform class.ScaleTransform. Scales an object in the 2-D x-y coordinate system.TranslateTransform. Translates (moves) an object in the 2-D x-y coordinate system.SkewTransform. Skews an object in 2-D space.RotateTransform. Rotates an object clockwise about a specified point in a 2-D x-y coordinate system.TransformGroup. Transforms can be combined using a TransformGroup object.
  • Any RenderTransform is applied immediately before rendering, therefore only having an impact on the rendering, as opposed to have an impact on layout.
  • Any LayoutTransform is applied before layout, therefore affecting the layout of the FrameworkElement. Translate transforms are ignored in LayoutTransform.
  • You can use the sample XAML file \\Module 03\\Demos\\Transforms\\TransformTypesExample.xaml to help with the demonstration.Show the impact of applying the transforms to the following properties:RenderTransformLayoutTransformYou can use the sample XAML file \\Module 03\\Demos\\Transforms\\TransformsExample.xaml to help with the demonstration.
  • WPF contains several layout elements: Canvas, StackPanel, DockPanel, Grid, etc.
  • There are usually two reasons to create a custom panel: Performance Algorithmic LayoutCreating 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”, a whole host of WPF custom feature implementations, including panels, a great tool for learning how WPF works and how to extend it: http://j832.com/bagotricks/

WPF Line of Business Application XAML Layouts Presentation WPF Line of Business Application XAML Layouts Presentation Presentation Transcript

  • Don Burnett http://blog.donburnett.com http://www.uxmagic.com Microsoft Expression M.V.P. 2008-2009
  •  Panels  Advanced Panels  Transformations  Layout Engine
  •  Panels In WPF  Canvas  StackPanel  WrapPanel  DockPanel  Grid  Columns and Rows  Star Sizing  Properties That Affect Layout  Properties That Relate to Layout  Demo: Panels
  •  Panels are responsible for layout  Framework panels:  Canvas  StackPanel  WrapPanel  DockPanel  Grid
  • Top, Left Top, Right Y X Absolute Positioning Bottom, Left Bottom, Right
  •  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
  •  Stacks child elements together  Orientation:  Vertical  Horizontal
  •  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.
  •  Stacks child elements together  When the bounds of the panel are exceeded child elements are wrapped  Orientation:  Horizontal  Vertical
  •  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.
  • Top Left Right Bottom LastChildFill
  •  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.
  • 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
  •  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>
  •  Star sizing is used to express proportional values  Star values can be weighted, for example:
  •  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.
  •  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
  •  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
  •  VirtualizingPanel  Custom Panels
  •  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.
  •  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.
  •  Transforms In WPF  Render Transforms  Layout Transforms  Demo: Transforms
  •  Framework Transforms:  ScaleTransform  TranslateTransform  SkewTransform  RotateTransform  TransformGroup Before Transform Scale Translate Skew Rotate Scale Translate After Transform
  •  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
  •  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
  • • ScaleTransform • TranslateTransform • SkewTransform • RotateTransform
  •  “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
  • 1. Inherit from Panel (or anything else) 2. Implement MeasureOverride • Call Measure on each child 3. Implement ArrangeOverride • Call Arrange on each child
  • 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(...); ... } } }
  •  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/
  • Don Burnett http://blog.donburnett.com http://www.uxmagic.com Microsoft Expression M.V.P. 2008-2009