沈陽的老師詢問如何使用Silverlight設計網站，下面是說明。
3.1 網頁界面布局和鏈接設計
網頁界面布局設計，頁面之間的鏈接設計是網絡環(huán)境下的基本設計。布局設計大致可分為兩種情況，一種是“IE全屏”（IE的菜單、工具條保留，不是完全“全屏”），這種布局設計的根布局是Grid控件，可以參考WPF中有關全屏設計的內容，設計思路一樣。另一種布局設計如圖3-1所示，網頁窗口右側有滾動條，窗口有背景色（圖中是白色），網頁的內容居中，有區(qū)別于窗口背景色的背景顏色。相對于目前流行的傳統(tǒng)的網頁設計工具，Silverlight的界面設計自由度很大，控件可以隨心所欲的在界面拖動。
圖3-1
Silverlight中新建項目
3.1.1 Silverlight中新建項目
在菜單“文件”中選擇“新建項目”，項目類型中選擇Silverlight，出現(xiàn)圖3-1。
Silverlight應用程序+網站：建立服務器端和客戶端Silverlight的應用程序設計結構。
Silverlight應用程序：僅僅建立客戶端的應用設計。
Silverlight數(shù)據(jù)綁定應用程序：專門建立數(shù)據(jù)綁定應用設計。
Silverlight SketchFlow應用程序：在Silverlight環(huán)境中進行原型設計，和WPF的原型設計類似。
Silverlight控件庫：自定義控件，和WPF中的控件庫使用方法一樣。
這里，選擇“Silverlight應用程序+網站”，“SilverlightApplication2”是自動建立的項目名稱，注意選擇項目建立的位置和語言版本，使用Visual
C#語言，點擊“確定”鍵，新建的項目設計界面和文件結構如圖3-2(a)和圖3-2(b)。
圖3-2
新建的項目文件結構
圖3-2(a)是新建項目的設計界面，MainPage.xaml是界面設計文件，默認是白色背景的空白窗口，在【對象和時間線】上看到界面的根元素是頁面“UserControl”，而不是WPF中的窗口元素“Windows”。
圖3-2(b)中展示了新建項目的文件結構，第一行是項目的解決方案名，其中包含兩個項目文件夾，一個是客戶端應用項目文件夾“SilverlightApplication2”，一個是服務器端應用項目文件夾“SilverlightApplication2Site”。后者項目文件夾中的Default.html是本項目方案生成發(fā)布后的網頁文件，默認情況下，MainPage.xaml的界面就是Default.html的界面，客戶端設計的界面會自動發(fā)布到服務器端。
3.1.2
網頁界面布局和頁面鏈接設計
圖3-3
網頁界面和鏈接設計示例
圖3-3顯示的是設計示例，看到的是IE瀏覽器下頁面顯示內容居中、右邊有滾動條的界面，先介紹這種界面的設計方法。
1. 頁面內容居中、帶滾動條的界面設計
（1）新建項目Example3.1，如圖3-2(a)，其中根布局LayoutRoot的控件是Grid。
（2）選中【對象和時間線】面板中的根布局LayoutRoot，這時可以設置整個網頁窗口的背景Background，這里采用默認的白色。點鼠標右鍵出現(xiàn)快捷菜單如圖3-4，更改布局類型為ScrollViewer”，這樣在瀏覽器的右側就能看到垂直滾動條。
圖3-4 更改布局類型
（3）將Canvas控件放入根布局中，頁面內容全部部署在此控件內，這是一個可以自由放置控件的布局，很人性化，沒有表格限制。設置其Background，設置其寬度Width為800，高度Height也為800。
（4）選中【對象和時間線】面板中的UserControl，將其Width和Height全部設為“自動”，這是保證頁面在IE窗口居中的一步關鍵設置，可以保證任何分辨率下頁面內容居中。運行程序就會看到頁面居中、帶滾動條的界面。
圖3-5 “UserControl”寬度和高度的調節(jié)
如果手動拖拉界面窗口UserControl而不破壞已經設置的寬高的“自動”狀態(tài)，要注意調節(jié)圖標，如圖3-5所示，黑色箭頭指向非自動狀態(tài)調節(jié)，白色箭頭指向自動狀態(tài)調節(jié)。
（5）鏈接設置
圖3-3中有一個白色的鏈接條區(qū)，其中設置了“本項目中Page”、“本機其他網頁”、“網站”、“全屏界面”、“Border應用”和“Frame應用”等幾個鏈接。鏈接條是Grid控件，鏈接文本全是TextBlock文本，名稱依次為tb1、tb2、tb3、tb4、tb5和tb6。對應的鏈接代碼分別是：
//鏈接到本項目中的頁面Page1
private void tb1_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
this.Content=new Page1();
}
//鏈接到本機其他網頁，其中blend文件夾在服務器端
private void tb2_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
System.Windows.Browser.HtmlPage.Window.Navigate(new
Uri("blend/blend.html",UriKind.Relative));
}
//鏈接到網站
private void tb3_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
System.Windows.Browser.HtmlPage.PopupWindow(new
Uri("http://www.sohu.com"),null,null);
}
//鏈接到本項目中的頁面（全屏界面）
private void tb4_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
this.Content=new Page2();
}
后面兩個鏈接的代碼和這個類似，不再重復。
其中Page1和Page2是本項目中的頁面，在菜單“文件”中選擇“新建項”、或者選擇客戶端項目名稱右擊，在出現(xiàn)的快捷菜單選擇“添加新項”，在出現(xiàn)的窗口中選擇“Page”就可以添加新的頁面。和MainPage.xaml頁面相比，Page頁面的根元素是“Page”，其寬度Width和高度Height默認是“自動”方式，不需要手動設置。默認的根布局LayoutRoot也是Grid控件，但Background默認是無畫筆，需要再設置，頁面居中、帶滾動條界面的其余設置方法和上面一樣。Page頁面的寬度和高度調整要參照圖3-5操作。
(2012-04-17 18:57:23)
