Title: Layout in WPF
1Layout in WPF
- Rujchai Ung-arunyawee
- Department of Computer Engineering
- Khon Kaen University
2Layout History
- .NET 1.0
- Coordinate-based layout only
- Anchoring and Docking
- .NET 2.0
- Coordinate-based layout is standard
- Flow-based layout is optional
- FlowLayoutPanel and TableLayoutPanel
- .NET 3.0 and greater
- Flow-based layout is standard
- Coordinate-based layout is optional
- Developers can now create resolution-independent,
size-independent interfaces that scale well on
different monitors.
3The WPF Layout Philosophy
- WPF 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.
4The Layout Containers
- All the WPF layout containers are panels
- Panel class has 3 public properties Background,
Children, and IsItemHost.
5Name 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 doesnt provide anchoring or docking features. As a result, its an unsuitable choice for a resizable window unless youre willing to do a fair bit of work.
6StackPanel
- one of the simplest layout containers
- simply stacks its children in a single row or
column.
7Arrange elements horizontally
8Layout Properties Alignment
9Layout Properties Margin
- To make an extra space between elements
- Same margin for all sides
- Different margins for each side of a control in
the order left, top, right, bottom
10(No Transcript)
11How Margins are combined
12Element Properties Padding
- Inserts space between the edges of the control
and the edges of the content
13WrapPanel
14DockPanel
15(No Transcript)
16Nesting Layout Containers
17Grid
- The most powerful layout container in WPF
- Used by Visual Studio when creating a new XAML
file. - Separates elements into an invisible grid of rows
and columns - More than one element can be placed in a single
cell - Element may itself be another layout container
that organizes its own group of contained
controls Nesting Layout.
18Creating a Grid-based layout
- 2-step process
- First, choose the number of columns and rows
that you want
19Creating a Grid-based layout
- Second, place individual elements into a cell
using the attached Row and Column properties - You can place more than one element into a cell
- If you dont specify the Grid.Row or Grid.Column
property, the Grid assumes that its 0.
20Example Grid
21Sizing Rows and Columns
- The Grid supports three sizing strategies
- Absolute sizes
- Automatic sizes
- Proportional sizes
22Spanning Rows and Columns
- Make an element stretch over several cells
- There are 2 attached properties
- Grid.RowSpan
- Grid.ColumnSpan
- Examples
23The Sample Dialog
24Splitter
- In 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 rows
- Set HorizontalAlignment to Stretch and
VerticalAlignment to Center - Vertical splitter resizes columns
- Set VerticalAlignment to Stretch and
HorizontalAlignment to Center
25(No Transcript)
26(No Transcript)
27Multiple splitters
- A Grid usually contains no more than a single
GridSplitter - Use Nested Grid, each Grid has its own
GridSplitter
28UniformGrid
- Simply set the Rows and Columns properties to set
its size - Each cell is always the same size
29Canvas
30Z-Order
- To 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 theyre defined in the
XAML - With Zindex setting, the higher ZIndex elements
always appear over the lower ZIndex elements
31Z-Order in Code-Behind
- Useful 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.
32InkCanvas
33InkCanvas EditingMode
Name 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 recognizes predefined gestures.
EraseByStroke The InkCanvas erases a stroke when its 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.
34InkCanvas Select Mode
35(No Transcript)