前言
本篇主要講解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 是組合應用，靈活組合能達到較好的布局效果。