想要說些什么，卻不知道從哪開始。”形而上謂之道，形而下謂之器”。與其坐而論道，不如腳踏實地，從最實用的地方開始。
我們先來看看wpf中的grid控件。grid控件是個網格的布局控件，類似於網頁中的table。我們看看一個例子：
1 <Grid x:Name="condtionGrid" Height="130"> 2 <Grid.ColumnDefinitions> 3 <ColumnDefinition></ColumnDefinition> 4 <ColumnDefinition></ColumnDefinition> 5 <ColumnDefinition></ColumnDefinition> 6 <ColumnDefinition></ColumnDefinition> 7 8 </Grid.ColumnDefinitions> 9 <Grid.RowDefinitions> 10 <RowDefinition></RowDefinition> 11 <RowDefinition></RowDefinition> 12 <RowDefinition></RowDefinition> 13 14 </Grid.RowDefinitions> 15 16 <Label Content="數據庫表中文名稱："/> 17 <TextBox Grid.Column="1" TextWrapping="Wrap" Text="{Binding TableShowName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtTableShowName"/> 18 <Label Content="搜索框默認顯示：" Grid.Column="2"/> 19 <TextBox Grid.Column="3" TextWrapping="Wrap" Text="{Binding SearchDefaultShowName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtSearchDefaultShowName"/> 20 <Label Content="首頁標題：" Grid.Row="1"/> 21 <TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding PageIndexTitle,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtPageIndexTitle"/> 22 <Label Content="自定義字段：" Grid.Row="1" Grid.Column="2"/> 23 <TextBox Grid.Row="1" Grid.Column="3" TextWrapping="Wrap" Text="{Binding SelfDefineField,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtSelfDefineField"/> 24 <Label Content="自定義字段描述：" Grid.Row="2"/> 25 <TextBox Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" Text="{Binding SelfDefineFieldDescribe,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtSelfdescribe"/> 26 27 </Grid>
運行后：
這是一個常規的grid的用法，它定義了一個3行4列的表格。也許你看到這里，覺得這個比較簡單有什么好說的。如今的web設計，講求響應式設計，grid也可以做到響應式。啥是響應式？我覺得我們的頁面能夠適應不同的分辨率的設備，而不會導致頁面布局的亂套。我們看看grid如何做到這一點？
修改我們上面的代碼：
1 <Grid x:Name="condtionGrid" Height="130"> 2 <Grid.ColumnDefinitions> 3 <ColumnDefinition Width="auto"></ColumnDefinition> 4 <ColumnDefinition Width="1.5*"></ColumnDefinition> 5 <ColumnDefinition Width="2*"></ColumnDefinition> 6 <ColumnDefinition></ColumnDefinition> 7 8 </Grid.ColumnDefinitions> 9 <Grid.RowDefinitions> 10 <RowDefinition></RowDefinition> 11 <RowDefinition></RowDefinition> 12 <RowDefinition></RowDefinition> 13 14 </Grid.RowDefinitions>
運行后：
圖1
圖2
第一列，我們定義為auto，自動寬度，其實是按內容的最小寬度來計算的。
第二列，1.5*，第三列，2*，第四列，沒有定義寬度，其實，默認值為1*。
這些帶*的寬度定義，wpf在繪制界面的時候，會按比例計算當前列的寬度。假設當前屏幕寬度為w,第一列的寬度為x,剩余寬度：z=w-x,那么第二列的寬度計算為：z*1.5/（1.5+2+1），剩下列的寬度計算同理。圖1和圖2，是不同屏幕下的運行結果。
有人看到這里會覺得，這個也是比較簡單的。“道生一，一生二，二生三，三生萬物。”，所謂復雜的東西都是從最簡單的開始，本質的東西永遠都是最簡單的，但不明了。如果需求比較復雜的話，grid也就變復雜了，因為它可以嵌套使用。
好了，grid的控件的布局，我就點到為止。