Silverlight 向导

• 下载源代码 - 9.51 KB

引言

本文旨在展示如何在 Silverlight 2.0 Beta 中实现一个多步骤的收集用户输入的程序。

背景

在开发业务应用程序时，您很快就会意识到用户需要简单且自导引的 UI，以便完成非常简单的任务。当必须填写大量字段，并且所有这些字段无法放在单个表单/窗口中时，我们就必须按某种标准将它们拆分，并放在不同的表单中。有时，一些输入会影响其他字段可用的选项，因此这些字段会被推到 UI 的更深处。MFC 提供了 CPropertySheet 和 CPropertyPage 类来帮助解决此类问题。结合这两个类，我们可以创建一个带有按钮集的模态窗口，允许用户翻阅输入字段的页面，并将依赖字段放在离当前页面更远的页面中。

Silverlight 不提供这样的功能，.NET 标准库也不提供。我将简要描述如何实现这一点。

这是我的实现的样子，并为完整性添加了一些额外的演示 UI。

工作原理

主要角色是 Wizard (UserControl)；它为用户布局了熟悉的 UI，在右下角有两个按钮，一个标题栏和一个页面区域。这是使用一个 3x3 的网格实现的。中间单元格 1,1 保留给页面。这个单元格被分配了一个没有自身 UI 内容的 SwitcherControl (UserControl)。SwitchPage(UserControl oControl) 函数用于切换 SwitcherControl 上的页面。

Wizard 类添加了一个 Pages **附加** **属性**，使我们能够绑定到它，并通过 XAML 添加页面。

每当点击两个按钮中的一个时，向导都会触发一个预定义的 PageEvent，使宿主页面能够监视向导活动。WizardEventArgs 传递当前页面索引、新页面索引、按钮操作（上一步、下一步、完成）以及一个可选的 Cancel 属性。此事件在页面更改之前触发；将 Cancel 属性设置为 true 将阻止预期的转换。

我试图在 Wizard 类中封装尽可能多的必要功能来演示这一点，同时遵循 OO 设计范式，并且尽可能少地包含不必要的代码。

在这个项目中，我决定尽可能多地使用绑定，因为它使实现更清晰，更容易理解。

Wizard 类提供的功能

• 设置向导标题。
• 在可用页面之间切换。
• 显示第一页时禁用“上一步”按钮。
• 在最后一页时，“下一步”按钮会更改为“完成”。
• 每次点击按钮（上一步、下一步、完成）后都会触发一个 PageEvent。
• WizardEventArgs 类包含：
  • 当前页面索引，
  • 打算移动到的页面的索引，
  • 执行的操作（上一步、下一步、完成），
  • 取消切换的选项。

可以添加的有用功能

我们还可以轻松添加以下功能；

• 用于获取/设置当前页面的属性。
• 在 PageEvent 中，提供一个选项来指定一个页面而不是序列中的下一个。
• 用于指定向导其他视觉方面的属性。
• 将向导制作成一个模态弹出窗口 - 在我的文章 Silverlight 中的模态窗口 中有介绍。

使用代码

首先创建您自己的页面 (MainPage)；在 XAML 中导入向导命名空间。在下面的代码中，我已将命名空间别名为“sl”。在您希望放置向导的部分/容器内，添加以下 XAML；

<sl:Wizard x:Name="ctrlWizard" Title="Test Wizard" Grid.Row="0"  />

上面的代码指定我们将向导放在网格行 0；我们已将其实例命名为“ctrlWizard”，并已将标题属性设置为“Test Wizard”。

下面展示了通过 XAML 向向导添加三个页面

<sl:Wizard x:Name="ctrlWizard" Title="Test Wizard" Grid.Row="0"  >
    <sl:Wizard.Pages>
      <sl:WizardPage1 x:Name="Page1" />
      <sl:WizardPage2 x:Name="Page2" />
      <sl:WizardPage3 x:Name="Page3" />
    </sl:Wizard.Pages>
</sl:Wizard>

我们可以在代码中做同样的事情；例如，在 MainPage 的 Loaded 事件中。

ctrlWizard.Pages.Add(new WizardPage1());
ctrlWizard.Pages.Add(new WizardPage2());
ctrlWizard.Pages.Add(new WizardPage3());

下面是 PageEvent 处理程序的实现。

void OnPageEvent(Wizard sender, WizardEventArgs e)
{
     _txtMsg.Text = string.Format("Action: {0}, Current: {1}, New: {2}", 
    e.Action, e.CurrentPageIndex, e.NewPageIndex);
}

关注点

• 向导页面可以是任何派生自 UserControl 的控件。页面完全不知道它们是如何被使用的。
• Wizard 类同样不知道显示哪些页面/控件以及它们的作用。