65.9K
CodeProject 正在变化。 阅读更多。
Home

Silverlight 3 应用程序的丰富导航

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2009 年 7 月 2 日

CPOL

7分钟阅读

viewsIcon

35824

轻松为企业级应用程序添加高级导航,UI控件专为 Microsoft Silverlight 3 的新导航功能而设计。

Infragistics® NetAdvantage® for Web Client - Silverlight 控件,专为企业级应用程序而设计,为您提供流畅导航用户体验的工具,直接整合了 Microsoft Silverlight 3 的新功能,如导航框架。在本文中,我将向您展示一些您可以使用这些最新的、原生的 Silverlight 3 控件增强您的 Microsoft® Visual Studio® 2008 工具箱所能够创建的丰富、出色的 Web 应用程序。

如果您已经熟悉 Infragistics 所利用的 Silverlight 3 的新导航功能,并想直接获取免费试用版,请从此处下载免费试用版

易于导航的 Silverlight 3 树形视图

无数应用程序都依赖于其内容和/或功能的层级分类。无论是使用传统的文件夹进行文档管理,还是通过互联网流式传输实时更新的博客内容的 RSS 订阅源,树形视图都是您的用户已经非常熟悉的。xamWebTree™(发音为zam-Web-Tree)最能体现父子关系。

图 1 – Infragistics xamWebTree 允许用户直观地浏览博客 RSS 订阅源,从而帮助他们快速轻松地找到相关内容。

xamWebTree 可以在非绑定模式或绑定模式下运行。在非绑定模式下,您可以自定义填充树节点,这对于许多即时编码的场景非常方便。

<igTree:XamWebTreeItem Content="Corporate">
  <igTree:XamWebTreeItem Content=”HR Announcements” />
  <igTree:XamWebTreeItem Content=”Press Releases” />
  <igTree:XamWebTreeItem Content=”New Employees” />
</igTree:XamWebTreeItem>
列表 1 - XAML 展示了在“公司 RSS 订阅源”类别下如何轻松定义非绑定树节点。

在数据绑定模式下,您可以在 XAML 中(或以编程方式)指定层级数据模板,这些模板可以将您自己的数据结构适配成树形结构,以呈现给您的用户。

<igTree:XamWebTree ItemsSource="{Binding Path=CategorisedRssFeeds}" >
  <igTree:XamWebTree.HierarchicalItemTemplate>
    <!-- These are the child RSS feeds -->
    <ig:HierarchicalDataTemplate ItemsSource="{Binding Path=RssFeeds}">
      <ig:HierarchicalDataTemplate.ItemTemplate>
        <DataTemplate>
          <StackPanel Orientation="Horizontal">
            <Image Source="Resources/Rss.png" Width="16" Height="16" />
            <TextBlock Text="{Binding Path=Title}" Foreground="Gray" />
          </StackPanel>
        </DataTemplate>
      </ig:HierarchicalDataTemplate.ItemTemplate>
      <!-- These are the parent RSS categories -->
      <DataTemplate>
        <StackPanel Orientation="Horizontal">
          <Image Source="Resources/Folder.png" Width="16" Height="16" />
          <TextBlock Text="{Binding Path=Title}" FontWeight=”Bold” />
        </StackPanel>
      </DataTemplate>
    </ig:HierarchicalDataTemplate>
  </igTree:XamWebTree.HierarchicalItemTemplate>
</igTree:XamWebTree>
列表 2 - 层级数据模板是创建绑定 Silverlight 树控件中父子树结构的本地 XAML 方法。

您会发现,Infragistics Silverlight 控件的企业级应用程序数据绑定遵循了 Microsoft 在极受欢迎的 Windows Presentation Foundation (WPF) 中引入的熟悉模式,Silverlight 是基于 WPF 构建的。这是 Infragistics 设计其控件以遵循 Microsoft 约定并专为 Silverlight 平台构建的一个示例。如果您已经学习了 WPF 或 Silverlight 数据绑定,那么您可以信赖 Infragistics 控件的数据绑定方式。

请注意列表 2 中 xamWebTree 对节点模板的轻松支持。所有树节点都 100% 支持模板,正如您对 XAML 这样的声明式用户界面标记语言所期望的那样。在此示例中,树节点同时包含文本标签和图标图像源,但您可以根据您的企业级应用程序的需求设计更复杂的模板。

图 2 – Infragistics xamWebTree 在一个易于导航的电子书架应用程序中展示了一本书的目录。

Silverlight 3 的 Journal-Aware Menuing (JAM)(日志感知菜单)

Silverlight 3 平台引入的一项新功能是导航框架,它考虑到了浏览器的前进/后退按钮及其对历史记录的支持。我们有多少人曾经编写过 AJAX 驱动的 Web 应用程序,结果却无法正常使用后退按钮?为什么至今仍然有一些网页警告用户不要使用后退按钮。

您是否曾见过这样的消息:“请勿按后退按钮,否则您的信用卡可能会被收取惊人的次数”(或类似的话语?)

经过几秒钟的紧张等待,用户松了一口气,因为他们的操作已经成功完成。这并不是一种令人愉快的用户体验。

为 Silverlight 2 设计和构建的导航控件无法直接利用新的导航框架(或者需要笨拙的事件处理程序来达到此目的),但 Infragistics 在设计 xamWebMenu™(发音为zam-Web-Menu)控件时,已考虑到了 Silverlight 3 引入的新功能。

图 3 – Infragistics xamWebMenu 垂直方向展示,用于一个可以通过互联网安全地交付给付费订阅者的多功能零售服务。

作为 Silverlight 3 中新的 Microsoft 导航框架的一部分,您将有一个 Frame 作为 Page 的容器,并提供关键的验证和导航服务,Infragistics 控件(如 xamWebMenu 和 xamWebEditors™)知道如何与之集成。Frame 对于前进/后退导航来说,重要的是它有一个 JournalOwnership 属性,允许您将此 Frame 连接到浏览器的历史记录(这是默认设置)或您自己的应用程序的导航历史记录。

<navigation:Frame x:Name=”MainContent” Source=”/Views/HomePage.xaml”
    JournalOwnership=”Automatic” />
列表 3 - Silverlight 3 中一个基础的 Frame 声明,它会跟踪其通过浏览器进行的导航历史记录(日志)。其他选项是使用其本地日志,或使用父 Frame 指定的日志。

如果您之前使用过 ASP.NET(2.0 或更高版本),那么最好将新的 Microsoft 导航框架中的 Frame 视为主页(master page)。然后,您将在 Views 文件夹中拥有一个或多个 Page,它们类似于用户控件,用于填充 ASP.NET 2.0 模型中的内容占位符。但是,新的导航框架使我们能够做更多的事情,例如将您的 Silverlight 企业级应用程序中的任何导航无缝地与用户的浏览器历史记录关联起来。

<navigation:Page x:Class=”Views.HomePage”
  xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
  xmlns:igMenu=”clr-namespace:Infragistics.Silverlight.XamWebMenu;
assembly=Infragistics.Silverlight.XamWebMenu.v9.1”
  xmlns:navigation=”clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Navigation”
  Title=”xamWebMenu Home Page”>
  <igMenu:XamWebMenu x:Name=”MainMenu” MenuOrientation=”Horizontal”
    NavigationElement=”{Binding ElementName=MainContent}”
    NavigationOnClick=”True” VerticalAlignment=”Top” >
    <igMenu:XamWebMenuItem Header=”File”>
      <igMenu:XamWebMenuItem Header=”New”>
        <igMenu:XamWebMenuItem Header=”Project”
          NavigationUri=”Views/NewProject.xaml” />
        <igMenu:XamWebMenuItem Header=”Solution”
          NavigationUri=”Views/NewSolution.xaml” >
          <igMenu:XamWebMenuItem.Icon>
            <Image Source=”images/NewSolution.png” />
          </igMenu:XamWebMenuItem.Icon>
        </igMenu:XamWebMenuItem>
      </igMenu:XamWebMenuItem>
    </igMenu:XamWebMenuItem>
  </igMenu:XamWebMenu>
</navigation:Page>
列表 4 - 一个简单的非绑定 xamWebMenu,位于 Navigation Framework Page 中,并集成到列表 3 中声明的 MainContent Frame 元素。

XamWebMenuItem 标签提供了多个与 Microsoft 导航框架连接的属性,包括 NavigationElement,它绑定到 Frame,该 Frame 的导航服务将被使用,并由 Frame 的日志跟踪。NavigationElement 可以在控件级别设置,从而被所有子菜单项继承。在此示例中,当用户选择“文件 | 新建 | 解决方案”时,他们可以使用浏览器的后退按钮快速回溯到之前的屏幕。您的用户会喜欢这个功能,而您则完全无需费心。

灵活导航,如同 Microsoft Outlook® 2007

您的许多用户可能熟悉 Microsoft Outlook 2007 的 UI 模式,尤其是其灵活的折叠式导航栏,它允许用户浏览收件箱、日历、联系人等等。您可以使用 Infragistics xamOutlookBar™ 在您的 Silverlight 3 企业级应用程序中模拟这些一致、熟悉的模式。

4_infragistics_silverlight_outlookbarrrrr.jpg

图 4 – Infragistics xamOutlookBar 在一个 Silverlight 3 销售团队管理参考应用程序中。

Outlook 风格的导航栏不必局限于仅用于邮件和日程安排。它在任何需要对分组或功能进行分类的应用程序中都具有广泛的适用性,提供了许多动态功能,让用户可以在您的企业级应用程序中自由地工作和导航。其可展开的组可以包含长列表,甚至嵌套的树形视图来显示详细的业务信息。正如您所期望的那样,它支持 100% 的模板自定义,因此您可以将 Infragistics xamWebTree 放入所选组的客户端区域。几乎无需您的任何工作,您就可以在短时间内获得出色的应用程序用户体验!

关于 NetAdvantage for Web Client - Silverlight 控件

这里描述的导航控件只是 Infragistics 于今年七月发布的,面向 Microsoft Silverlight 3 平台的企业级应用程序广泛工具集的一部分。您还将获得一个高性能的层级数据网格,轻量级的业务图表(更复杂的图表和地图可在单独的产品 **NetAdvantage for Silverlight Data Visualization** 中找到),强大的编辑器,多语言拼写检查,一个用于读取和写入 Microsoft Excel 文件的库,一个窗口控件,以及其他几个控件来增强您的 Microsoft Visual Studio 2008 工具箱。

这些面向企业级开发人员的 Silverlight 3 UI 控件包含在 **NetAdvantage for Web Client** 中,这是面向 Web 的 ASP.NET、ASP.NET AJAX 和 Silverlight LOB 应用程序的终极工具集。

UI 控件也包含在 **NetAdvantage for .NET** 中,该产品提供 4 个平台,1 个软件包,包括 ASP.NET、ASP.NET AJAX、Windows Forms、Windows Presentation Foundation 以及面向企业级应用程序的 Silverlight 3 的完整控件集。

立即下载这些 Silverlight 3 UI 控件的免费试用版,让您的应用程序闪耀光彩.

版权所有 © 2008-2009 Infragistics, Inc. 保留所有权利。Infragistics 和 NetAdvantage 是 Infragistics, Inc. 的注册商标。xamWebEditors、xamWebMenu、xamWebOutlookBar 和 xamWebTree 是 Infragistics, Inc. 的商标。所有其他商标或注册商标均为其各自所有者的财产。

© . All rights reserved.