鱼眼菜单的制作(一)

 

下面我们制作一个在苹果机和现在许多网站上广泛使用的鱼眼菜单。

   如果你有一个菜单，你希望点击每一个菜单然后带你到不同的页面中。你可以写代码来显示和隐藏这些页面，但银光提供的控件和向导可以使这一切变的很简单。如果你正在建设一个多页的银光应用程序，银光导航应用工程（Silverlight  Navigation  Application  project）可以给你一个很好的开端。

     用户控件可以帮助你建立一个复用的元素，这样比把所有都放在一个大的XAML文件中要易于维护。在这个例子中，菜单就是一个用户控件。动画可以让应用可视化方面变得更加有趣，并且在相应用户的交换中提供了更好的用户体验。银光具有强大的功能来变形、翻转、转换等各种可视化元素，包括复杂的元素比如布局面板。使用这些转换和动画结合后就能作出各种特效。那么我们开始吧。

1、  导航应用：

我们使用银光导航应用工程模式来初始化我们的解决方案，在Visual Studio的新建工程中有一个Silverlight Navigation Application 在这个模式中有更多的文件和内容自动生成。你也可以手动在一个现存的工程中加入导航控件，但这个工程向导可以节约很多时间。我们的目标就是建立一个鱼眼菜单来导航多个页面，所有我们来建立一个导航应用的新工程，取名MySite。

让我们看看向导给我们生成了些什么有趣的东西：

MainPage.xaml 有了一个新的控件来处理导航，它就是Frame 控件。

<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_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>

Frame控件就像ASP.NET中的模板页中的一个内容承载器，基于浏览器的URL可以让不同的内容显示出来。如果你点击了“about”链接，你就可以看到about页面显示出来，浏览器中的URL地址也被改成如下：

http://localhost:16248/MySiteTestPage.aspx#/About

锚点就是#号之后的URL的一部分。在HTML中这是很普通的，可以让用户在一个特定的页面上加书签。Frame对象的UriMapper 属性映射到一个XAML文件的锚点。在上面的XAML中，第一个UriMapping 映射一个空锚点/Views/Home.xaml 使它成为缺省的主页然后就去在Views文件夹中匹配相应的XAML文件。这就允许你在银光应用程序中对特定的页面加书签，并且可以用浏览器的前进和后退按钮了。

在Views文件夹中，你看到有Home.xaml 和 About.xaml文件。他们分别包含了home和about页面的内容。你还看到一个ErrorWindow.xaml ，它用来显示错误信息，当一个无效的锚点被定义时，就会显示。比如你改变锚点为 #/foo 你就会看到错误页面。

这个错误窗口是用ChildWindow控件来执行的。因为大多数浏览器会阻止弹出窗口，但这个子窗口是在银光控件内部真是显示的，所以不会被浏览器阻止掉。

  浏览器上的前进后退按钮并不能重新加载页面，只是改变基于锚点的Frame的内容，这就意味着比页面刷新要快的多。

我们将建立博客、照片、视频和关于页面，所以我们删除 Home.xaml 在Views文件夹中新加一个项目，命名为Blog.xaml。

看看 Blog.xaml ，你会发现它和标准银光应用程序的MainPage.xaml很相似，只是根元素是 Page ：

<navigation:Page x:Class="MySite.Views.Blog" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="640" d:DesignHeight="480" Title="Blog Page">

<Grid x:Name="LayoutRoot">

</Grid>

</navigation:Page>

同样，另外两个页面Photos.xaml和 Videos.xaml也加入Views文件夹中。About.xaml已经存在了，所以我们不需要再另外建立。为了便于看到我们处于那一张页面，在每个页面中加一个TextBlock控件，这是一个位标，等你有真实内容时可以替换。比如在Blog.xaml页面中加：

<Grid x:Name="LayoutRoot">

 <TextBlock Text="Blog"/>

</Grid>

因为我们要执行我们自己的菜单，所以我们从MainPage.xaml中删掉链接菜单。删掉名字叫LinksBorder的Border控件和所有它的内容。在MainPage.xaml.cs中还有一些响应代码，比如ContentFrame_Navigated方法，也一起删掉。

删除和增加都是很容易的，在很多例子中，这些代码和你的需要很相似，你只需要简单的修改一下就可以了。现在你在MainPage.xaml中要改一下应用的名字，我们就称为“My Silverlight Site”。最后，应为缺省页面是Blog.xaml，已经不是Home.xaml了，所有引用到主页的地方都要修改为引用Blog.xaml。现在运行程序，你就可以看到导航每张页面了。下面我们将建立自定义的用户控件来开始我们的鱼眼菜单了。