2.1 导航
导航.简单的理解可以是从一个页面跳转到另外一个页面。在传统的ASP.NET网站中这种效果很容易实现。而在Silverlight中我们也同样可以，我们有两种方法来实现这个效果。
第一个选择是使用代码更改页面视图（修改容器Content属性），移除/添加User Control来实现导航，这个方法比较简单、直接代码量也很少。并且在这个过程中还可以加入动画、变形等效果。
第二个选择就是使用Silverlight的导航系统，导航系统包含两个主要的控件：Frame、Page。基本的效果是可以在一个Frame里面切换多个页面（UserControl、Page）。
2.1.1 修改容器
先简单介绍下第一种方法。 简单的页面切换效果：
这个例子，将页面分成上下两部分，上面表示菜单，下面放置一个容器空间用于承载内容。容器控件你可以选择Border、ScrollViewer、StackPanel、Grid。下面是主页面的代码：
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="btnOne" Margin="5,5" Width="150" Height="30" Content="第一个Silverlight程序" Click="btnOne_Click"></Button>
<Button x:Name="btnTwo" Margin="5,5" Width="100" Height="30" Content="取色器" Click="btnTwo_Click"></Button>
</StackPanel>
<controls:GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Height="10" Name="gridSplitter1" />
<Border Grid.Row="2" BorderBrush="SlateGray" BorderThickness="1"
x:Name="mainFrame" Background="AliceBlue">
</Border>
</Grid>
下面是两个Button的Click事件代码：
private void btnOne_Click(object sender, RoutedEventArgs e)
{
MainPage page = new MainPage();
mainFrame.Child = page;
}
private void btnTwo_Click(object sender, RoutedEventArgs e)
{
ColorSetter setter = new ColorSetter();
mainFrame.Child = setter;
}
至此一个简单的页面切换效果就OK了。这个DEMO的效果图如下：
使用根视图（Root Visual）
上面是一个简单的例子，这个方法很常见，但不是通用方式。它的小缺陷是整个页面布局已经固定死了，工具栏或页面始终都固定在那里，那如果你想要的是一个全新的页面就不行了。下面对这个小例子进行一下扩展就可以达到我们的目的了。
首先在App.xaml.cs中声明一个Grid：
private Grid rootGrid = new Grid();
然后修改Appliaction_Startup事件代码：
this.RootVisual = rootGrid;
rootGrid.Children.Add(new Navigation());
这样只能保证在初始化的时候会有一个页面而不能导航，为此在App.xaml.cs代码中加入一个静态方法，代码如下：
public static void Navigation(UserControl control)
{
App app = (App)Application.Current;
app.rootGrid.Children.Clear();
app.rootGrid.Children.Add(control);
}
按钮调用时使用下面语句：
App.Navigation(new ColorSetter ());
2.1.2 Navigation System
它包含了两个重要的控件：Frame、Page。其中Frame控件是主要控件因为它负责导航以及显示内容。而Page控件是一个可选的控件，它可以使用普通的UserControl来代替，但两者之间稍有差别，后面会简单说一下。
1.Frame控件
Frame控件也是一个容器控件，它通过Content属性进行修改内容，当然最好是使用Navigate()方法来代替Content属性，因为它既会修改Content属性也会触发事件和保存Frame的日志（历史记录，更改当前浏览器的地址）。下面看一个简单的例子，首先定义一个两行一列的Grid，上面是一个包含了Frame的Border，下面是用来触发导航的按钮：
<Grid x:Name="LayoutRoot">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border Margin="10" Padding="10" BorderBrush="DarkOrange"
BorderThickness="2" CornerRadius="4">
<navigation:Frame x:Name="mainFrame"></navigation:Frame>
</Border>
<Button Grid.Row="1" Margin="5" Padding="5" HorizontalAlignment="Center"
Content="Go to Page1" Click="btnNavigate_Click"></Button>
</Grid>
</Grid>
</UserControl>
使Frame记得添加System.Windows.Controls.Navigation.dll引用。
然后在项目中创建一个UserControl命名为Page1,并在Main.xaml.cs的按钮事件中加入如下代码：
mainFrame.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
Uri前的“/”表示应用程序的根目录，不可以使用Navigate()方法访问应用程序以外的页面，比如其他网站的页面。同样也可以使用如下代码代替Navigate()方法：
mainFrame.Content = new Page1();
如果你观察就会发现前后的浏览器地址栏是不一样的，只修改Content属性不会触发Navigation事件
在前面我们是使用普通按钮来触发导航事件的。一般情况下Silverlight是使用HyperlinkButton来进行导航的，这个按钮使用起来相当的简单，只要设置按钮的NavigateUri属性指向页面的URI或者是在UriMapper中配置的地址都行，代码参考如下：
<StackPanel Margin="5" HorizontalAlignment="Center" Orientation="Horizontal">
<HyperlinkButton NavigateUri="/Page1.xaml" Content="Page 1" Margin="3" />
<HyperlinkButton NavigateUri="/Page2.xaml" Content="Page 2" Margin="3" />
</StackPanel>
2 Page控件
使用Page控件很简单，和向项目中添加UserControl一样。
1.Page控件属性介绍
每一个Page控件内都会有一个NavigationService属性，这个属性就相当于访问Silverlight导航系统的入口，因为它提供了与Frame对象一样的方法和属性（Navigate()、GoBack()、GoForward()，属性有CanGoBack、CanGoForward、CurrentSource等）。意思就是说在Page里面就可以进行导航了..
this.NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
Page类还含有一个NavigationContext属性用来访问NavigationContext对象。使用这个属性可以获取当前的URL，使用QueryString可以获取URL中的参数( 该方法的赋值和使用在一块，与全局变量比不会太凌乱)。也就是说你可以在跳转页面的时候使用地址栏参数传值。如下：
string uriText = String.Format("/Product.xaml?id={0}&type={1}",productID, productType);
mainFrame.Navigate(new Uri(uriText), UriKind.Relative);
这样你就可以传两个值到目标页面了 ..
然后在Priduct.xaml页面你就可以获取到值了：
int productID, type;
if (this.NavigationContext.QueryString.ContainsKey("productID"))
productID = Int32.Parse(this.NavigationContext.QueryString["productID"]);
if (this.NavigationContext.QueryString.ContainsKey("type"))
type = Int32.Parse(this.NavigationContext.QueryString["type"]);
2.2 Silverlight中的画刷
前面说过的，可以设置颜色的地方有，基本图形的边线Stroke, 填充Fill, 还有文字的颜色Foreground。当时都是直接设置成一个颜色值，如：<RectangleWidth="80"Height="60"Stroke="Blue"Fill="Red" />, 这样就有了一个边线是蓝色的红色矩形。但实际上这些可以设置颜色的属性都是画刷类型的，只是当直接写成颜色值的时候，系统自动转换成了纯色画刷。就像下面这样：
<Rectangle Width="80" Height="60">
<Rectangle.Stroke>
<SolidColorBrush Color="Blue" />
</Rectangle.Stroke>
<Rectangle.Fill>
<SolidColorBrush Color="Red" />
</Rectangle.Fill>
</Rectangle>
SliverLight中的画刷有以下几种：
SolidColorBrush: 纯色画刷。主要属性有：Color。
LinearGradientBrush: 线性渐变画刷。主要属性有：StartPoint, EndPoint, GradientStop, SpreadMethod。
RedialGradientBrush: 径向渐变画刷。主要属性有：Center, RadiusX, RadiusY, GradientOrigin, GradientStop。
ImageBrush: 图像画刷。主要属性有：ImageSource, Stretch, AlignmentX, AlignmentY。
VideoBrush: 视频画刷。主要属性有：SourceName, Stretch, AlignmentX, AlignmentY。
2.2.1 SolidColorBrush
纯色画刷比较简单，就是设置一个颜色值给Color属性。但这个颜色值可以设置成：
颜色字符串：如 Red，Blue等等。总共有256个命名的颜色串。
RGB值：如 #0099FF, #F1F1F1等等。这个跟网页中指定的颜色一样。
ARGB值：如#880099FF, 比RGB多了Alpha通道信息，用于指定透明度。
RGB还有一种方式就是如：#09F， #809F，这就是把每一位重复，这样就得到#0099FF， #880099FF。
2.2.2 LinearGradientBrush
先写个最简单的。
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="80" Height="60">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
渐变的设计挺有意思的，StartPoint和EndPoint描述了一条线，左上角是0,0, 右下角是1,1，这条线是相对于对象的大小的相对位置，也就是说，假定对象的宽度和高度都是1. 这样，不管对象是什么大小，都可以用同样的值来描述。如果不设置StartPoint和EndPoint，那么就是从左上角到右下角的一条线。这条线就是渐变的基准线。
然后每一个GradientStop中的Offset就是基于这条线上的相对位置，同样，这条线也假定长度为1. Offset就是0到1中间的一个值，也就指定了基准线上位置。再指定一个Color, 就代表从上一个点到这个点的线性渐变颜色。
那么，上面的设置就使得rectangle填充成从右上角的蓝色到右下角的红色渐变。
注意，实际上这些相对值，就是StartPoint，EndPoint, Offset都是可以设成小于0或大于1的值。
下来，再看几个例子。
横向渐变：就是把StartPoint和EndPoint设成: ( 0, 0 ) –> ( 1, 0 ), 也就是Y值不变，X值变。
纵向渐变：就是把StartPoint和EndPoint设成：( 0, 0 ) –> ( 0, 1 ), 也就是X值不变，Y值变。
多个颜色值渐变：就是多放几个GradientStop。
<Canvas>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="80" Height="60" Canvas.Left="0">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="80" Height="60" Canvas.Left="90">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="80" Height="60" Canvas.Top="70">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.2" Color="Orange" />
<GradientStop Offset="0.4" Color="Yellow" />
<GradientStop Offset="0.6" Color="Green" />
<GradientStop Offset="0.8" Color="Blue" />
<GradientStop Offset="1" Color="Purple" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="80" Height="60" Canvas.Top="70" Canvas.Left="90">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.4" Color="Blue" />
<GradientStop Offset="0.4" Color="Yellow" />
<GradientStop Offset="0.6" Color="Yellow" />
<GradientStop Offset="0.6" Color="Green" />
<GradientStop Offset="1" Color="Orange" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
第1个是横向渐变，第2个是纵向渐变，第3个是多颜色渐变，第4个是带有纯色的多颜色渐变。
最后，还有一个属性SpreadMethod, 顾名思义，这就是覆盖方法。这是当渐变没有填充完整个对象时，那么剩下的部分用什么颜色来填充。可以设的值有：
Pad: 这是默认值。就是用最后一个颜色值来填充。
Repeat: 重复。就是再从第一个颜色往后开始画渐变。
Reflect: 反射。就是从最后一个往前开始画渐变。
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="80" Height="60">
<Rectangle.Fill>
<LinearGradientBrush SpreadMethod="Repeat" StartPoint="0,0" EndPoint="0,0.5">
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.2" Color="Orange" />
<GradientStop Offset="0.4" Color="Yellow" />
<GradientStop Offset="0.6" Color="Green" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="80" Height="60" Canvas.Left="90">
<Rectangle.Fill>
<LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0,0.5">
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="0.2" Color="Orange" />
<GradientStop Offset="0.4" Color="Yellow" />
<GradientStop Offset="0.6" Color="Green" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
2.2.3 RedialGradientBrush
线性渐变定义了一条基准线，而径向渐变使用Center(圆心), RadiusX(x轴半径), RadiusY(y轴半径)，这三个属性定义了一个椭圆，GradientStop中的颜色就是从圆心到四周以椭圆渐变填充。如下面例子：
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Width="80" Height="60">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
这里没有Center, RadiusX, RadiusY, 默认这三个值分别是（0.5,0.5），（0.5），（0.5）。就是以中心点向四周渐变。
再看下面的例子, 把基准圆设成一个椭圆。
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Width="80" Height="60">
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.25">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
还有一个属性，GradientOrigin，用来设置渐变色从那里开始的。
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Width="80" Height="80">
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0,0">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Blue" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="80" Height="80" Canvas.Left="90">
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="1,0">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Blue" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="80" Height="80" Canvas.Top="90">
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0,1">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Blue" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="80" Height="80" Canvas.Top="90" Canvas.Left="90">
<Ellipse.Fill>
<RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="1,1">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Blue" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas>
最后，RadialGradientBrush也有 SpreadMethod 属性，用法跟LinearGradientBrush一样。
2.2.4 ImageBrush
ImageBrush的Stretch属性，与<Image>中的Stretch一样，这里就不说了。
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Width="80" Height="80">
<Ellipse.Fill>
<ImageBrush ImageSource="Penguins_Small.jpg" />
</Ellipse.Fill>
</Ellipse>
</Canvas>
另外，如果图像小于填充区域的话，还可以设置AlignmentX(可设为：Left, Center, Right)和AlignmentY( Top, Center, Bottom)属性来实现对齐方式。
2.2.5 VideoBrush
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="myVideo" AutoPlay="True" Source="test.wmv" Volume="4" Opacity="0"/>
<Ellipse Width="80" Height="80">
<Ellipse.Fill>
<VideoBrush SourceName="myVideo" Stretch="Fill"/>
</Ellipse.Fill>
</Ellipse>
</Canvas>
