25、探索 Windows Phone 7 应用开发与 SketchFlow 原型设计

探索 Windows Phone 7 应用开发与 SketchFlow 原型设计

1. Windows Phone 7 应用开发基础

在开发 Windows Phone 7 应用时，我们可以使用一些常见的工具和技术。首先，运行应用程序时，按下 F5 或 Ctrl + F5 启动模拟器。在模拟器加载完成后，就能使用鼠标左右“滑动”来平滑滚动设备视口，查看每个 PanoramaItem 对象中的数据。操作完成后，关闭模拟器即可。

2. 查看 PanoramaItem 标记

回到 Blend 中，打开 MainPage.xaml 画板的 XAML 编辑器，会发现每个 PanoramaItem 对象都配置为从相关的数据模板中提取数据。例如：

<!--Panorama item one-->
<controls:PanoramaItem Header="first item">
  <!--Double line list with text wrapping-->
  <ListBox ItemsSource="{Binding Items}" Margin="0,0,-12,0">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <StackPanel Margin="0,0,0,17" Width="432">
          <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap"  
           Style="{StaticResource PhoneTextExtraLargeStyle}" />
          <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap"  
           Margin="12,-6,12,0"  
           Style="{StaticResource PhoneTextSubtleStyle}" />
        </StackPanel>
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</controls:PanoramaItem>

这些数据模板从应用程序的 ViewModel 类中提取硬编码数据。若感兴趣，可以查看项目的 ViewModels 文件夹中的 MainViewModel.cs 文件。

3. Panorama 控件与背景设置

每个 PanoramaItem 对象都包含在一个单一的 Panorama 控件中，该控件负责滚动动画以及在设备屏幕上显示正确的 UI 内容。除了维护 PanoramaItem 对象外，Panorama 控件还会确定使用哪个图像文件作为背景。默认情况下，新的 Windows Phone Panorama 应用程序项目会使用添加到项目中的名为 PanoramaBackground.png 的示例文件。以下是相关代码：

<!--Panorama control-->
<controls:Panorama Title="my application">
  <controls:Panorama.Background>
    <ImageBrush ImageSource="PanoramaBackground.png"/>
  </controls:Panorama.Background>

  <!--PanoramaItem controls listed here -->
  ...
</controls:Panorama>

4. 更改 Panorama 背景

若要更改默认背景图像为自定义图像文件，可按以下步骤操作：
1. 在“对象和时间线”面板中选择 Panorama 对象，找到“背景”属性。
2. 准备一个自定义图形，可通过以下方式操作：
- 选择“开始”➤“所有程序”➤“附件”➤“画图”，打开 Windows 画图应用程序。
- 打开所选的数字图像文件，点击“调整大小和扭曲”按钮（或按 Ctrl + W 快捷键），将图像大小调整为 1024 × 768 像素（与原始图像大小相同）。
3. 通过标准的保存操作，将修改后的图像保存为 PNG 文件到计算机硬盘的方便位置。
4. 返回 Expression Blend，点击 ImageSource 属性文本区域旁边的省略号按钮，更改 Panorama 控件的“背景”属性以指定自定义图形。

此时运行程序，就能看到自定义图形在背景中滚动。

5. 添加新的 PanoramaItem 对象

向 Panorama 父节点维护的集合中添加第三个 PanoramaItem 对象，可按以下步骤操作：
1. 在“对象和时间线”面板中右键单击 Panorama 对象，选择“添加 PanoramaItem”菜单项。
2. 画板会显示新的 PanoramaItem 对象，默认的 XAML 代码如下：

<controls:PanoramaItem Header="item4">
  <Grid/>
</controls:PanoramaItem>

3. 对于这个示例应用程序，可以通过“属性”面板更改 PanoramaItem 对象的 Header 属性，还可以向 Grid 布局管理器中添加新的控件或图形进行测试。例如，添加一个 Button 控件，并处理 Click 事件以通过 MessageBox.Show() 显示消息框。
4. 再次运行程序，就可以在每个 PanoramaItem 对象之间平滑滚动，同时自定义图形在背景中滚动。

6. 探索 Pivot 应用程序项目类型

Windows Phone 7 SDK 提供的另一种标准导航系统是 Pivot 应用程序。本质上，这种类型的应用程序是一种高级标签控件系统，用户可以通过点击设备屏幕顶部的样式标签，或通过水平平移（点击并向左或向右拖动）、水平轻拂手指（点击并快速向左或向右滑动手指）等输入手势在不同（相关）的信息视图之间切换。

在这种编程模型下，根布局管理器（Grid）维护一个 Pivot 对象，该对象负责维护数据页面，每个页面由一个 PivotItem 对象表示。创建新的 Windows Phone Pivot 应用程序时，初始的对象树示例如下：

7. 添加新的 PivotItem

和 PanoramaItem 对象一样，每个 PivotItem 都可以使用“属性”面板进行配置。例如，可以使用 Header 属性更改每个标签的显示。若要修改起始代码，可以按以下步骤操作：
1. 在“对象和时间线”面板中选择每个 PivotItem，相应地更改 Header 属性。
2. 可以删除每个子 Grid 中的 ListBox 控件，使用所学的任何技术构建所需的 UI。
3. 若要添加新的 PivotItem，只需在“对象和时间线”面板中右键单击 Pivot 节点，选择“添加 PivotItem”。

8. 设计 Pivot GUI 布局

此时可以自由设计 UI。例如，使用椭圆和笔工具创建一个简单的“笑脸”图形，然后通过 Shift + 右键单击选择画板上该图形的每个部分，激活“分组信息”菜单项，将这些项分组到一个新的 Grid 布局管理器中。使用“属性”面板将新的 Grid 对象命名为 mrHappyGrid，后续将使用 ControlStoryboardAction 行为与该布局管理器进行交互。同时，还可以向父 Grid 中添加一个简单的 TextBlock 控件，显示一些基本信息文本。

9. 转换 Grid

使用 Blend 动画编辑器创建一个新的故事板对象来转换布局管理器和其中包含的图形，步骤如下：
1. 在“对象和时间线”面板中点击“新建故事板”按钮，将故事板命名为 FlipHappyDude。
2. 在“对象和时间线”面板中选择 mrHappyGrid 布局管理器。
3. 使用动画时间线，在零秒标记和两秒标记处添加两个关键帧（使用“灰色鸡蛋”按钮）。
4. 找到“属性”面板的“转换”部分，将旋转投影转换的 X 和 Y 值更改为 360。
5. 在动画编辑器中选择最后一个关键帧，使用“属性”面板应用缓动效果（例如选择 Elastic Out 效果）。
6. 点击“对象和时间线”动画编辑器的“播放”按钮，测试 Grid 和其中包含的图形数据的转换。满意结果后，进入下一步。

10. 在 XAML 中控制故事板

不通过编写代码启动故事板，而是利用 Expression Blend 的内置行为对象。操作步骤如下：
1. 在“资产”面板中找到 ControlStoryboardAction 行为，将其拖到“对象和时间线”面板中的 mrHappyGrid 对象上。
2. 在“对象和时间线”面板中选择新的 ControlStoryboardAction 节点，使用“属性”面板点击 SourceName 属性的“画板元素选择器”工具。
3. 点击图形的一部分（例如左眼球），通过 EventName 属性选择一个启动事件，并为 ControlStoryboardOption 和 Storyboard 属性选择合适的值。例如，配置行为为在正确的椭圆对象中点击鼠标左键时启动 FlipHappyDude 故事板。
4. 运行程序，点击新标签的标题（或通过鼠标滑动页面），点击笑脸的左眼球，就能看到动画效果。

11. 学习更多 Windows Phone 开发资源

虽然前面的示例比较简单，但它们展示了许多有用的 Blend（和 Silverlight）编程技术。若想了解更多实际的示例，可以参考以下在线资源：
- MSDN Windows Phone 示例项目 ：访问 MSDN 在线（http://msdn.microsoft.com），点击手机图标进入在线开发门户，滚动到网页底部，点击 Windows Phone 开发 MSDN 网络门户的链接。再点击“代码示例”链接，就能找到许多可下载的示例项目，可将其加载到 Expression Blend 或 Visual Studio 2010 中。代码下载文件夹中包含一个示例项目——天气预报示例项目，打开并运行该项目，Windows Phone 模拟器会启动，可通过 XML 网络服务查看多个城市的天气状况。
- App Hub 网站 ：另一个有用的网站是 App Hub 网站（http://create.msdn.com）。这里有一个非常活跃的独立开发者社区，他们对创建、上传 Windows Phone 7 和 Xbox 360 应用程序并从中获利感兴趣。可以创建自定义个人资料，每年支付 99 美元，就可以将应用程序发布到 Windows Phone 应用商店或 Xbox LIVE 应用商店。此外，该网站还提供更多示例项目、在线视频教程和各种促销活动。

12. 应用原型设计的作用

软件开发中，有时开发者有机会构建小型应用程序，如简单的内部配置工具或个人项目，这类项目通常由单个开发者创建，不需要正式的愿景声明、数据字典、需求文档等。开发者可能会采用“编码并修复”的软件开发模型，即直接开始编码，遇到错误再进行修复。

但在构建大型编码项目时，大多数开发者和管理团队都明白正式的软件开发项目生命周期的重要性。例如，许多公司使用 Rational Unified Process（RUP）模型，该模型规范了软件项目在开发过程中通常会经历的关键迭代阶段。RUP 等软件开发方法鼓励早期使用应用程序原型设计，以模拟成品的外观和感觉。

构建应用程序原型是从客户和用户群体获取关于用户界面布局和软件基本功能满意度反馈的好方法。多年来，开发者使用各种工具创建原型，包括 Visual Studio 的 GUI 设计器。然而，应用程序原型设计存在一些“隐藏危险”：
| 问题 | 描述 |
| ---- | ---- |
| 易被误认 | 客户可能容易将原型视为“真正的”软件，因为表面上 UI 通常与功能齐全的用户界面非常相似。 |
| 重复劳动 | 获取客户反馈后，原型通常会被丢弃，这要求开发者在新的生产级项目中重新创建相同的 UI。 |
| 反馈处理难 | 许多原型设计工具既没有将客户反馈直接纳入项目的方法，也没有从这些初始设计笔记生成正式文档的方法。 |
| 修改困难 | 如果客户想对原型进行自己的修改，他们不仅需要在自己的机器上安装原型设计工具，还需要熟悉使用该工具。 |

理想情况下，应该有一个工具可以构建 UI，明确向用户表明这是一个初步的解决方案，而不是功能完整的产品。同时，该工具应允许客户直接将个人评论嵌入项目，使开发者在生成文档时能够使用这些数据。更好的是，即使客户没有用于创建原型的工具，也能查看和与原型进行交互。幸运的是，Expression Blend IDE 通过 SketchFlow 提供了这些功能。

13. SketchFlow 的作用

SketchFlow 是一组工具，允许开发团队和软件利益相关者为基于 WPF 和 Silverlight 的应用程序创建软件原型。创建 WPF 或 Silverlight SketchFlow 项目时，可以使用之前学过的相同工具和技术构建 UI，例如通过“资产”库向画板添加控件，通过“属性”面板配置其外观和感觉，将图形和动画融入原型等。

SketchFlow 的独特之处在于它还提供了一些额外的工具，允许映射和迭代应用程序 UI 的流程以及从一个“应用程序状态”到另一个状态的过渡。例如，使用 SketchFlow 地图面板，可以快速创建一组 UI 布局，当最终用户激活菜单项或通过“下一步”和“上一步”按钮推进类似向导的布局时显示这些布局。而且，在获取客户反馈时，可以轻松更改这些过渡的顺序。

除了映射应用程序的 UI 流程，Microsoft 有意将 SketchFlow 项目中每个控件的默认样式设计得简单通用，以明确表明这是一个原型而不是最终的软件产品。使用“资产”库中固有的 Sketch 样式、Sketch 形状和模拟控件，可以设计一个 UI，帮助用户关注原型的整体流程和布局，而不是字体大小、背景和前景颜色等细节。

SketchFlow 的另一个优点是，在构建和演示原型的过程中可以收集和记录客户反馈。虽然可以使用 Expression Blend 注释来实现，但 SketchFlow 播放器提供了一种更强大和交互式的方式来记录用户反馈。客户可以测试多种场景，并在浏览原型时通过注释提供反馈。

SketchFlow 原型还可以作为开发“真正”应用程序的起点。可以根据需要替换 SketchFlow 样式，将所有用户反馈提取到一个专门的 Microsoft Word 文档中，然后开始详细设计软件项目。要记住，SketchFlow 原型不仅仅是简单的绘图，而是功能齐全的 WPF 或 Silverlight 应用程序。如果进行必要的修改，就可以将原型转换为生产项目，继续构建最终应用程序。

14. 查看 SketchFlow 原型示例

了解了 SketchFlow 的功能后，通过一个内置示例项目来了解一些关键的 SketchFlow 工具。启动 Expression Blend，选择“帮助”➤“欢迎屏幕”，点击“示例”选项卡，选择 PCGamingSketch 示例项目。通过这个示例，可以在更实际的场景中看到 SketchFlow 的工作方式。

综上所述，Windows Phone 7 应用开发提供了多种导航系统和丰富的开发资源，而 SketchFlow 为 WPF 和 Silverlight 应用程序的原型设计提供了强大的工具和功能，无论是对于应用开发还是原型设计，都有很多值得探索和学习的地方。

探索 Windows Phone 7 应用开发与 SketchFlow 原型设计

15. SketchFlow 工具优势总结

SketchFlow 作为一款强大的原型设计工具，其优势显著，以下通过表格形式进行总结：
| 优势 | 详细描述 |
| ---- | ---- |
| 熟悉的操作方式 | 构建 UI 可使用与之前所学相同的工具和技术，如通过“资产”库添加控件、“属性”面板配置外观等。 |
| 流程映射与迭代 | 提供 SketchFlow 地图面板，能快速创建 UI 布局，轻松更改过渡顺序以适应客户反馈。 |
| 明确原型标识 | 控件默认样式简单通用，使客户清晰认识到这是原型而非最终产品。 |
| 反馈收集与交互 | 支持通过 SketchFlow 播放器收集客户反馈，客户可测试多种场景并进行注释。 |
| 可转换为生产项目 | 原型可作为开发“真正”应用的起点，修改后能转换为生产项目继续开发。 |

16. 开发流程对比

为了更清晰地展示传统开发与使用 SketchFlow 开发的区别，下面给出 mermaid 格式流程图：

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px

    A([传统开发]):::startend --> B(需求分析):::process
    B --> C(设计 UI):::process
    C --> D(开发实现):::process
    D --> E(获取客户反馈):::process
    E --> F{反馈满意?}:::decision
    F -->|否| C
    F -->|是| G(上线发布):::process

    H([使用 SketchFlow 开发]):::startend --> I(需求分析):::process
    I --> J(使用 SketchFlow 设计原型):::process
    J --> K(获取客户反馈):::process
    K --> L{反馈满意?}:::decision
    L -->|否| J
    L -->|是| M(基于原型开发):::process
    M --> N(上线发布):::process

从流程图可以看出，传统开发在获取客户反馈后可能需要较大幅度修改 UI 设计，而使用 SketchFlow 开发可以在原型阶段就充分收集反馈，减少后期开发的重复劳动。

17. 实际项目中的应用建议

在实际项目中应用 Windows Phone 7 开发和 SketchFlow 原型设计，可参考以下建议：
1. Windows Phone 7 开发
- 合理利用示例项目 ：MSDN 和 App Hub 网站提供了丰富的示例项目，可将其作为学习和参考的基础，快速掌握开发技巧。
- 注重用户体验 ：在设计 Panorama 和 Pivot 应用时，充分考虑用户的操作习惯，确保界面的流畅性和易用性。
- 及时更新知识 ：Windows Phone 7 技术不断发展，关注官方文档和社区动态，及时学习新的开发技术和方法。
2. SketchFlow 原型设计
- 尽早引入原型设计 ：在项目初期就使用 SketchFlow 构建原型，以便在开发前充分收集客户和用户的反馈，避免后期的重复工作。
- 鼓励客户参与 ：利用 SketchFlow 播放器的交互功能，鼓励客户积极参与原型测试和反馈，提高项目的成功率。
- 做好反馈管理 ：将客户的反馈整理成文档，在后续的开发中充分考虑这些反馈，确保最终产品满足用户需求。

18. 总结与展望

通过对 Windows Phone 7 应用开发和 SketchFlow 原型设计的学习，我们了解到 Windows Phone 7 开发提供了多种导航系统和丰富的开发资源，能够满足不同类型应用的需求。而 SketchFlow 则为 WPF 和 Silverlight 应用程序的原型设计提供了强大的工具和功能，有效解决了传统原型设计中的诸多问题。

在未来的开发中，随着技术的不断进步，Windows Phone 7 开发可能会有更多的创新和改进，同时 SketchFlow 也可能会增加更多实用的功能，进一步提高开发效率和产品质量。开发者可以持续关注这些技术的发展，不断提升自己的开发能力，创造出更优秀的应用程序。

在实际应用中，开发者可以根据项目的具体需求，灵活运用 Windows Phone 7 开发技术和 SketchFlow 原型设计方法，从项目的规划、设计到开发的各个阶段，都充分考虑用户的需求和体验，以确保项目的成功实施。同时，积极参与开发者社区，与其他开发者交流经验和心得，共同推动技术的发展和应用。