Layout in WPF
-
Upload
isabelle-ortiz -
Category
Documents
-
view
44 -
download
0
description
Transcript of Layout in WPF
Layout History.NET 1.0
Coordinate-based layout onlyAnchoring and Docking
.NET 2.0Coordinate-based layout is standardFlow-based layout is optional
FlowLayoutPanel and TableLayoutPanel
.NET 3.0 and greaterFlow-based layout is standardCoordinate-based layout is optionalDevelopers can now create resolution-
independent, size-independent interfaces that scale well on different monitors.
The WPF Layout PhilosophyWPF window can hold only a single
element.You need to place a container in your
window and then add other elements to that container.
Elements (like controls) should not be explicitly sized.
Elements do not indicate their position with screen coordinates.
Layout containers can be nested.
The Layout ContainersAll the WPF layout containers are panelsPanel class has 3 public properties:
Background, Children, and IsItemHost.
Name Description
StackPanel Places elements in a horizontal or vertical stack. This layout container is typically used for small sections of a larger, more complex window.
WrapPanel Places elements in a series of wrapped lines. In horizontal orientation, the WrapPanel lays items out in a row from left to right and then onto subsequent lines. In vertical orientation, the WrapPanel lays out items in a top-to-bottom column and then uses additional columns to fit the remaining items.
DockPanel Aligns elements against an entire edge of the container.
Grid Arranges elements in rows and columns according to an invisible table. This is one of the most flexible and commonly used layout containers.
UniformGrid Places elements in an invisible table but forces all cells to have the same size. This layout container is used infrequently.
Canvas Allows elements to be positioned absolutely using fixed coordinates. This layout container is the most similar to traditional Windows Forms, but it doesn’t provide anchoring or docking features. As a result, it’s an unsuitable choice for a resizable window unless you’re willing to do a fair bit of work.
StackPanelone of the simplest layout containerssimply stacks its children in a single row or
column.
Layout Properties: MarginTo make an extra space between
elementsSame margin for all sides
Different margins for each side of a control in the order left, top, right, bottom:
Element Properties: PaddingInserts space between the edges of the
control and the edges of the content
GridThe most powerful layout container in
WPFUsed by Visual Studio when creating a
new XAML file.Separates elements into an invisible grid
of rows and columnsMore than one element can be placed in
a single cellElement may itself be another layout
container that organizes its own group of contained controls: Nesting Layout.
Creating a Grid-based layout2-step processFirst, choose the number of columns and
rows that you want
Creating a Grid-based layoutSecond, place individual elements into a cell
using the attached Row and Column properties
You can place more than one element into a cellIf you don’t specify the Grid.Row or
Grid.Column property, the Grid assumes that it’s 0.
Sizing Rows and ColumnsThe Grid supports three sizing strategiesAbsolute sizes
Automatic sizes
Proportional sizes
Spanning Rows and ColumnsMake an element stretch over several
cellsThere are 2 attached properties
Grid.RowSpanGrid.ColumnSpan
Examples:
SplitterIn WPF, Splitter bars are represented by
the GridSplitter class and are a feature of the Grid
Provides the ability to resize rows or columns
Always resizes entire rows or columns (not single cells)
The GridSplitter must be placed in a Grid cell
Horizontal splitter resizes rowsSet HorizontalAlignment to Stretch and
VerticalAlignment to CenterVertical splitter resizes columns
Set VerticalAlignment to Stretch and HorizontalAlignment to Center
Multiple splittersA Grid usually contains no more than a single
GridSplitterUse Nested Grid, each Grid has its own
GridSplitter
UniformGridSimply set the Rows and Columns
properties to set its sizeEach cell is always the same size
Z-OrderTo control how they are layered by setting
the attached Canvas.ZIndex property when there are more than one overlapping elements.
By default, all elements have the same ZIndex – 0
When having the same ZIndex, elements are displayed on the order they’re defined in the XAML
With Zindex setting, the higher ZIndex elements always appear over the lower ZIndex elements
Z-Order in Code-BehindUseful if you need to change the position of
an element Programmatically.Call Canvas.SetZIndex()Pass in the element you want to modify
and the new ZIndex you want to apply.
InkCanvas: EditingModeName Description
Ink This is the default mode. When the user draws with the mouse or stylus, a stroke is drawn.
Select To select an element, the user must click it or drag a selection “lasso” around it. Once an element is selected, it can be moved,resized, or deleted.
GestureOnly Draw stroke annotations but pays attention to specific predefined gestures
InkAndGesture
The InkCanvas allows the user to draw stroke annotations and also recognizespredefined gestures.
EraseByStroke
The InkCanvas erases a stroke when it’s clicked.
EraseByPoint The InkCanvas erases a portion of a stroke (a point in a stroke) when that portion is clicked.
None The InkCanvas ignores mouse and stylus input.