3.1 网页界面布局和链接设计
网页界面布局设计，页面之间的链接设计是网络环境下的基本设计。布局设计大致可分为两种情况，一种是“IE全屏”（ IE的菜单、工具条保留，不是完全“全屏”），这种布局设计的根布局是Grid控件。另一种布局设计网页窗口右侧有滚动条，窗口有背景色（图中是白色），网页的内容居中，有区别于窗口背景色的背景颜色。
3.1.1 Silverlight 中新建项目
在菜单“文件”中选择“新建项目”，项目类型中选择 Silverlight，出现图3-1。
Silverlight应用程序 +网站：建立服务器端和客户端Silverlight的应用程序设计结构。
Silverlight应用程序：仅仅建立客户端的应用设计。
Silverlight数据绑定应用程序：专门建立数据绑定应用设计。
Silverlight SketchFlow应用程序：在 Silverlight环境中进行原型设计，和WPF的原型设计类似。
Silverlight控件库：自定义控件，和 WPF中的控件库使用方法一样。
图3-1 Silverlight中新建项目
这里，选择“Silverlight应用程序+网站”，“SilverlightApplication2”是自动建立的项目名称，注意选择项目建立的位置和语言版本，使用Visual C#语言，点击“确定”键，新建的项目设计界面和文件结构如图3-2(a)和图3-2(b)。
图3-2 新建的项目文件结构
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(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是本项目中的页面，在菜单“文件”中选择“新建项”、或者选择客户端项目名称右击，在出现的快捷菜单选择“添加新项”，在出现的窗口中选择“Page”就可以添加新的页面。和MainPage.xaml页面相比，Page页面的根元素是“Page”，其宽度Width和高度Height默认是“自动”方式，不需要手动设置。默认的根布局LayoutRoot也是Grid控件，但Background默认是无画笔，需要再设置，页面居中、带滚动条界面的其余设置方法和上面一样。Page页面的宽度和高度调整要参照图3-5操作。
2. 全屏界面设置
Page2.xaml是本示例的全屏设置界面，如图 3-6所示。
全屏设置和前面设计的关键差别是页面内容放置在 Grid控件中，而不是Canvas中。当然Grid的宽高都是自动方式。图3-6中，Grid布局被分成多个区域，控件元素放置在区域内，或占据多个局域，这和WPF中窗口尺寸变化、窗口元素跟随变化时的设置是一致的。
Silverlight中的全屏有两种情况，一种是 IE窗口下的全屏，这时IE的菜单、工具条依然保留；一种是系统窗口全屏，这时IE已经不可见，看到的全是设计的网页。图3-6中有一个链接条区，其中有三个文本链接“返回首页”、“系统窗口全屏”和“IE全屏”，链接的代码分别是：
图3-6 全屏设置界面
//返回首页
private void tb1_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.Content=new MainPage();
}
//系统窗口全屏，操作后会出现提示“按 Esc键退出”
private void tb2_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
Application.Current.Host.Content.IsFullScreen
=!Application.Current.Host.Content.IsFullScreen;
}
//IE全屏
private void tb3_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
if (Application.Current.Host.Content.IsFullScreen==true){ Application.Current.Host.Content.IsFullScreen
=!Application.Current.Host.Content.IsFullScreen;
}
}
（以上摘自南开大学出版社2012.7月份即将出版的《WPF和Silverlight教程》）