练习 - 使用 Template Studio 编写应用

已完成

Template Studio for WPF 是一个 Visual Studio 扩展,它通过基于向导的体验加速创建 Windows Presentation Foundation (WPF) 应用。 生成的 WPF 项目包含格式标准的可读代码,纳入了最新 Windows 功能,同时还实现了经过验证的模式和最佳做法。

Template Studio 有何用途?

Template Studio 完成了创建代码的困难工作;使你无需每次开始编写 WPF 应用时都不得不手动编写这些代码。 只要在开始之前清楚了解应用结构,就可以使用向导逐步完成向项目添加功能和视图的过程。 完成后,可继续添加实现项目专属功能的代码。

安装 Template Studio

如果你在“自动安装工具”模块中使用过安装脚本,Template Studio 就可供使用。 如果需要自己安装这些工具,请转到此 Visual Studio 扩展网站,再选择“下载”。

使用 Template Studio 创建应用

接下来介绍使用 Template Studio 创建假设应用的过程。 随时都可以在你自己的计算机上跟着一起操作。

首先,让我们简要地描绘一下应用的功能。 这样做有助于在一张纸上简单地勾画出应用的功能,以及视图的互连方式。 本示例假设要生成天气预报应用。 在本教程结束时,我们会生成应用的“框架”,你随时可以添加与天气相关的重要功能。

应用将:

  • 使用“导航视图”控件来切换不同的视图。
  • 在空白页面上显示本周天气符号。
  • 使用 WebView 控件中的地图显示当前的天气预报区域。
  • 使用列表详细信息格式显示长期预报。
  • 包含可便于用户更改设置的“设置”页面。
  • 使用通知提醒用户注意危险天气。

至此,已确定这些细节,可以使用 Template Studio 向导来创建项目了。

  1. 要打开 Template Studio 向导,请选择“文件”>“新建”>“项目”,在 Visual Studio 中创建一个项目。 在查找 Template Studio 时,可以查找 Template Studio for WPF。
  2. 将应用命名为“Weather”,然后选择“创建”以启动向导。 Screenshot that shows the Configure your new project window for a Template Studio app in Visual Studio.
  3. Template Studio 向导随即打开。
  4. 在“项目类型”页上,选择“导航窗格”,然后选择“下一步”。 Screenshot that shows selecting the Navigation Pane on the Project type page of the Template Studio, and the Next button selected.
  5. 在“设计模式”页上,选择“代码隐藏”,然后选择“下一步”。
  6. 可通过“页面”页进行有趣的设置。 每种页面类型都可以添加到应用中。 可以在右侧面板中更改页面名称和顺序。 可以看到,默认添加了名为“Main”的空白页面。 天气符号位于此页面上,因此将名称更改为“CurrentForecast”。
  7. 现在添加“WebView”页面、“ListDetails”页面和“设置”页面。 Screenshot that shows all of the pages added to the app and the Next button selected.
  8. 选择下一步。 可以在“功能”页面上添加其他一些高级 Windows 功能。 现在,添加“toast 通知”。 Screenshot that shows the Toast Notification feature added to the app and the Create button selected.
  9. 对于本模块,请跳过“服务”和“测试”。 选择“创建”,以生成项目。
  10. 若要在 WebView 控件中加载某些天气信息,请在 Views 文件夹中打开 WebMapsPage.xaml.cs,并将 DefaultUrl 的字符串值更改为 https://www.msn.com/en-us/weather/maps/cloud/in-Redmond,WA

至此,项目代码已创建,可选择“运行”或按 F5 键来生成并运行项目。

Screenshot that shows the app running with the map, chart, and settings panes displayed.

你会发现,正在运行的应用相当惊艳。 你需要做的就是添加功能。 简单!