Overview of the WPF UI layout

Online demo : http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html
Clear version video + code download : Http://115.com/lb/5lbeer0m9lad

First, Brief introduction

This article gives a preliminary overview of the WPF layout controls and demonstrates the grid, StackPanel, Canvas, DockPanel, and WrapPanel five layout controls respectively.
The main contents include:
1. The way and relationship of UI layout.
2, the layout concept of WPF.
3. Overview and presentation of the five layout controls.

4, summary.

Ii. the way and relationship of UI layout
1, three kinds of layout methods: absolute positioning, relative positioning and row and column positioning.
2. Three layout relationships: Phase collar, overlay, and include relationships.
For include relationships, for example, the following demo sample code includes the button control in the button control.

<button margin= "144,50,153,57" > <Button.Content> <button margin= "Ten" > <button.co Ntent> <button margin= "Ten" > <Button.Content> <b Utton margin= "> <Button.Content> <button margin=" Ten "> <Button.Content> <button Margin                                                = "Ten" > <Button.Content>                                                        <button margin= "Ten" > <Button.Content> <button margin= "Ten" > & Lt                                   Button.content> <button margin= "Ten" >                                 <Button.Content> <button margin= "content=" "OK"/> </but ton.                                                            Content> </Button>                                                     </Button.Content> </Button>                                                </Button.Content>                                        </Button> </Button.Content>                             </Button> </Button.Content> </Button> </Button.Content> </Button> </button.         Content>       </Button> </Button.Content> </Button> </Button.Content></Button>

Effects such as those seen in:

third, the layout concept of WPF

Put a layout element as the content of a ContentControl or HeaderedContentControl family control, and then add a child control to be laid out in the layout, assuming a more complex layout of the UI parts, then set a child layout element in this region, Forms the nesting of layout elements.

Overview and demos of four or five layout controls
Grid: Grid layout control. You can define the rows and columns yourself and adjust the layout of the controls by the number of rows, row heights, and column widths. Similar to the table element in HTML.

StackPanel: Stack-Panel control. You can line up the included elements in a vertical or horizontal direction, and when an element is removed, the subsequent elements move forward to fill the vacancy themselves.

Canvas: Canvases control. The inner element enables the positioning of absolute coordinates in pixels, similar to the traditional WinForm layout.

DockPanel: Berthing panel. The inner element is able to choose the docking direction, similar to the dock property of the traditional WinForm.

WrapPanel: Take the initiative to fold the line panel. The inner element can wrap itself in a row after it is full, similar to the flow layout in HTML.

v. Summary
The main topics covered in this presentation include:
1. Layout relationship of controls: overlay, adjacent, and include. ；

2. Overview of the five layout controls. Grid, StackPanel, Canvas, DockPanel, WrapPanel

For details, please visit the video demo!

Overview of the WPF UI layout