沈阳的老师询问如何使用Silverlight设计网站，下面是说明。
3.1 网页界面布局和链接设计
网页界面布局设计，页面之间的链接设计是网络环境下的基本设计。布局设计大致可分为两种情况，一种是“IE全屏”（IE的菜单、工具条保留，不是完全“全屏”），这种布局设计的根布局是Grid控件，可以参考WPF中有关全屏设计的内容，设计思路一样。另一种布局设计如图3-1所示，网页窗口右侧有滚动条，窗口有背景色（图中是白色），网页的内容居中，有区别于窗口背景色的背景颜色。相对于目前流行的传统的网页设计工具，Silverlight的界面设计自由度很大，控件可以随心所欲的在界面拖动。
图3-1Silverlight中新建项目
3.1.1 Silverlight中新建项目
在菜单“文件”中选择“新建项目”，项目类型中选择Silverlight，出现图3-1。
Silverlight应用程序+网站：建立服务器端和客户端Silverlight的应用程序设计结构。
Silverlight应用程序：仅仅建立客户端的应用设计。
Silverlight数据绑定应用程序：专门建立数据绑定应用设计。
Silverlight SketchFlow应用程序：在Silverlight环境中进行原型设计，和WPF的原型设计类似。
Silverlight控件库：自定义控件，和WPF中的控件库使用方法一样。
这里，选择“Silverlight应用程序+网站”，“SilverlightApplication2”是自动建立的项目名称，注意选择项目建立的位置和语言版本，使用VisualC#语言，点击“确定”键，新建的项目设计界面和文件结构如图3-2(a)和图3-2(b)。
图3-2新建的项目文件结构
图3-2(a)是新建项目的设计界面，MainPage.xaml是界面设计文件，默认是白色背景的空白窗口，在【对象和时间线】上看到界面的根元素是页面“UserControl”，而不是WPF中的窗口元素“Windows”。
图3-2(b)中展示了新建项目的文件结构，第一行是项目的解决方案名，其中包含两个项目文件夹，一个是客户端应用项目文件夹“SilverlightApplication2”，一个是服务器端应用项目文件夹“SilverlightApplication2Site”。后者项目文件夹中的Default.html是本项目方案生成发布后的网页文件，默认情况下，MainPage.xaml的界面就是Default.html的界面，客户端设计的界面会自动发布到服务器端。
3.1.2 网页界面布局和页面链接设计
图3-3网页界面和链接设计示例
图3-3显示的是设计示例，看到的是IE浏览器下页面显示内容居中、右边有滚动条的界面，先介绍这种界面的设计方法。
1. 页面内容居中、带滚动条的界面设计
（1）新建项目Example3.1，如图3-2(a)，其中根布局LayoutRoot的控件是Grid。
（2）选中【对象和时间线】面板中的根布局LayoutRoot，这时可以设置整个网页窗口的背景Background，这里采用默认的白色。点鼠标右键出现快捷菜单如图3-4，更改布局类型为ScrollViewer”，这样在浏览器的右侧就能看到垂直滚动条。
图3-4 更改布局类型
（3）将Canvas控件放入根布局中，页面内容全部部署在此控件内，这是一个可以自由放置控件的布局，很人性化，没有表格限制。设置其Background，设置其宽度Width为800，高度Height也为800。
（4）选中【对象和时间线】面板中的UserControl，将其Width和Height全部设为“自动”，这是保证页面在IE窗口居中的一步关键设置，可以保证任何分辨率下页面内容居中。运行程序就会看到页面居中、带滚动条的界面。
图3-5 “UserControl”宽度和高度的调节
如果手动拖拉界面窗口UserControl而不破坏已经设置的宽高的“自动”状态，要注意调节图标，如图3-5所示，黑色箭头指向非自动状态调节，白色箭头指向自动状态调节。
（5）链接设置
图3-3中有一个白色的链接条区，其中设置了“本项目中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(newUri("blend/blend.html",UriKind.Relative));
}
//链接到网站
private void tb3_MouseLeftButtonDown(object sender,System.Windows.Input.MouseButtonEventArgs e)
{
System.Windows.Browser.HtmlPage.PopupWindow(newUri("http://www.sohu.com"),null,null);
}
//链接到本项目中的页面（全屏界面）
private void tb4_MouseLeftButtonDown(object sender,System.Windows.Input.MouseButtonEventArgs e)
{
this.Content=new Page2();
}
后面两个链接的代码和这个类似，不再重复。
其中Page1和Page2是本项目中的页面，在菜单“文件”中选择“新建项”、或者选择客户端项目名称右击，在出现的快捷菜单选择“添加新项”，在出现的窗口中选择“Page”就可以添加新的页面。和MainPage.xaml页面相比，Page页面的根元素是“Page”，其宽度Width和高度Height默认是“自动”方式，不需要手动设置。默认的根布局LayoutRoot也是Grid控件，但Background默认是无画笔，需要再设置，页面居中、带滚动条界面的其余设置方法和上面一样。Page页面的宽度和高度调整要参照图3-5操作。
