WPF (4)----grid control implementation six squares

Using the grid control makes it easy to help us implement various layouts. Here is an example of a six-block implementation of grid cell partitioning.

The XAML code is as follows:

<window x:class= "Wpfcolorgrid.mainwindow"         xmlns= "http// Schemas.microsoft.com/winfx/2006/xaml/presentation "        xmlns:x=" http// Schemas.microsoft.com/winfx/2006/xaml "        title=" MainWindow "height=" 270 " Width= "464" loaded= "window_loaded" >       <grid name= "grid1" width= "Auto" height= "Auto" background= "#FF06092B" >             < Grid.columndefinitions>                  <columndefinition width= "/>"                  <columndefinition width= "/>"                  <columndefinition width= "*"/>              </Grid.ColumnDefinitions>              <Grid.RowDefinitions>                  <rowdefinition height= "/>"                  <rowdefinition height= "*"/>              </Grid.RowDefinitions>         <label Background= "Red" margin= "0,0,0,0" grid.column= "0" grid.row= "0" >block 1</label>          <label background= "Skyblue" margin= "0,0,0,0" grid.column= "1" grid.row= "0" >block 2</label >         <label background= "Rosybrown" margin= "0,0,0,0" grid.column= "2" grid.row= "0" >block 3</label>         <label background= "SpriNggreen "margin=" 0,0,0,0 "grid.column=" 0 "grid.row=" 1 ">block 4</label>      
   <label background= "Royalblue" margin= "0,0,0,0" grid.column= "1" grid.row= "1" >block 5</label>         <label background= "Violet" margin= "0,0,0,0" grid.column= "2" grid.row=
 "1" >block 6</label>         </Grid> </Window>

The following code divides a grid cell into six squares of 2 rows and 3 columns, in this case, the width and height of the first few cells are set to fixed values, and when column width or row height is determined by the inner element, it is set to Auto; When the width of a column or the height of a row is to be adjusted automatically based on the remaining size of the window, set it to *; When you want one of the items to be twice times the length of the other, set it to 2 *.

            <Grid.ColumnDefinitions>
                <columndefinition width= "/>
                <columndefinition width=" 150 "/ >
                <columndefinition width= "*"/>
            </Grid.ColumnDefinitions>
            <grid.rowdefinitions >
                <rowdefinition height= "/>"
                <rowdefinition height= "*"/>
            </grid.rowdefinitions >

The Xaml.cs code is as follows:

Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Text;
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.Navigation;
Using System.Windows.Shapes;

namespace Wpfcolorgrid {//<summary>//
    Interaction logic for MainWindow.xaml//
    </ Summary> public
    Partial class Mainwindow:window
    {public
        MainWindow ()
        {
            InitializeComponent ();
        }

        private void Window_Loaded (object sender, RoutedEventArgs e)
        {

        }
    }
}

To run the program, the effect is as follows:

Showgridlines= "True" after adding:

   <grid name= "grid1" width= "Auto" height= "Auto" showgridlines= "True" background= "#FF06092B" >

The border lines appear with the following effect: