自己動手，豐衣足食——補充Silverlight的布局系統

我對Silverlight的布局系統一直感到不滿，原因無他，太過羅嗦爾。它靈活是足夠靈活了，但對於介面布局並沒有提供一個簡潔的表達機制，使得即使非常常見的介面也總是產生一大坨又臭又長的XAML，寫得累，看的人更累。特別是和競爭者Flex的布局機制比較，Flex可以說既靈活又簡單，Silverlight則是既靈活又麻煩。

Silverlight裡面常用的版面配置容器幾乎都可以挑挑毛病：

Canvas：只支援絕對座標布局使得Canvas在應用程式布局方面純粹是個雞肋，要求稍微靈活一點的介面就派不上用場了。Flex也有一個Canvas，不過Flex Canvas支援左/中/靠右對齊，並且可以指定絕對寬度或相對寬度，所以Flex Canvas比Silverlight Canvas要好用得多，在各種介面布局裡也是常見的選擇。

StackPanel：StackPanel不支援Grid的百分比布局是很大的遺憾。很多時候，我只需要單行或單列布局，但控制項則需要絕對/相對混合布局，StackPanel不能提供這種靈活性。這使得我不得不使用文法更加羅嗦的Grid。

Grid：如果和GridSplitter聯合做多面板布局的話，99%的情況下需要關心的無非是左右或上下兩個面板，而Grid和GridSplitter需要指定一大堆屬性才能正常工作，增加了無謂的負擔。

在忍受這些毛病很長時間以後，我終於決定拋開Silverlight的預設版面配置容器，自己寫一套更加方便的自訂布局管理器。你可以猜到，我寫的這套容器很大程度上參考了Flex，甚至大部分類的命名都向Flex看齊——比如HBox、VBox。和Silverlight內建類衝突的則換個名字，比如FlexCanvas類比了Flex的Canvas組件，HSplitBox相當於Flex HDevideBox，HeaderBox相當於Flex Panel。

編寫自訂容器實際上比原先想象的要簡單，無非是實現MeasureOverride/ArrangeOverride兩個方法而已。只是要考慮到各種布局情況需要仔細計算。另外一點不滿的地方是，建立Dependency Property的文法純粹是折磨人的工作。

這裡僅舉兩個常見的布局例子，你可以比較一下用自訂布局可以比預設的布局系統節省多少代碼。

例子1: 我們都很熟悉的瀏覽器地址欄，文字框隨容器自動擴充。

用Silverlight布局：<Grid>
    <Grid.ColumnDefinations>
        <ColumnDefination Width="Auto" />
        <ColumnDefination Width="*" />
        <ColumnDefination Width="Auto" />
    </Grid.ColumnDefinations>
    <TextBlock Grid.Column="0" Text="Address" />
    <TextBox Grid.Column="1" />
    <Button Grid.Column="2" Content="Go" />
</Grid>

自訂布局：<yh:HBox>
    <TextBlock Text="Address" />
    <TextBox yh:Box.Width="100%" />
    <Button Content="Go" />
</yh:HBox>

例子2：主介面的預設布局，用分割條切分為導航區和內容區，每個地區帶一個標題

用Silverlight布局：<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="6" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="0" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border>
            <TextBlock Text="功能導航" />
        </Border>
        <ctrls:TreeView Grid.Row="1" />
    </Grid>
    <ctrls:GridSplitter Grid.Column="1" HorizontalAlignment="Center" 
                        VerticalAlignment="Stretch"
                        Width="6" />
    <Grid Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border>
            <TextBlock Text="" />
        </Border>
    </Grid>
</Grid>

自訂布局：<yh:HSplitBox LeftPaneSize="200" RightPaneSize="*">
    <yh:HeaderBox Title="功能導航">
        <ctrls:TreeView />
    </yh:HeaderBox>
    <yh:HeaderBox x:Name="rightBox" Title="">
    </yh:HeaderBox>
</yh:HSplitBox>

這套布局組件已經在我們的項目中使用，目前正在重構頁面，結果表明，使用新的布局以後，絕大多數頁面可以省掉20%～45%的XAML代碼，僅剩兩個特殊頁面必須使用Silverlight Grid，可以說效果非常良好。