1 / 35

Layout in WPF

Layout in WPF. Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University. 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

Download Presentation

Layout in WPF

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

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

  6. Arrange elements horizontally

  7. Layout Properties: Alignment

  8. 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:

  9. How Margins are combined

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

  11. WrapPanel

  12. DockPanel

  13. Nesting Layout Containers

  14. 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.

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

  16. 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.

  17. Example Grid

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

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

  20. The Sample Dialog

  21. 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

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

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

  24. Canvas

  25. 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

  26. 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.

  27. InkCanvas

  28. InkCanvas: EditingMode

  29. InkCanvas: Select Mode

More Related