Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "WPF common layout panel how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "WPF common layout panel how to use" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Several common layout panels

1.StackPanel panel

The StackPanel panel can simply arrange elements according to a single row or column. The default layout direction of StackPanel is vertical (Vertical), which is controlled by the Orientation attribute.

Orientation attribute:

The user controls whether the layout direction is arranged vertically or horizontally. There are two values to choose from: Vertical and Horizontal

Sample code:

Button1 button2 button3

Effect drawing (as described above, the StackPanel panel Orientation property defaults to Vertical):

When setting Orientation= "Horizontal", the control layout direction is horizontal, the effect picture.

By default, the elements in the StackPanel panel change according to the size of the StackPanel, and the StackPanel panel specifies the Width and weight values.

Layout properties:

VerticalAlignment when there is extra space in the vertical direction, you can choose Top, Center, Bottom, Stretch to set the layout HorizontalAlignment. When there is extra space in the horizontal direction, you can select Center, Left, Right, Stretcj to set the layout Margin.

Relative to the four sides of the control, you can set each margin individually or uniformly.

Similar: Margin= "1 2 3 4" or Margin= "1"

[VerticalAlignment/HorizontalAlignment] attribute:

In order to see the effect, you usually reserve extra space for the control. For example, several sets of buttons are added to the default StackPanel panel, and the remaining white areas are extra space.

At this point, set the VerticalAlignment property to Center for the StackPanel panel, where all child elements are centered and the extra space is evenly divided.

Note: while Bottom, Top and Stretch indicate that the overall element is lower, upper and overall extension, respectively.

By default, the VerticalAlignment and HorizontalAlignment default properties of the StackPanel panel are both Stretch

Button1 button2 button3

Effect picture:

Margin (margin) attribute:

As stated in previous books, a well-designed window not only contains elements, but also contains a certain amount of extra space between elements. So the Margin attribute comes in handy at this time.

In the above example diagram, the Margin property is not set, so what you will see is that each element is close to each other.

When you set the margin, you can uniformly set the distance of all sides of the element, as follows:

Button1 button2 button3

The other is to set the margins on the edges of the elements: left, top, right, and bottom, respectively, as follows:

Button1 button2 button3 2.WarpPanel panel

Like the StackPanel panel type, the WarpPanel panel also arranges elements in rows or columns. By default, the Orientation attribute of the WarpPanel panel is Horizontal, and the elements are arranged horizontally.

Note: unlike the StackPanel panel, WarpPanel defaults to not stretching all elements. One point to emphasize here: in StackPanel, the element is stretched according to the Orientation attribute

1. When Orientation= "Horizontal", the element is stretched vertically

two。 When Orientation= "Vertical", the element is stretched horizontally

Example diagram:

Similarly, the WarpPanel panel has the properties of StackPanel. The difference lies in the above difference.

3.DockPanel panel

Friends who have used winform should know that in winform, almost all spaces have the Dock docking attribute, and you can set Dock positioning individually for elements. In WPF, however, this is clearly not available.

So for flexible WPF, the DockPanel panel has this capability. All child elements contained in the DockPanel panel will have Dock additional attributes.

As shown in the following figure, simply add an element to DockPanel and set the Dock attribute:

Sample code:

Button1 button2 button3

Note: the LastChildFill attribute of DockPanel is mainly used to set the filling effect of the last element in DockPanel. Such as the button3 element in the figure above

The literal meaning of LastChildFill is understandable as to whether the last element is filled. By setting up true/false

Effect picture (LastChildFill= "false"):

Button1 button2 button3

4.Grid panel

For the table table in the Grid panel type HTML, in order to arrange the elements or content in a specified position, you must first define enough rows and columns.

Note: the Row and Column attributes defined in Grid are indexed from 0 by default in the element, and in the following example, both are added for demonstration purposes (if the location has been determined in the program, it can be left off by default).

Define rows and columns (RowDefinitions/ColumnDefinitions)

Add elements:

The following is the addition of four buttons to the 2 rows and 2 columns defined by Grid, as shown in the following figure:

The code shows:

Upper left, upper right, lower left, lower right.

Note: although multiple elements are allowed in a cell, this usually makes no sense. As shown above, each element is specific to the corresponding cell.

Grid differs from containers such as WarpPanel and StackPanel panels in that Grid needs to explicitly define rows and columns to place elements. Rows and columns are implicitly created relative to other containers.

Adjust rows and columns:

The Grid panel supports 3 ways to set dimensions:

Hard-coded dimensions width= "xxx" / height= "xxx" automatically set dimensions width= "auto" / height= "auto" set dimensions width= "*" / height= "2*" proportionally

For example, the following code demonstrates three ways to set the size:

Upper left, upper right, lower left, lower right.

As can be seen from the actual display, the first column width= "*" is the second column 1x2, the adaptive height set in the first row, and the hard-coded height 100in the second row.

Note: when using Grid to set columns or rows proportionally, if the Grid width is odd pixels, then the segmented row pixels have decimals, and when the column contains shape elements, borders, images, then the display may be blurred.

If this problem affects the layout, just set the UseLayoutRounding property of Grid to True.

Across rows and columns:

Any element in the Grid has two additional attributes, RowSpan and ColumnSpan. Cross-row and cross-column like this is very common in web applications.

The following example shows how to display across columns for elements:

5.UniformGrid panel

In contrast to Grid, UniformGrid does not follow many of the principles of Grid, whether it is explicitly declaring rows and columns, as well as their additional properties. Instead, through simple settings

Rows and Columns properties to set its size. Each cell is evenly distributed, and crucially, all elements are finally placed in the order in which they are defined

In the cell.

The sample code is as follows:

Button1 button2 button3 button46.Canvas panel

The Canvas panel allows elements to be placed in precise coordinates, and in order to locate an element in the Canvas panel, you need to set the Canvas.Left and Canvas.Top properties.

Code: locate an element by setting additional attributes such as Canvas.Left, Top, Right, Bottom, etc.

Button1 button2

Read here, this article "how to use WPF common layout panel" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.