WPF Getting Started Tutorial series eight--layout grid and UniformGrid (iii)

Five. Grid

The grid, as its name implies, is "grid", and its sub-controls are placed in a small, well-defined grid, neatly lined with columns. The grid is the most complex of functions compared to other panel. To use grids, you first add a certain number of rowdefinitions and columndefinitions elements to the RowDefinitions and ColumnDefinitions properties to define the number of rows and columns. The control elements placed in the grid panel must show the rows and columns in which the placement is defined with the attached property syntax, which are all 0-based integer values, and if no rows or columns are explicitly set, the grid implicitly joins the control in the No. 0 row, column No. 0. Because the composition of the grid is not a simple addition of attribute tags to differentiate rows and columns, this also allows the user to be specific to a cell in the actual application, so the layout is very fine.

A grid cell can be empty, a cell can have more than one element, and the elements in the cell are rendered one after the other in their Z-order. As with canvas, child elements in the same cell do not interact with other elements in the layout, information-they are just overlapping. Let's use some actual code to demonstrate how to use the grid.

1) grid column width and row height can be fixed, automatic, according to the ratio of three ways defined

<Grid>    <Grid.RowDefinitions>        <rowdefinition height= "Auto"/>        <rowdefinition height= "Auto"/>        <rowdefinition height= "*"/> <rowdefinition        height= "Max"/>    </ grid.rowdefinitions>    <Grid.ColumnDefinitions>        <columndefinition width= "Auto"/>        < ColumnDefinition width= "/>"    </Grid.ColumnDefinitions></Grid>

Note: Here are some ways to define the grid height and width:

Name	Description
Absolute size	is to give an actual number, but this value is usually specified as an integer, as in
Automatic (autosizing)	A value of auto, the actual effect is to take the actual control required minimum value
Starsizing	A value of * or N, the actual effect is to take the largest possible value, when a column or row is defined as a * is as large as possible, when multiple columns or rows are defined as * is to represent a number of people proportional to set the size of the square

The first kind, fixed length--not enough width, will be cut, not good use. Unit pixel.
The second, automatic length-automatically matches the width of the longest element in the column.
The third, the proportional length of the--* represents the full width of the remaining, the two lines are *, the remaining width will be divided evenly; like one of the above, A *, the former 2/3 width.

2) spanning multiple rows and columns

Using the Grid.columnspan and Grid.rowspan attached properties allows you to merge rows and columns together, so that elements can also span multiple cells.

3) split with Gridsplit

<gridsplitter height= "6" verticalalignment= "Stretch" horizontalalignment= "Stretch"                grid.row= "2" grid.column = "2" ></GridSplitter>

Using the Gridsplit control in conjunction with a grid control implements a function similar to SplitContainer in WinForm, which is often used in WinForm, and we do not introduce much.

4) XAML Code implementation effect (in XAML):

<window x:class= "Wpfapp1.windowgriddemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" title= "Windowgriddemo" height= "width=" > &lt ; grid> <Grid.RowDefinitions> <rowdefinition height= "61*"/> <rowdefinition He ight= "101*"/> <rowdefinition height= "108*"/> </Grid.RowDefinitions> <grid.colum            Ndefinitions> <columndefinition width= "139"/> <columndefinition width= "184*"/> <columndefinition width= "45*"/> <columndefinition width= "250*"/> </grid.columndefin itions> <textblock grid.row= "0" grid.columnspan= "1" text= "first row, first column, 1 columns" background= "Red" Horizontalalignme nt= "Center"/> <button grid.row= "0" grid.column= "1" grid.columnspan= "3" grid.rowspan= "2" content= "starting from row 1th 2nd column, Two rows, three columns "/> &LT Button grid.row= "2" grid.column= "0" grid.columnspan= "4" content= "3rd row, 1th column start, 4 columns"/> <button grid.row= "1" Name  = "Btnaddbycode" click= "Btnaddbycode_click" > Background code generation (2nd row 1th column) </Button> </Grid></Window>

5), implemented in C # code:

Using system;using system.collections.generic;using system.linq;using system.text;using System.Threading.Tasks; Using system.windows;using system.windows.controls;using system.windows.data;using system.windows.documents;using System.windows.input;using system.windows.media;using system.windows.media.imaging;using System.Windows.Shapes;  namespace wpfapp1{//<summary>//Windowgriddemo.xaml interactive logic///</summary> public partial class        Windowgriddemo:window {public Windowgriddemo () {InitializeComponent ();            public void Btnaddbycode_click (object sender, RoutedEventArgs e) {grid Grid = new Grid (); Grid.    Width = Double.NaN; Equivalent to setting the Width= "Auto" grid in XAML.   Height = Double.NaN; The equivalent of setting height= "Auto"//To add the grid as a child control of the form in XAML.             Content = grid;            Column one columndefinition CD1 = new ColumnDefinition (); CD1.   Width = new GridLength (139);         Grid.            Columndefinitions.add (CD1);            Column two columndefinition CD2 = new ColumnDefinition (); CD2.            Width = new GridLength (1, Gridunittype.star); Grid.            Columndefinitions.add (CD2);            Column three columndefinition CD3 = new ColumnDefinition (); CD3.            Width = new GridLength (2, Gridunittype.star); Grid.             Columndefinitions.add (CD3);            Line one rowdefinition row1 = new RowDefinition (); Row1.            Height = new GridLength (61); Grid.            Rowdefinitions.add (ROW1);            Line two rowdefinition row2 = new RowDefinition (); Row2.            Height = new GridLength (1, Gridunittype.star); Grid.            Rowdefinitions.add (ROW2);            Line three rowdefinition row3 = new RowDefinition (); Row3.            Height = new GridLength (200); Grid.            Rowdefinitions.add (ROW3);            Add cells to Grid Rectangle R0C1 = new Rectangle (); R0c1. Fill = new SolidcolorbrusH (Colors.gray); R0c1.            SetValue (grid.columnproperty, 0); R0c1.            SetValue (grid.rowproperty, 0); Grid.             Children.add (R0C1);            Rectangle r1c23 = new Rectangle (); R1c23.            Fill = new SolidColorBrush (colors.yellow); R1c23.            SetValue (Grid.columnproperty, 1); R1c23.            SetValue (Grid.columnspanproperty, 2); R1c23.            SetValue (Grid.rowproperty, 1); R1c23.            SetValue (Grid.rowspanproperty, 2); Grid.         Children.add (R1C23); }    }}

Liu, UniformGrid

The previous grid is described, and the next UniformGrid is the simplified version of the grid, with the same size for each cell, and no need to define a row and column collection. Each cell always has the same size, and each cell can hold only one control, automatically creating rows and columns as defined by the number of elements within it, and usually maintaining the same number of rows. There are no row and column attached properties in UniformGrid, and there are no blank cells.

UniformGrid layout controls are rarely used compared to grid layout controls. The grid panel is a common tool for creating simple and even complex window layouts. The UniformGrid panel is a more special layout container that is used to quickly lay out elements in a rigid grid.

The following is an example of using XAML code to populate the UniformGrid panel with 4 buttons. ：

<window x:class= "Wpfapp1.windowuniformgrid"        xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "        xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "        title=" Windowuniformgrid "height=" "Width=" >    <Grid>        <uniformgrid rows= "2" columns= "2" >             <Button> First (0,0) < /button>             <Button> Second (0,1) </Button>             <Button> Third (1,0) </Button>             <button Name= "Btnaddbycode" click= "Btnaddbycode_click" > Fourth (total) </Button>         </UniformGrid>    </ Grid></window>

The following uses C # code to implement the layout of 10 TextBlock controls.

Using system;using system.collections.generic;using system.linq;using system.text;using System.Threading.Tasks; Using system.windows;using system.windows.controls;using system.windows.controls.primitives;using System.windows.data;using system.windows.documents;using system.windows.input;using System.Windows.Media;using System.windows.media.imaging;using System.Windows.Shapes; namespace wpfapp1{//<summary>//Windowuniformgrid.xaml interactive logic///</summary> public partial CL        Windowuniformgrid:window {public Windowuniformgrid () {InitializeComponent (); } public void Btnaddbycode_click (object sender, RoutedEventArgs e) {UniformGrid WP = new Uniform            Grid (); Add WP as the child control of the form this.            Content = WP; Wp.            Margin = new Thickness (0, 0, 0, 0); Wp.            Background = new SolidColorBrush (colors.red);            Traverse increases rectangles TextBlock block; for (int i = 0; i <= 10;                i++) {block = new TextBlock (); Block. Text = string.                Format ("{0}", i); Wp.            Children.add (block); }         }    }}

WPF Getting Started Tutorial series eight--layout grid and UniformGrid (iii)