WPF使用Grid網格面板佈局
Grid:網格面板
Grid顧名思義就是“網格”，以表格形式佈局元素，對於整個面板上的元素進行佈局，它的子控件被放在一個一個事先定義好的小格子裡面，整齊配列。 Grid和其他各個Panel比較起來，功能最多也最為復雜。要使用Grid，首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數量的RowDefinitions和 ColumnDefinitions元素，從而定義行數和列數。而放置在Grid面板中的控件元素都必須顯示采用Row和Column附加屬性定義其放置所在的行和列，這兩個屬性的值都是從0開始的索引數，如果沒有顯式設置任何行或列，Grid將會隱式地將控件加入在第0行第0列。由於Grid的組成並非簡單的添加屬性標記來區分行列，這也使得用戶在實際應用中可以具體到某一單 元格中，所以佈局起來就很精細瞭。 列寬和行高，分別可以在ColumnDefinition、RowDefinition裡面指定Width、Height的值。
Grid的單元格可以是空的，一個單元格中可以有多個元素，而在單元格中元素是根據它們的Z順序一個接著一個呈現的。與Canvas一樣，同一個單元格中 的子元素不會與其他元素交互佈局，信息——它們僅僅是重疊而已。
Grid面板將元素分割到不可見的行列網格中。盡管可以在一個單元格中放置多個元素（這時這些元素會相互重疊），但在每個單元格中隻放置一個元素通常更合理。當然，在Grid單元格中的元素本身也可能是另一個容器，該容器組織它所包含的一組控件。
註意：盡管Grid面板被設計成不可見的，但可將Grid.ShowGridLines屬性設置為True，從而更清晰的觀察Grid面板，方便調試，可以更準確地控制Grid面板如何選擇列寬和行高。
1、定義一個兩行三列的Grid，在每個單元格裡面放置一個Button按鈕
使用XAML代碼實現：
<Window x:Class="WpfDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
<!--定義網格，此處顯示瞭網格線-->
<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>
註意：如果不知道Grid.Row屬性，Grid面板會假定該屬性的值為0。對於Grid.Column屬性也是如此。因此，在Grid面板的第一個單元格中放置元素時可不指定這兩個屬性值。
2、 調整行高和列寬
如果Grid面板隻是按比例分配尺寸的行和列的集合，它也就沒有什麼用處瞭。為瞭充分發揮Grid面板的潛能，可更改每一行和每一列的尺寸設置方式。
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>
使用XAML代碼定義一個3行4列的Grid
<Window x:Class="WpfDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen"> <!--定義網格，此處顯示瞭網格線--> <Grid ShowGridLines="True"> <!--定義行,3行--> <Grid.RowDefinitions> <!--自動行高--> <RowDefinition Height="Auto"></RowDefinition> <!--按比例行高--> <RowDefinition Height="*"></RowDefinition> <!--固定行高--> <RowDefinition Height="50"></RowDefinition> </Grid.RowDefinitions> <!--定義列，2列--> <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、跨越多行和多列
除瞭可以使用Row和Column附加屬性在單元格中放置元素，還可以使用另外兩個附加屬性使元素跨越多個單元格，這兩個附加屬性是RowSpan和ColumnSpan。
例如，下面的按鈕將占據第一行中的第一個和第二個單元格的所有空間：
<Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">Span Button</Button>
下面的代碼通過跨越兩行和兩列，拉伸按鈕使其占據所有4個單元格：
<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">Span Button</Button>
示例
1 <Window x:Class="WpfDemo.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen"> 5 <!--定義網格，此處顯示瞭網格線--> 6 <Grid ShowGridLines="True"> 7 <Grid.RowDefinitions> 8 <RowDefinition Height="*"></RowDefinition> 9 <RowDefinition Height="Auto"></RowDefinition> 10 </Grid.RowDefinitions> 11 <Grid.ColumnDefinitions> 12 <ColumnDefinition Width="*"></ColumnDefinition> 13 <ColumnDefinition Width="Auto"></ColumnDefinition> 14 <ColumnDefinition Width="Auto"></ColumnDefinition> 15 </Grid.ColumnDefinitions> 16 <TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">thie is a test</TextBox> 17 <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button> 18 <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="2">Cancle</Button> 19 </Grid> 20 </Window>
界面運行效果：
4、分割窗口
每個Windows用戶都見過分隔條—能將窗口的一部分與另一部分分類的可拖動分割器。例如，當使用Windows資源管理器時，會看到一系列文件夾（在左邊）和一系列文件（在右邊）。可拖動它們之間的分隔條來確定每部分占據窗口的比例。
在WPF中，分隔條由GridSplitter類表示，它是Grid面板的功能之一。通過為Grid面板添加GridSplitter對象，用戶就可以改變行和列的尺寸。例如：
<Window x:Class="WpfDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Grid面板" 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屬性）提供相應的屬性值。
理解如何使用GridSplitter類，從而得到所期望的效果需要一定的經驗，下面列出幾條指導原則：
- （1）GridSplitter對象必須放在Grid單元格中，可與以及存在的內容一並放到單元格中，這時需要調整邊距設置，使他們不相互重疊。更好的方法是預留一列或一行專門用於放置GridSplitter對象，並將預留行或列的Height或Width屬性的值設置為Auto。
- （2）GridSplitter對象總是改變整行或整列的尺寸（而非改變單個單元格的尺寸）。為使GridSplitter對象的外觀和行為保持一致，需要拉伸GridSplitter對象使其穿越整行或整列，而不是將其限制在單元格中。為此，可使用RowSpan或ColumnSpan屬性。例如，上面的例子中GridSplitter對象的RowSpan屬性設置為2，因此被拉伸充滿整列。如果不使用該設置，GridSplitter對象會顯示在頂行（放置它的行）中，即使這樣，拖動分隔條時也會改變整列的尺寸。
- （3）GridSplitter對象很小不易看見，為瞭使其更可用，需要為其設置最小尺寸。在上面的例子中，對於垂直分隔條，需要將VerticalAlignment屬性設置為Stretch（使分隔條填滿區域的整個高度），並將Width設置為固定值。對於水平分隔條，需要設置HorizontalAlignment屬性來拉伸，並將Height屬性設置為固定值。
- （4）GridSplitter對齊方式還決定瞭分隔條是水平的（用於改變行的尺寸）還是豎直的（用於改變列的尺寸）。對於水平分隔條，需要將VerticalAlignment屬性設置為Center（這也是默認值），以指明拖動分隔條改變上面行和下面行的尺寸。對於垂直分隔條，需要將HorizontalAlignment屬性設置為Center，以改變分隔條兩側列的尺寸。
在上面的例子中還包含瞭一處額外的細節。在聲明GridSplitter對象時，將ShowPreview屬性設置為false，因此，當把分隔條從一邊拖到另一邊時，會立即改變列的尺寸。但是如果將ShowPreview屬性設置為true，當拖到分隔條時就會看到一個灰色的陰影跟隨鼠標指針，用於顯示將在何處進行分割。並且直到釋放瞭鼠標鍵之後列的尺寸才改變。如果GridSplitter對象獲得瞭焦點，也可以使用箭頭鍵改變相應的尺寸。
提示：可以改變GridSplitter對象的填充方式，使其不隻是具有陰影的灰色矩形。技巧是使用Background屬性應用填充，該屬性可以接收簡單的顏色或更復雜的畫刷。
到此這篇關於WPF使用Grid網格面板佈局的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。
推薦閱讀：
- C# OCR實現文字識別功能
- 一文帶你瞭解WPF中的附加事件
- WPF框架Prism中區域Region用法介紹
- WPF路由事件之邏輯樹和可視樹遍歷
- 在C# WPF下自定義滾動條ScrollViewer樣式的操作