Silverlight 4 - 导航

 努力，继续记录，好好练练我的耐心，加油，一定追到”她”。

  切入正题，今天抽些时间看导航模板，下面是我的笔记，嘿嘿，尽量拍砖，求虐。

1，  新建个项目，选择Silverlight navigation Application，名字为SilverlightNavigation

接着就OK到底，之前有说过中间的步骤。

2，  看看项目结构

 

大体结构都说过(可看http://blog.csdn.net/xuzhongnangs/archive/2010/10/30/5976605.aspx)，今天主要看MainPage.xaml，Views和Assets下的文件。

MainPage.xaml是创建Silverlight的窗体，可称为主窗体

Styles.xaml是Silverlight的样式文件，就像HTML中的CSS文件一样。

About.xml，Home.xaml是子窗体，导航所指向的页面。

ErrorWindow.xmal是指当导航指向出错时，所弹出的错误提示窗体。

3，  看下MainPage.xaml自动生成的代码

  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">

   Grid定义由列和行组成的可变网格区域，Style属性是样式属性，里面的值是引用Styles.xaml文件中的对应值。

<Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">

Border在所包含的对象的周围绘制边框、背景或同时绘制二者。

<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}"  Source="/Home"Navigated="ContentFrame_Navigated"NavigationFailed="ContentFrame_NavigationFailed">

     Frame支持导航到 Silverlight 页面和从 Silverlight 页面导航的控件，导航的主体控件。

Source设置默认的导航页面。 Navigated事件是指当导航到正确的页面时，发生的事件。

NavigationFailed事件是指导航到错误页面时发生的事件。错误指导航找的页面找不到。

<navigation:Frame.UriMapper>

                  <uriMapper:UriMapper>

                   <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>

                   <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>

                  </uriMapper:UriMapper>

                </navigation:Frame.UriMapper>

            </navigation:Frame>

        </Border>

     UriMapper元素可当作一个映射引擎。你可以用Uri设置的终端来映射MappedUri终端，使得它更容易阅读并且不会丢失任何技术配置。你以后还可以修改它，让它映射到其它地方。

<Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}">

      <Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}">

         <StackPanel x:Name="BrandingStackPanel" Style="{StaticResourceBrandingStackPanelStyle}">

     StackPanel将子元素排列成一行或列。

     <ContentControl Style="{StaticResource LogoIcon}"/>

     ContentControl表示单项内容的控件。可将的删除，看看页面导航键那有什么变化，就更明白。

     <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}"

                               Text="Application Name"/> </StackPanel>

      TextBlock显示少量文本的轻量控件，感觉像lable控件。

   <Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}">

       <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">

<HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}"

                NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>

      HyperlinkButton导航按钮。NavigateUri设置单击 HyperlinkButton 时要导航到的 URI。TargetName设置网页应在其中打开的目标窗口或框架的名称。Content设置文本内容

         <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>

         Rectangle绘制一个矩形形状

          <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}"

                 NavigateUri="/About" TargetName="ContentFrame" Content="about"/>

                </StackPanel>

            </Border>  

       </Grid>

    </Grid>

    MainPage.xaml.cs文件这里先不讲，里面写的是那两个的处理事件。

   在这里要注意，配置映射的<uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>是按顺序配备的，有时你写的配置，顺序一乱就会报错，来个例子看下。

在Views下建个test的文件夹，再在里面建个Silverlight Page页面。

接着在MainPage.xaml写下对应的映射和hyperlinkbutton。

<uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>

 <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/test/{pageName}.xaml"/>

 <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>

<HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}"

      NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>

          <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>

<HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}"

      NavigateUri="/About" TargetName="ContentFrame" Content="about"/>

  <HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}"

       NavigateUri="/test/page1" TargetName="ContentFrame" Content="test"/>

启动时报错

如果把urimapping的顺序该下

<uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>

<uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>

 <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/test/{pageName}.xaml"/>

不会报错

这是你的映射写法不好造成的。

你现在把那的test的改成

<uriMapper:UriMapping Uri="/test/{pageName}" MappedUri="/Views/test/{pageName}.xaml"/>

位置就不受影响了。

 

当你觉的这个导航的样子不给力，你可以到style.xaml文件修改它的样式，也可到

http://gallery.expression.microsoft.com/zh-CN/site/search?persist=True&f%5B0%5D.Type=RootCategory&f%5B0%5D.Value=themes

下载样式模板，直接覆盖我们的style.xaml文件即可。

 

多动手，才可明白真理，哪些控件，样式或者属性不懂就删除下，看看界面变的怎么样，有助快速了解。