Windows Phone開發之路(8) Silverlight三大版面配置容器

　　Silverlight繼承了WPF最重要的組成部分，那就是極其靈活的配置模式。使用這種配置模式，你可以將內容組織到一組不同的版面配置容器中。每個容器有其本身的布局邏輯，一種用來擺放元素(StackPanel)，另一種使用一個硬式編碼座標系(Canvas)，最後一種用來將元素排列在不可見的儲存格中(Grid)。甚至你可以建立自訂版面配置容器。

　　因為最頂層的UserControl定義了一個Silverlight頁面，僅能容納一個元素。要想裝載一個以上的元素，並且構建一個更加實用的使用者介面，你需要將容器放在網頁上，然後將其他元素添加到這個容器中。

　　Silverlight提供了三個Panel類的衍生類別來排列布局:StackPanel，Canvas和Grid。下面來分別介紹這三種版面配置容器。

StackPanel

　　StackPanel的布局邏輯是：將一組元素從上到下或從左至右排列(取決於Orientation)。

　　這裡利用StackPanel布局，它定義了一段文本和一個按鈕。代碼如下：

<StackPanel Background="White">
        <TextBlock x:Name="lbMsg" Text="Hello StackPanel" Margin="5"></TextBlock>
        <Button x:Name="btnClick" Content="Click me" Margin="5"></Button>
</StackPanel>

　　效果

Canvas

　　Canvas畫布是Silverlight三個容器中最簡單的一個。它的布局邏輯是：用精確的座標來放置元素。要在Canvas中布局元素，需要設定3個屬性：left座標，top座標以及ZIndex層。

　　要在XAML中設定附加屬性，要使用一種兩段式的文法。這兩部分用句點隔開，句點的左邊是要定義屬性類的名稱(例如Canvas)，右邊是該屬性的名稱(例如Top)。下面是關於Canvas布局的一個例子，在畫布中建立了一個矩形Rectangle和一個橢圓Ellipse，代碼如下。

View Code

<Canvas>
        <Rectangle Name="rtg1" Canvas.Left="5" Canvas.Top="5" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
        <Ellipse Name="ell1" Canvas.Left="5" Canvas.Top="60" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
</Canvas>

　　效果

　　注意，座標起始於左上方，如果沒有設定Left和Top屬性，它們都預設為0，即該元素將被放置於Canvas的左上方。

Grid

　　Grid(或稱網格)是Silverlight中最強大的版面配置容器，Grid將元素分開放置到多行和多列組成的看不見的網格中，注意，儘管網格被設計成看不見的，但是可以通過將Grid.ShowGridLines屬性設定為true來使它顯示出來。

　　建立基於Grid的布局有兩個步驟，第一，選擇想要的列數事行數。第二，給包含的元素賦予合適的行和列。

　　下面是一個建立基於Grid的布局的例子，代碼如下：

View Code

<Grid ShowGridLines="True" Background="White">
        <!--定義行和列-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!--給放入的元素賦予合適的行和列-->
        <Button Content="Top Left" Grid.Row="0" Grid.Column="0"/>
        <Button Content="Middle Left" Grid.Row="0" Grid.Column="1"/>
        <Button Content="Bottom Middle" Grid.Row="1" Grid.Column="1"/>
        <Button Content="Bottom Right" Grid.Row="1" Grid.Column="2"/>
</Grid>

　　效果

　　注意：1,沒有必要在RowDefinition或ColumnDefinition元素中提供任何資訊，如果它們為空白，Grid將讓所有的行和列均勻共用該空間。
　　　　   2,要把單獨的元素放入一個儲存格中，需要使用Grid.Row和Grid.Column這兩個附加屬性。且這兩個附加屬性都是採用0作為預設的索引數位。
　　　　   3,如果要把元素放在第一個儲存格中，可以不設定這兩個附加屬性的值，因為它們預設值為0，但最後是顯示地指定，因為這樣看起來更加清晰。

　　當然Grid還有3種尺寸調整策略和關於Grid的嵌套布局的內容可以結合實際使用的時候再去瞭解，今天要總結的就是這三種版面配置容器，下一篇將要總結的內容是關於Silverlight動畫，希望大家繼續支援，謝謝！