（C#）WPF：Grid面板介紹

Grid:網格面板

      Grid和其他各個Panel比較起來，功能最多也最為復雜。要使用Grid，首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數量的RowDefinitions和 ColumnDefinitions元素，從而定義行數和列數；而放置在Grid面板中的控件元素都必須顯示采用Row和Column附加屬性定義其放置所在的行和列，這兩個屬性的值都是從0開始的索引數，如果沒有顯式設置任何行或列，Grid將會隱式地將控件加入在第0行第0列。

      注意：盡管Grid面板被設計成不可見的，但可將Grid.ShowGridLines屬性設置為True，從而更清晰的觀察Grid面板，方便調試，可以更准確地控制Grid面板如何選擇列寬和行高。

1、定義一個兩行三列的Grid，在單元格里面放置Button按鈕

<Window x:Class="WpfApp3.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:WpfApp3"
                mc:Ignorable="d"
                Title="MainWindow" Height="237" Width="525">
          <Grid ShowGridLines="True">
                    <Grid.RowDefinitions>
                             <RowDefinition></RowDefinition>
                             <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                             <ColumnDefinition></ColumnDefinition>
                             <ColumnDefinition></ColumnDefinition>
                             <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
                    <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
                    <Button Grid.Row="1" Grid.Column="2">Button Right</Button>
                    <Button Grid.Row="1" Grid.Column="1">Button Middle</Button>
           </Grid>
</Window>

效果圖：

               

2、調整行高和列寬

Grid面板支持以下三種設置尺寸的方式：

名稱	說明
絕對設置尺寸方式	使用設備無關單位准確地設置尺寸，就是給一個實際的數字，但通常將此值指定為整數。這是最無用的策略，因為這種策略不夠靈活，難以適應內容大小和容器大小的改變，而且難以處理本地化。
自動設置尺寸方式	值為Auto，實際作用就是取實際控件所需的最小值，每行和每列的尺寸剛好滿足需要，這是最有用 的尺寸設置方式。
按比例設置尺寸方式	按比例將空間分割到一組行和列中。這是對所有行和列的標准設置。通常值為*或N*，實際作用就是取盡可能大的值，當某一列或行被定義為*則是盡可能大，當出現多列或行被定義為*則是代表幾者之間按比例方設置尺寸。

        為了獲得最大的靈活性，可混合使用這三種尺寸設置方式。例如，創建幾個自動設置尺寸的行，然后通過按比例設置尺寸的方式讓最后的一行或兩行充滿剩余的空間，這通常是很有用的。

       可通過設置ColumnDefinition對象的Width屬性或者RowDefinition對象的Height屬性來確定尺寸設置方式。

      （1）設置100設備無關單位的絕對寬度：

<ColumnDefinition Width="100"></ColumnDefinition>

       （2）使用自動尺寸設置方式，需要使用Auto值

<ColumnDefinition Width="Auto"></ColumnDefinition>

        （3）使用按比例尺寸設置方式，需要使用星號(*)

<ColumnDefinition Width="*"></ColumnDefinition>

          如果希望不均勻的分割剩余空間，可指定權重，權重必須放在星號之前。例如，如果有兩行是按比例設置尺寸，並希望第一行的高度是第二行高度的一半，那么可以使用如下設置來分配剩余空間：

<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>

        定義一個三行四列的Grid

<Window x:Class="WpfApp4.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:WpfApp4"
                mc:Ignorable="d"
                Title="MainWindow" Height="237" Width="525">
            <Grid ShowGridLines="True">
                    <Grid.RowDefinitions>
                             <!-- 自動行高 -->
                             <RowDefinition Height="Auto"></RowDefinition>
                             <!-- 按比例行高 -->
                             <RowDefinition Height="*"></RowDefinition>
                             <!-- 固定行高 -->
                             <RowDefinition Height="50"></RowDefinition>
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                             <!-- 按比例列寬 -->
                             <ColumnDefinition Width="*"></ColumnDefinition>
                             <!-- 固定列寬 -->
                             <ColumnDefinition Width="200"></ColumnDefinition>
                  </Grid.ColumnDefinitions>
                  <TextBlock Grid.Row="0" Grid.Column="0">第一行第一列</TextBlock>
                  <TextBlock Grid.Row="1" Grid.Column="0">第二行第一列</TextBlock>
                  <TextBlock Grid.Row="2" Grid.Column="0">第三行第一列</TextBlock>
                  <Button Grid.Row="0" Grid.Column="1">第一行第二列</Button>
                  <Button Grid.Row="1" Grid.Column="1">第二行第二列</Button>
                  <Button Grid.Row="2" Grid.Column="1">第三行第二列</Button>
           </Grid>
</Window>

效果圖：

               

3、跨越多行和多列 

還有兩個附加屬性是RowSpan和ColumnSpan，它們可以使元素跨越多個單元格。

 1 <Window x:Class="WpfApp5.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:WpfApp5"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="237" Width="525">
 9     <Grid ShowGridLines="True">
10         <Grid.RowDefinitions>
11             <RowDefinition Height="*"></RowDefinition>
12             <RowDefinition Height="Auto"></RowDefinition>
13         </Grid.RowDefinitions>
14         <Grid.ColumnDefinitions>
15             <ColumnDefinition Width="*"></ColumnDefinition>
16             <ColumnDefinition Width="Auto"></ColumnDefinition>
17             <ColumnDefinition Width="Auto"></ColumnDefinition>
18         </Grid.ColumnDefinitions>
19         <TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">this is a test</TextBox>
20         <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button>
21         <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="2">Cancle</Button>
22     </Grid>
23 </Window>

效果圖：

               

4、分割窗口

       每個Windows用戶都見過分隔條—能將窗口的一部分與另一部分分類的可拖動分割器。例如，當使用Windows資源管理器時，會看到一系列文件夾（在左邊）和一系列文件（在右邊）。可拖動它們之間的分隔條來確定每部分占據窗口的比例。

       在WPF中，分隔條由GridSplitter類表示，它是Grid面板的功能之一。通過為Grid面板添加GridSplitter對象，用戶就可以改變行和列的尺寸。

       例如：

<Window x:Class="WpfApp6.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:WpfApp6"
        mc:Ignorable="d"
        Title="MainWindow" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
    </Grid>
</Window>

效果圖：

              

             

注意：為了成功地創建GridSplitter對象，務必為VerticalAlignment（垂直對齊方式）、HorizontalAlignment（水平對齊方式）以及width屬性（或Height屬性）提供相應的屬性值。

https://www.cnblogs.com/dotnet261010/p/6281915.html