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

This article mainly explains "how to use Grid grid panel layout in WPF", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use Grid grid panel layout in WPF"!

Grid: grid panel

Grid, as its name implies, is a "grid" that lays out elements in tabular form. For elements on the entire panel, its child controls are placed in a predefined grid and arranged neatly. Compared with other Panel, Grid has the most complex functions. To use Grid, you first define the number of rows and columns by adding a certain number of RowDefinitions and ColumnDefinitions elements to the RowDefinitions and ColumnDefinitions attributes. The control elements placed in the Grid panel must display the row and column in which the Row and Column additional attributes are defined. The values of these two properties are indexes starting from 0. If no row or column is explicitly set, Grid will implicitly add the control to row 0 and column 0. Because the composition of Grid is not simply to add attribute tags to distinguish between rows and rows, which also allows users to be specific to a cell in practical application, so the layout is very fine. Column width and row height. You can specify the values of Width and Height in ColumnDefinition and RowDefinition respectively.

Grid cells can be empty, there can be multiple elements in a cell, and the elements in the cell are rendered one after another according to their Z order. Like Canvas, child elements in the same cell do not interact with other elements for layout, information-- they just overlap.

The Grid panel splits the element into an invisible grid of rows and columns. Although you can place multiple elements in a cell (when they overlap each other), it usually makes more sense to place only one element in each cell. Of course, the element in the Grid cell may itself be another container that organizes the set of controls it contains.

Note: although the Grid panel is designed to be invisible, you can set the Grid.ShowGridLines property to True so that you can see the Grid panel more clearly, facilitate debugging, and more accurately control how the Grid panel selects column width and row height.

1. Define a Grid with two rows and three columns, and place a Button button in each cell

Use XAML code to implement:

Top Left Middle Left Button Right Button Middle

Note: if you do not know the Grid.Row property, the Grid panel assumes that the value of the property is 0. The same is true for the Grid.Column attribute. Therefore, these two attribute values can be unspecified when you place an element in the first cell of the Grid panel.

2. Adjust row height and column width

If the Grid panel is just a collection of rows and columns that are proportionally distributed, it is of little use. In order to realize the full potential of the Grid panel, you can change the size setting of each row and column.

The Grid panel supports the following three ways to set dimensions:

Name

Description

Absolute setting size mode

To accurately set the size in device-independent units is to give an actual number, but this value is usually specified as an integer. This is the most useless.

Because it is not flexible enough to adapt to changes in content size and container size, and is difficult to handle localization

Automatically set size mode

The value is Auto, and the actual effect is to take the minimum value required by the actual control. Each row and column are just the right size to meet the needs, which is the most useful.

The way the size is set.

Set the size mode proportionally

Divides the space proportionally into a set of rows and columns. This is the standard setting for all rows and columns. Usually the value is * or Null, the actual function is to take as large a value as possible, when a column or row is defined as *, it is as large as possible, and when multiple columns or rows are defined as *, it represents a proportional size between several.

For maximum flexibility, these three size settings can be mixed. For example, it is often useful to create several rows that are automatically sized, and then fill the last or two rows with the remaining space by setting the size proportionally.

You can determine how the size is set by setting the Width property of the ColumnDefinition object or the Height property of the RowDefinition object.

(1) set the absolute width of 100 device-independent units:

(2) Auto value is required for automatic size setting.

(3) to use proportional size setting, an asterisk (*) is required.

If you want to divide the remaining space unevenly, you can specify the weight, which must be placed before the asterisk. For example, if you have two rows that are scaled and you want the height of the first row to be half the height of the second row, you can use the following settings to allocate the remaining space:

Define a Grid with three rows and four columns using XAML code

First row, first column, second row, first row, first column, first row, second column, third row, second column.

Run the effect diagram:

3. Span multiple rows and columns

In addition to using Row and Column additional attributes to place elements in cells, you can use two other additional attributes to span elements across multiple cells: RowSpan and ColumnSpan.

For example, the following button will occupy all the space in the first and second cells in the first row:

Span Button

The following code stretches the button to occupy all four cells by spanning two rows and two columns:

Span Button

Example

15 6 7 8 9 10 11 12 13 14 15 16 thie is a test17 OK18 Cancle19 20

Interface running effect:

4. Split the window

Every Windows user sees excessive splitters-draggable splitters that classify one part of a window from another. For example, when using Windows Explorer, you will see a series of folders (on the left) and a series of files (on the right). You can drag the separator bar between them to determine the proportion of each part to the window.

In WPF, the separator bar is represented by the GridSplitter class, which is one of the functions of the Grid panel. By adding GridSplitter objects to the Grid panel, you can resize rows and columns. For example:

Left Right Left Right

Interface running effect:

You can change the relative width of the two columns by dragging the middle splitter bar, as shown in the following figure:

Note: in order to successfully create a GridSplitter object, be sure to provide the appropriate property values for the VerticalAlignment (vertical alignment), HorizontalAlignment (horizontal alignment), and width property (or Height property).

It takes some experience to understand how to use the GridSplitter class to get the desired effect. Here are a few guidelines:

(1) the GridSplitter object must be placed in the Grid cell, and can be placed in the cell together with the existing content, then you need to adjust the margin setting so that they do not overlap each other. A better approach is to reserve a column or row specifically for placing GridSplitter objects and set the value of the reserved row or column's Height or Width property to Auto.

(2) GridSplitter objects always change the size of the entire row or column (rather than the size of a single cell). To keep the appearance and behavior of a GridSplitter object consistent, you need to stretch the GridSplitter object across an entire row or column, rather than limiting it to a cell. To do this, you can use the RowSpan or ColumnSpan property. For example, in the above example, the RowSpan property of the GridSplitter object is set to 2, so it is stretched to fill the entire column. If you do not use this setting, the GridSplitter object appears in the top row (the row in which it is placed), and even so, dragging the splitter bar changes the size of the entire column.

(3) GridSplitter objects are small and difficult to see, so to make them more usable, you need to set a minimum size for them. In the above example, for the vertical splitter bar, you need to set the VerticalAlignment property to Stretch (so that the splitter bar fills the entire height of the area) and set Width to a fixed value. For the horizontal separator bar, you need to set the HorizontalAlignment property to stretch and set the Height property to a fixed value.

(4) GridSplitter alignment also determines whether the separator bar is horizontal (for resizing rows) or vertical (for resizing columns). For horizontal splitter bars, you need to set the VerticalAlignment property to Center (which is also the default value) to indicate that dragging the splitter bar changes the size of the upper and lower rows. For vertical splitter bars, you need to set the HorizontalAlignment property to Center to change the size of the columns on both sides of the splitter bar.

An additional detail is included in the above example. When the GridSplitter object is declared, the ShowPreview property is set to false, so when you drag the splitter bar from one side to the other, the column is resized immediately. But if you set the ShowPreview property to true, when you drag to the separator bar, you will see a gray shadow following the mouse pointer to show where the split will be made. And the size of the column does not change until the mouse button is released. If the GridSplitter object gets the focus, you can also use the arrow keys to resize accordingly.

Tip: you can change how the GridSplitter object is filled so that it is not just a gray rectangle with shadows. The trick is to apply the fill with the Background property, which can receive simple colors or more complex brushes.

Thank you for your reading, the above is the content of "how to use Grid grid panel layout in WPF". After the study of this article, I believe you have a deeper understanding of how to use Grid grid panel layout in WPF. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.