1 / 47

Windows Presentation Foundation Layout with Panels

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.

yair
Download Presentation

Windows Presentation Foundation Layout with Panels

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 x:Static 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. Grid’s 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.

More Related