Layout in WPF

1. Layout in WPF RujchaiUng-arunyawee Department of Computer Engineering KhonKaen University

2. Layout 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.

3. The 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.

4. The Layout Containers • All the WPF layout containers are panels • Panel class has 3 public properties: Background, Children, and IsItemHost.

6. StackPanel • one of the simplest layout containers • simply stacks its children in a single row or column.

7. Arrange elements horizontally

8. Layout Properties: Alignment

9. Layout 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:

11. How Margins are combined

12. Element Properties: Padding • Inserts space between the edges of the control and the edges of the content

13. WrapPanel

14. DockPanel

16. Nesting Layout Containers

17. Grid • 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.

18. Creating a Grid-based layout • 2-step process • First, choose the number of columns and rows that you want

19. Creating 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 don’t specify the Grid.Row or Grid.Column property, the Grid assumes that it’s 0.

20. Example Grid

21. Sizing Rows and Columns • The Grid supports three sizing strategies • Absolute sizes • Automatic sizes • Proportional sizes

22. Spanning Rows and Columns • Make an element stretch over several cells • There are 2 attached properties • Grid.RowSpan • Grid.ColumnSpan • Examples:

23. The Sample Dialog

24. Splitter • 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

27. Multiple splitters • A Grid usually contains no more than a single GridSplitter • Use Nested Grid, each Grid has its own GridSplitter

28. UniformGrid • Simply set the Rows and Columns properties to set its size • Each cell is always the same size

29. Canvas

30. Z-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 they’re defined in the XAML • With Zindex setting, the higher ZIndex elements always appear over the lower ZIndex elements

31. Z-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.

32. InkCanvas

33. InkCanvas: EditingMode

34. InkCanvas: Select Mode