先來(lái)一張網(wǎng)格布局的圖（照著B(niǎo)ILIBILI 某個(gè)視頻敲的）

image.png

Grid

網(wǎng)格布局，從上圖我們可以看，一般可以用來(lái)劃分大塊的區(qū)域

行定義 Grid.RowDefinitions

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition />

        </Grid.RowDefinitions>
</Grid>

這是一個(gè)占位兩行網(wǎng)格，第一格高度為 100（這里一般指的是相素PX）

Height屬性

• 默認(rèn)不設(shè)值的時(shí)候，會(huì)按行數(shù)平均分
• Auto 自動(dòng)，會(huì)根據(jù)內(nèi)容自動(dòng)計(jì)算需要的高度
• 0.8* 按比例分配（第一個(gè)默認(rèn)的情況，其實(shí)就是都是 1*）

列定義 Grid.ColumnDefinitions

<Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
              <ColumnDefinition Width="200" />
              <ColumnDefinition />
        </Grid.ColumnDefinitions>
</Grid>

兩列的網(wǎng)格布局實(shí)現(xiàn)，第一列的寬度為200
Width屬性同上Height

網(wǎng)格劃分

真實(shí)的空間，不單單只劃分列或者行，還可以?xún)烧呓M合

<Grid>

              <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="0.8*"/>
                    <RowDefinition/>
                    <RowDefinition />
                </Grid.RowDefinitions>

<!-- 此外添加網(wǎng)格里的內(nèi)容填充-->

  </Grid>

上面代碼的布局

網(wǎng)格內(nèi)容關(guān)聯(lián)及合并單元格

指定關(guān)聯(lián)單元格

• 指定第幾列 Grid.Column
• 指定第幾行 Grid.Row
  比如，我們?nèi)绾螌⒌谝恍校诙€(gè)單元格背景改為藍(lán)色

<!-- 指定 填充的顏色為 Grid.Column="1"( 第二列)，行為默認(rèn)0（第1行 Grid.Row="0"）-->
<Border Background="#0396FF" Margin="10" Grid.Column="1"/>

小插曲(以下內(nèi)容是錯(cuò)誤的，這里展示自己的一個(gè)思維過(guò)程 )：
一開(kāi)始以為某一列的內(nèi)容，直接在當(dāng)前ColumnDefinition 的標(biāo)簽里填充，類(lèi)型于HTML 元素，一層包一層

<ColumnDefinition >
    <Button>
</ColumnDefinition >

這樣不就可以不用另外指定了。

BUT！ Too young,too simple,sometimes naive

正常我們一般寫(xiě)GUI都是這樣，但我們現(xiàn)在是網(wǎng)格，網(wǎng)格定位必須有行有列，上面的寫(xiě)法只能單獨(dú)指定行里的內(nèi)容或者列里的內(nèi)容

合并單元格

• 列合并 Grid.ColumnSpan
• 行合并 Grid.RowSpan

<Border Background="#623AA2" Grid.Row="1" Grid.ColumnSpan="3" Margin="10"/>

綜合例子

頂圖的例子代碼如下

<Window x:Class="WPFGridLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFGridLayout"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
<!-- 最外層Grid -->
    <Grid>

      <!-- 分為二行-->
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition />
        </Grid.RowDefinitions>
      <!-- 設(shè)置第一行背景 -->
        <Border Background="#28C76F"/>

      <!--將第二行分為兩列 -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Border Background="#92FFC0" Grid.Column="0" Margin="0,10,10,10"/>

            <!--將第二列 再 用 Grid劃分 -->
            <Grid Grid.Column="1">
                <!-- 分為 5 列 -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <!-- 分為3行 -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.8*"/>
                    <RowDefinition/>
                    <RowDefinition />
                </Grid.RowDefinitions>

                <!-- 設(shè)置第一行5列的背景 -->
                <Border Background="#F8D800" Margin="10"/>
                <Border Background="#0396FF" Margin="10" Grid.Column="1"/>
                <Border Background="#EA5455" Margin="10" Grid.Column="2"/>
                <Border Background="#7367F0" Margin="10" Grid.Column="3"/>
                <Border Background="#32CCBC" Margin="10" Grid.Column="4"/>

                <!-- 將第二行(ROW=1)，第0列開(kāi)始的三列合并為一個(gè)背景 -->
                <Border Background="#623AA2" Grid.Row="1" Grid.ColumnSpan="3" Margin="10"/>
                <!-- 將第二行(ROW=1)，第3列開(kāi)始的兩列合并為一個(gè)背景 -->
                <Border Background="#F55555" Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="3" Margin="10"/>
                
                
                <Border Background="#52E5E7" Grid.Row="2" Grid.ColumnSpan="3" Margin="10"/>
                <Border Background="#79F1A4" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="3" Margin="10"/>
            </Grid>
        </Grid>
    </Grid>
</Window>

我們可以發(fā)現(xiàn)，我們的標(biāo)簽最后有 三層 </Grid>，所以Grid 是可以無(wú)限套娃（嵌套，一層套一層）。
另：
Border
貌似是個(gè)裝飾產(chǎn)物，可以用以設(shè)置控件的背景，目前還不是很了解