使用 DataStore 的 Expression Blend 数字猜测器

• 下载 NumberGuesser - 251.82 KB
• 下载 LoginExample - 5.06 MB

Expression Blend DataStore - 设计师的强大工具

实时示例

• 链接: Expression Blend 数字猜谜游戏

Microsoft Expression Blend 4+ 提供了一个名为 DataStore 的工具。它是一个非常强大的工具，供设计师在 Expression Blend 中创建功能，而无需编写任何代码。为了演示它的一些能力，我创建了一个没有代码的数字猜谜程序。

带 SketchFlow 的 DataStore

如果您在计算机上安装了 Expression Blend 帮助文档，此链接应会带您到 SetDataStoreValueAction 行为的文档。但是，我仍然需要 Microsoft 的Unni Ravindranathan 来解释该工具的主要应用场景。基本用法如下：

在 Expression Blend 的 SketchFlow 项目中创建一个登录屏幕。

获取一个 SetDataStoreAction 行为并将其拖到登录按钮上。

在行为的属性中，将事件名称选择为Click，然后单击通用属性下的属性旁边的下拉列表，并选择创建新属性...

输入UserName作为属性名称，然后单击确定。

然后单击值旁边的高级选项框。

选择数据绑定...。

将其绑定到UserName TextBox的文本。

如果单击数据选项卡，您可以选择DataStore，您将看到刚刚创建的UserName属性。您可以单击编辑数据存储值图标来编辑这些值。

默认值为“Value”。

您可以单击框将其清除。如果需要，您还可以更改值类型。

接下来，创建一个已连接的屏幕。

然后，您可以将 UserName 属性从 DataStore 拖到新屏幕的页面上。

回到主屏幕，将登录按钮上的导航到设置为导航到新屏幕。

按 F5 键运行 SketchFlow。您可以在用户名框中输入一个名字，然后单击登录。

它将切换到下一个屏幕，并显示您输入的名称。

这在以下情况下也很有帮助，例如，让用户在一个屏幕上选中一个复选框（“将我添加到邮件列表”），然后在另一个屏幕上设置状态（显示“请输入您的电子邮件地址”框）。

一个数字猜谜程序

请记住，SketchFlow 应用程序实际上只是一个具有一些额外功能的 Silverlight 应用程序。因此，我们可以在普通的 Silverlight 应用程序中使用 DataStore 。

我做的第一件事是创建一个简单的 UI（我知道，这是“糟糕设计”中的第一个词，但如果我添加太多样式，您可能会感到困惑，因为在这个示例中所有内容都在 UI 中）。

上图显示了什么绑定到了什么。

我创建了一个包含两个属性的数据存储：Turns（一个数字）和Status（一个字符串）。

然后，我仅使用 SetDataStoreValueAction 和 ChangePropertyAction 行为完成了应用程序。

SetDataStoreValueAction 行为

我将三个 SetDataStoreValueAction 行为拖到了 SubmitButton 上。

IncreaseTurns 行为会在用户每次猜错时增加 Turns 值。

• 注意 Trigger 类型是 EventTrigger （稍后我们将演示 DataStoreChanged Trigger）。
• EventName 是 Click。
• 通过单击条件下的条件列表旁边的“+”来设置条件。
• 顶部比较值绑定到 AnswerStatus TextBlock 的值。
• Correct 是必须不等于顶部比较值才能启用此行为的值。
• 将 Turns 属性选为要修改的 Property 。
• 数字一设置为要设置的值。
• 选中 Increment 框以指示该值要添加到任何现有值。

SetCorrectStatus 行为在 Guess 和 Number_To_Guess 相等时更改 Status 值为Correct。

• 顶部比较值绑定到 Guess TextBox。
• 底部比较值绑定到 Number_To_Guess TextBox。
• 要修改的 Property 设置为 Status Property。
• 要设置的值设置为Correct。

（SetWrongStatus 行为类似于 SetCorrectStatus 行为，但逻辑相反。）

ResetButton 包含两个行为，它们在被单击时都会触发。

ResetTurns 行为重置 Turns 属性。

它简单地将 Turns 属性设置为 0。

ResetStatus 行为重置 Status 属性。

它将 Status 属性设置为空。

ChangedPropertyAction 行为和 DataStoreChanged Trigger

AnswerStatus 只是一个 TextBlock （一个标签），但我给它添加了两个行为。行为类型是 ChangedPropertyAction 行为。

实际上，这些行为将由 DataStore 属性的变化触发，所以它们并不是真正在 AnswerStatus TextBlock 上。我只是将它们放在那里，因为这似乎是一种有组织的逻辑方式。

将每个行为拖到 TextBlock 上后，我会选择 New 来更改 TriggerType。

我选择 DataStoreChangedTrigger。

• 选择 Status 作为 Property （将触发行为的属性）。
• Status 也选为顶部条件（条件不应与可以触发行为的属性混淆）。
• 将 Correct 设置为 Status 必须等于的值才能触发行为。
• 选择 AnswerStatus TextBlock 作为要修改的元素。
• Foreground 是要修改的 TextBlock 上的属性。
• 选择纯色画笔，并选择蓝色。

（WrongStatus 行为类似于 CorrectStatus 行为，但逻辑相反。）

为设计师（非程序员）提供更强大的 Expression Blend

Expression Blend 团队一直在不断引入功能，使非程序员能够创建 Silverlight 应用程序。主要目的是让非程序员能够使用“模型视图样式”来设计 Silverlight 应用程序。但是，没有理由将该功能仅限于此目的。

XAML 是一种强大的标记语言，能够使用高级但易于使用的工具生成视觉上令人惊叹的应用程序。我相信 Expression Blend 团队才刚刚起步，未来的 Expression Blend 版本将允许程序员和非程序员做一些真正了不起的事情。

历史

• 2010 年 5 月 31 日：初始帖子