Silverlight导航系统全解析

### Silverlight 导航系统全解析 在开发 Silverlight 应用程序时，导航是一个至关重要的功能，它决定了用户如何在不同页面和内容之间进行切换。本文将详细介绍 Silverlight 中多种导航相关的技术和方法，包括元素隐藏、根视觉管理、页面状态保留、子窗口的使用以及 Frame 和 Page 控件的导航系统等。 #### 元素隐藏 在创建动态页面时，除了添加和移除内容，还可以临时隐藏元素。通过设置 `Visibility` 属性可以实现这一功能，该属性定义在 `UIElement` 基类中，所有元素都继承了此属性。`Visibility` 属性使用一个枚举，提供了两个值：`Visible` 和 `Collapsed`（WPF 中还有 `Hidden` 值，但 Silverlight 不支持）。 ```csharp panel.Visibility = Visibility.Collapsed; ``` 当元素被隐藏时，它不会在页面中占用空间，也不会接收任何输入事件。页面的其他部分会自动调整大小以填充可用空间，除非使用 `Canvas` 等布局容器以固定坐标定位其他元素。 此外，可以结合 Silverlight 动画来创建元素收缩、压缩或移动的效果，动画结束后再将 `Visibility` 属性设置为 `Collapsed` 永久隐藏元素。 #### 根视觉管理 传统的页面切换方法是将新内容插入现有布局中，但这种方法并不适用于所有场景。一种替代方法是使用简单的布局容器作为应用程序的根视觉，根据需要加载和卸载用户控件。 ```csharp // This Grid will host your pages. private Grid rootGrid = new Grid(); private void Application_Startup(object sender, StartupEventArgs e) { // Load the first page. this.RootVisual = rootGrid; rootGrid.Children.Add(new MainPage()); } ``` 可以通过从 `Grid` 中移除当前页面并添加新页面来切换到另一个页面。为了简化这个过程，可以在 `App` 类中添加一个静态方法： ```csharp public static void Navigate(UserControl newPage) { // Get the current application object and cast it to // an instance of the custom (derived) App class. App currentApp = (App)Application.Current; // Change the currently displayed page. currentApp.rootGrid.Children.Clear(); currentApp.rootGrid.Children.Add(newPage); } ``` 使用示例： ```csharp App.Navigate(new Page2()); ``` 还可以添加 Silverlight 动画和图形来创建更美观的页面过渡效果。 #### 页面状态保留 如果允许用户频繁在复杂页面之间导航，创建每个页面一次并将页面实例保留在内存中是有意义的。这样可以保持页面的当前状态，包括输入控件中的所有值。 首先，需要一个系统来识别页面，使用枚举可以更好地防止错误： ```csharp public enum Pages { MainWindow, ReviewPage, AboutPage } ``` 然后，在自定义应用程序类的私有字段中存储应用程序的页面： ```csharp private static Dictionary<Pages, UserControl> pageCache = new Dictionary<Pages,UserControl>(); ``` 在 `Navigate()` 方法中，仅在需要时创建页面： ```csharp public static void Navigate(Pages newPage) { // Get the current application object and cast it to // an instance of the custom (derived) App class. App currentApp = (App)Application.Current; // Check if the page has been created before. if (!pageCache.ContainsKey(newPage)) { // Create the first instance of the page, // and cache it for future use. Type type = currentApp.GetType(); Assembly assembly = type.Assembly; pageCache[newPage] = (UserControl)assembly.CreateInstance( type.Namespace + "." + newPage.ToString()); } // Change the currently displayed page. currentApp.rootGrid.Children.Clear(); currentApp.rootGrid.Children.Add(pageCache[newPage]); } ``` 使用示例： ```csharp App.Navigate(Pages.MainWindow); ``` 由于页面只创建一次并在应用程序的生命周期内保留在内存中，因此在导航离开并返回时，页面的所有状态都将保持不变。 #### 浏览器历史记录 上述导航方法的一个限制是浏览器不知道页面的切换。如果希望用户能够返回上一页，需要自己添加相应的控件。浏览器的后退按钮只会将用户带到上一个 HTML 页面，从而退出 Silverlight 应用程序。如果要创建与浏览器更有效集成并支持后退按钮的应用程序，则需要使用 `Frame` 和 `Page` 类。 #### 子窗口 在许多情况下，不需要更改页面，只需要临时显示一些内容，然后允许用户返回主应用程序页面。在 Silverlight 中，可以使用 `ChildWindow` 控件来实现这种设计。 `ChildWindow` 本质上模仿了 Windows 平台上的模态对话框。显示子窗口时，应用程序的其他信息将被禁用，并显示一个灰色遮罩作为提示。子窗口出现在页面顶部居中位置，用户完成任务后，代码关闭子窗口，应用程序的其他部分恢复响应。 ```mermaid graph TD; A[主页面] --> B[点击按钮]; B --> C[显示子窗口]; C --> D[用户完成任务]; D --> E[关闭子窗口]; E --> A[返回主页面]; ``` ##### 设计子窗口 在显示子窗口之前，需要使用 XAML 模板创建它，就像设计用户控件一样。在 Visual Studio 中，右键单击解决方案资源管理器中的项目名称，选择“添加” -> “新建项”，然后选择“Silverlight 子窗口”模板，输入名称并点击“添加”。Visual Studio 将创建新的 XAML 模板和代码隐藏文件，并添加对 `System.Windows.Controls.dll` 程序集的引用。 ```xml <controls:ChildWindow x:Class="Navigation.UserInformation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" Title="UserInformation"> <Grid x:Name="LayoutRoot" Margin="2"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"> ```