前言

本篇主要講解WPF中，通過Grid進行介面佈局，Grid佈局，分為兩種：Grid和UniformGrid；Grid顧名思義，就是表格的意思，其佈局方式通過定義表格的行、列來進行佈局，指定內部控制元件所在的單元格，進行控制元件定位；而UniformGrid是指具有統一格式的表格，類似於BootStrap中的柵格系統，將螢幕均勻劃分為固有的列，通過定義<div>標籤的row、column屬性來進行介面佈局；

1. Grid 進行佈局

Grid進行佈局時，可以設定單元格的固定寬度，也可以通過設定Width屬性為：1*或2*來指定單元格所佔的寬度比例；Grid內部的控制元件，通過ColumnSpan屬性，指定控制元件跨幾列，通過RowSpan屬性，指定控制元件跨幾行；

 1 <Grid ShowGridLines="True">
 2         <Grid.RowDefinitions>
 3             <RowDefinition></RowDefinition>
 4         </Grid.RowDefinitions>
 5         <Grid.ColumnDefinitions>
 6             <ColumnDefinition Width="1*" ></ColumnDefinition>
 7             <ColumnDefinition Width="
 
2*"></ColumnDefinition>
 8         </Grid.ColumnDefinitions>
 9         <WrapPanel x:Name="wrapPanel" Grid.Row="0" Grid.Column="0" Orientation="Horizontal" >
10             <local:TcpConnectUserControl HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=wrapPanel, Mode=OneWay}
 
" ></local:TcpConnectUserControl>
11             <Button Width="180" Height="70">test</Button>
12             <Button Width="180" Height="70">test</Button>
13             <Button Width="180" Height="70">test</Button>
14         </WrapPanel>
15     </Grid>

效果圖如下，介面中，兩列的比例為1：2

1. UniformGrid 進行佈局

UniformGrid的特點：將介面容器劃分為固有的行或列，相較於Grid而言，省去了<GridRowDefinitions>、<GridColumnDefinitions>，因為UniformGrid中的單元格是等比的，其內部的單元格只能放一個控制元件；

如下程式碼示例，定義了一個2行2列的UniformGrid：

 1 <UniformGrid Grid.Row="0" Grid.Column="1" Rows="2" Columns="2">
 2             <WrapPanel Background="#FFB6B4B4">
 3                 <Button>test1</Button>
 4             </WrapPanel>
 5             <WrapPanel Background="#FFA27F7F" >
 6                 <Button>test2</Button>
 7             </WrapPanel>
 8             <WrapPanel Background="#FFA27F7F">
 9                 <Button>test3</Button>
10             </WrapPanel>
11             <WrapPanel Background="#FFB6B4B4">
12                 <Button>test4</Button>
13             </WrapPanel>
14         </UniformGrid>

效果圖：

實際的工作中，Grid、UnifromGrid、StackPanel、WrapPanel、DockPanel、Canvas、ViewBox 是組合應用，靈活組合能達到較好的佈局效果。