Silverlight 2 講堂 -5：排版

這一堂課當中先介紹簡單的頁面排版動作，下堂課來介紹透明度。先參考下面的網頁：

http://www.agkdesign.net/viewr2/default.html

沒錯，我們希望可以做出這樣的效果出來。你覺得難嗎? 一點也不，透過這幾次我們學會的，你就可以完成一樣的效果了。準備好了嗎?

首先，參考Silverlight 2 講堂 -2：建立專案--使用VS 2008介紹過的步驟，建立一個新的Silverlight應用程式專案，取名為LayoutSample。接下來，將Page.xaml的背景範圍設成800x600，底色為黑色：

<UserControl x:Class="LayoutSample.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="800" Height="600">     <Grid x:Name="LayoutRoot" Background="Black">     </Grid> </UserControl>

• Grid

在Page.xaml所建立的UserControl中，預設是使用Grid控制項裝載你所建立的樣式的。Grid的使用方式跟HTML的Table控制項很像，但是Grid是先切割出裝載控制項的範圍之後，在將控制項設定到指定的範圍當中的。例如要將畫面切割成下面的區域：

那就要先使用<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>劃分出指定的範圍之後，再將控制項填進去。以這個例子來說，你可以使用下面的標籤完成版面的切割動作：

<Grid.RowDefinitions>     <RowDefinition Height="600" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions>     <ColumnDefinition Width="200" />     <ColumnDefinition Width="400" /> </Grid.ColumnDefinitions>

完成的效果如下，VS 2008會透過虛線顯示Grid切割的效果：

版面切割完之後，我們就可以在Grid加入控制項，並且透過Grid.Row與Grid.Column指定控制項所要顯示的區域：

<StackPanel Grid.Row="0" Grid.Column="0" Background="Pink"></StackPanel> <Canvas Grid.Row="0" Grid.Column="1" Background="LightBlue"></Canvas>

完成的結果如下：

這裡為了讓大家看出Grid的效果，所以我沒有將第二個Column的Width設為600，所以在加入粉紅色的StackPanel控制項與粉藍色的Canvas控制項之後，右邊會有一塊黑色的區域，這是原本Grid的底色。

• StackPanel

如果要讓控制項可以按照水平或是垂直的順序方式排列，你可以使用StackPanel控制項。StackPanel控制項提供了Orientation屬性，你可以設為Horizontal(水平排列)或是Vertical(垂直排列)，控制項就會按照指定的方式排列。例如我們可以將剛剛加進來的StackPanel控制項的Orientation屬性設為Horizontal，然後再加入三個Button控制項，此時三個按鈕會由左至右水平排列：

若將Orientation屬性值改為Vertical，結果如下：

若是要針對StackPanel的樣式做進階的修改的話，那就要使用Expression Blend 2.5開啟LayoutSample專案，然後選取StackPanel控制項之後，就可以從[Properties]-->[Layout]視窗中設定。例如在Layout視窗中按下垂直至中按鈕之後(黃色圓圈處)，StackPanel的按鈕就會置中對齊了。順便你可以在Layout視窗中，將StackPanel的左右Margin調整為10，這樣按鈕就不會黏到左右邊界了：

但是現在三個Button控制項預設是連在一起的，有沒有辦法可以分開呢? 在[Objects and Timeline]視窗中，你可以按下展開StackPanel控制項的按鈕(黃色圓圈處)，接著我們就可以針對StackPanel控制項中的個別按鈕做設定了：

選取按鈕之後，你可以將每個按鈕的上下邊界設為30，高度調整為100。完成的結果如下：

 

最後將StackPanel的底色取消，再利用上次介紹過的方式，將Button控制項的底色調整為漸層，按鈕的部分就設定完成了!

*** 在這裡順便教各位一個小技巧，當你設定好第一個按鈕的顏色之後，可以透過[Brushes]視窗中的新增筆刷的按鈕( ) ，將筆刷設定儲存為[Local Resource]。將來在設定顏色時，就可以將建立過的筆刷設定重複使用在其他的按鈕或是控制項的顏色設定喔!!

• Canvas

Canvas就是簡單的畫布，你可以在上面加上控制項之後，設定控制項相對於Canvas邊界的位置。例如在目前Grid的右邊就有一個Canvas，你可以在Canvas中加入一個矩形：

然後從Blend設計工具的[Objects and Timeline]視窗中，按下展開Canvas控制項的按鈕，就可以設定Canvas控制項中的Retangle了。你可以透過滑鼠移動Retangle控制項的位置，然後到[Properties]-->[Appearance]視窗中，透過RadiusX與RadiusY的屬性，將Retangle控制項的邊界調整為圓角：

接下來透過[Brush]視窗調整Retangle控制項的底色，最後重設Canvas控制項的底色。完成之後的Page.xaml如下圖：

因為這是一個圖片播放器，所以接下來在Silverlight應用程式專案的Project視窗中，按下滑鼠右鍵，透過[Add Existing Item]選項，加入一個320x240的圖片(透過VS 2008方案總管加入也可以)：

然後直接從Project視窗中將圖片拖曳到設計工具中，調整其大小與位置之後，完成圖片瀏覽器的外觀如下：

這次的練習就先做到這邊，下次我們再來為這一個圖片瀏覽器加入一些動態的效果。