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

Source: Internet
Author: User
Tags xmlns

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:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.