编程 Windows 10：UWP 焦点（第 3 章）

• 下载源代码 - 122.1 KB

引言

本文继续我关于在 UWP 范式下为 Windows 10 桌面开发应用程序的系列文章。您可以阅读以下两篇介绍本系列开始的文章：

• 编程 Windows 10：UWP 焦点（N 中的第 1 部分）[^]
• 编程 Windows 10：UWP 焦点（N 中的第 2 部分）[^]

计划有变

我本章的构想 是 曾是编写一个具有多种功能的应用程序，以便我们开始了解实际面对创建 UWP 应用程序的挑战是怎样的。然而，当您阅读本文的背景介绍时，您会看到我掉进了一个 UWP 的“兔子洞”，因为我必须面对如何正确设置图形资源以使应用程序看起来专业的挑战。

每日日记基础

这款应用程序将是一款每日日记类型的应用，它会将您的每日条目保存为 RTF（富文本格式）。UWP 开发中可用的 Windows 控件使得创建和保存 RTF 文件非常容易。我过去曾编写过一个类似的 WinForm 应用程序，所以对它的外观和工作方式有大致的了解。

这是要求列表和原始应用程序的快照（它看起来不怎么样，但确实是我几乎每天都在使用的实用工具）。

要求列表

• 允许用户创建基于日期的条目，而无需每次保存新日记条目时都要求她提供文件名。
• 根据创建日期命名文件。
• 允许用户为一天创建多个条目。
• 按月列出条目，以便用户可以看到每个月创建的所有条目。

每日日记功能

• 当用户打开应用程序时，它会默认显示当前日期，并在右侧打开一个空白条目。
• 用户可以开始输入笔记、添加网页链接等。
• 用户可以创建多个条目，这些条目显示在右侧作为附加的选项卡。当用户创建新条目时，当前条目会自动保存。用户无需提供文件名。
• 条目会被统计，左下角的列表控件会显示包含条目的日期以及条目数量。
• 如果用户点击列表框中的任何一个日期条目，条目就会加载到右侧，供用户阅读。
• 更改月份会加载该月的条目。

背景

这就是我本篇文章的初衷，但当我开始深入研究时，我发现首先获得一个能在任务栏上显示的图标更为重要，这样我们才能轻松识别正在运行的应用程序。这时我便掉进了 UWP 的“兔子洞”。

注意： IMO，我花了太多时间写这篇可能反响不大的文章，但它可能对其他人了解开发人员需要处理的各种事情很有价值。我希望您觉得它至少有一些意思。

兔子洞文章

我为这篇文章似乎偏离了我提到的应用程序而道歉*。我本人在过去几天里曾因极度的沮丧而多次停止写作，但我将其包含在内，因为它是在 UWP 范式下开发应用程序的现实。

*作者承诺：第四章将回到构建每日日记应用程序，在这篇文章读完后，您将拥有一个创建项目图形资源的有效方法，这样以后我就不必再解释了。

我决定写这篇文章的原因

我首先是一名软件开发人员，我最感兴趣的是设计和编写代码。然而，编写代码的整个目的是创造一个有用的解决方案，而且我是一个实用主义者，我喜欢只在创造有用的东西时才编写代码。

应用必须看起来漂亮

然而，人们通常不会尝试一个不好看的应用程序，即使我不是图形设计师，我也知道让应用程序看起来漂亮很重要。问题在于，您可能会花费太多时间在图形程序上。所以，我会尽量不在这方面花费太多精力，但我确实想触及您为在 UWP 体系下创建最专业的应用程序所需要做的一切。

免版税艺术品：一次性购买

因为我是一名软件开发人员而不是图形艺术家，所以我不会创作精美的图形。幸运的是，有一个很棒的网站（最近被 Adobe 收购），您可以用一次性低成本获得非常好的免版税图形：http://fotolia.com^。

您可以购买各种格式和分辨率的图片，所以我将用于每日日记应用程序的图标集只花了 3.00 美元。您无需订阅，可以购买积分，然后购买单个图片。

我将使用图标集作为徽标、图标等。如果您在该网站上搜索，可以以一次性低价获得一些非常漂亮的免版税图形。

创建新项目：每日日记

我做的第一件事是创建一个名为 DailyJournal 的新的空白 UWP 应用程序。

您可以在文章顶部下载源代码，其中将包含带有最终应用程序图标的项目。

学习设置图形资源

Microsoft 在这里提供了关于 UWP 图形资源的权威指南。

它实际上不算难读，但内容相当长，所以我将尝试将其摘要作为我们设置应用程序的指导。

为什么 UWP 下的图形资源如此复杂？

理解 UWP 最初的架构师试图解决什么问题，有助于我们理解资源系统为何如此复杂。

UWP 架构师胃口很大

UWP 架构师试图创建一个资源系统，能够解决所有平台上的所有人的所有问题（这总是极其困难的）。

UWP 架构师试图解决什么问题？

1. 提供适用于各种尺寸设备的尺寸，使其在任何尺寸的设备（手机、Microsoft Surface、笔记本电脑、台式机）上看起来都很棒。
2. 确保图标包含一个覆盖区域，操作系统可以利用该区域提供关于应用程序用途的额外线索。
3. 确保图标具有对比度，以便在各种平台（手机、Surface、笔记本电脑等）上都能轻松看到。

WinForm 开发资源通常更简单

过去（WinForm 开发），您只需创建一个特定尺寸的图标，例如 32x32 像素。您会尽力使其看起来最好，然后就完成了。除了提供一些额外的尺寸以在不同分辨率下看起来更好之外，您不必过多考虑系统如何使用图标。是的，在该系统下仍然有一些令人烦恼的事情——但我们已经有 20 多年的时间来适应它们了。 :)

UWP 开发：更多的责任

在 UWP（通用 Windows 平台）下，开发人员需要牢记更多的责任，因为图标和徽标在 Windows 10 和 Windows 应用商店中有特定的用法，并且图形必须在任何尺寸或类型的设备上都能正常工作。UWP 下一个显而易见的问题是，图标不仅仅用于显示您的图标图像。Windows 10 有时还会使用它在图标上叠加显示信息。所有这些原因都是 UWP 需要如此多不同尺寸图标和徽标的原因。这对我们软件开发人员来说是相当压倒性的，因为我们不是图形设计师，而且我们可能不太热衷于逐像素地调整图形。

让我有点抓狂

个人而言，这让我抓狂，因为我更感兴趣的是编写代码。在 WinForms 中，Windows 开发人员可以在一个小世界里生活，而不必认识宇宙中已知的每一种设备。这是我们前进过程中将要面对的挑战之一，如果 UWP 能够生存下去的话。

任务栏图标

这背景信息有点多，而且对我来说保持专注一直是个挑战，所以让我们先从简单地获得一个显示在任务栏上的图标开始。

在我们让应用程序的用户界面看起来更好之后，我们可以稍后修复启动屏幕，因为通常启动屏幕可能是正在运行的应用程序的快照。

检查资源文件夹

让我们快速看一下模板自动添加到项目中的图像列表。

任务栏图标发现

我逐一修改了每个图像，直到看到任务栏图标发生了变化。

您需要更改的文件是 Square44x44Logo.targetsize-24_altform-unplated.png，它会改变任务栏图标。

这些被称为目标资源，我猜是因为它们以特定大小为目标。

这是用于任务栏图标的图像

Win+Tab（或 Alt+Tab）图标

当您执行 Win+Tab（或 Alt+Tab）以显示正在运行的应用程序列表时，也会使用此图标。

Windows 10 分屏助手

当您将一个应用程序分屏到屏幕的一侧时，操作系统（OS）会显示一个正在运行的应用程序列表，让您可以选择另一个应用程序分屏到另一侧，此时也会使用此图标。

GIMP：GNU 图像处理程序

我使用开源应用程序 GIMP 来轻松修改图像。您可以在以下网址免费获取该应用程序：https://www.gimp.org/^。它大约需要 80MB 下载，安装也不算太麻烦。对于一款免费的图形设计/照片编辑应用程序来说，它拥有惊人的功能，可以与 Adobe Photoshop 相媲美。

这是我为我的应用程序使用的图标

从文件资源管理器访问资源

我们将直接从文件资源管理器访问图像文件。如果您想知道当前项目的文件的位置，可以通过在解决方案资源管理器中选择项目来轻松获取文件路径。当您选择项目时，您会在属性窗口中看到项目文件夹（路径）。

您可以单击右侧的路径，选中所有内容并粘贴到您的文件资源管理器窗口中，即可快速到达项目路径。您在解决方案资源管理器中看到的文件夹将在该路径下可用。

下图显示了文件夹和文件的部分列表，其中包括 Assets 文件夹。

这是我修改文件以创建图标的步骤。

步骤 1

启动 GIMP 并从 Assets 文件夹中打开 Square44x44Logo.targetsize-24_altform-unplated.png。

第二步

在单独的 GIMP 窗口中打开我从 Fotolia.com 购买的图标文件。

步骤 3

复制我希望代表我应用程序的图标。

步骤 4

切换到打开了 Square44x44Logo.targetsize-24_altform-unplated.png 的 GIMP 窗口，并将我的图标作为新图层粘贴进去。

粘贴图标将覆盖原始的 X 图标图层，新图像的大小不正确，因此我们需要调整它的大小。

只有显示的那个小角落是实际可见的图标大小。我们粘贴的图层太大了，并且没有完全显示出来。UWP 图标创建方面的更多挑战。

步骤 5

选择 GIMP 的“缩放”工具来调整图层大小。

当您点击图层（在右侧窗口中，选择缩放工具后）时，它会激活 GIMP 的缩放窗口，您可以在其中输入您希望图层设置的尺寸（宽度和高度）。

按比例缩放图像

我们希望它按比例缩放，所以点击断开的链条，使其链接 `Width` 和 `Height` 设置（以便按比例缩放）。

步骤 6

将 `Width` 设置为 `24`（我们的最大宽度），然后按 Tab 键进入 `Height` 字段。当您这样做时，`Height` 值将按比例计算。

注意！ 尽管模板在文件名中将此图标命名为 44x44，但实际图标是 24x24，这不是很奇怪吗？当然，图标文件名中确实包含 `targetsize-24`（Square44x44Logo.targetsize-24_altform-unplated.png），但这一切感觉都有些糟糕。

步骤 7

点击 **[Scale]** 按钮，图层就会缩小到指定大小。

您可以看到图标现在宽度是正确的（符合我们提供的图标模板设置的原始大小）。但是，有几个问题：

• 它没有正确居中。
• 它有一些白色背景，我们不希望出现在我们的图标中——我们希望有一个透明背景，这样图标无论放在什么颜色的背景上看起来都会正确。

步骤 8

点击“视图”菜单项，将鼠标悬停在出现的“缩放（100%）”菜单项上，会显示另一个子菜单，我们想放大图像到 400%，所以选择相应的菜单项。

擦除白色背景需要透明度

现在您可以看到我们的图标带有模糊的白色背景。

GIMP 魔术棒：按颜色选择

步骤 9

在 GIMP 中选择魔术棒工具，这样我们就可以神奇地删除所有白色背景。

第 10 步

点击图标周围的白色区域，它将被选中并闪烁，表明它已被激活。

第 11 步

点击 **[Delete]** 按钮，白色背景将被删除，该区域将变得透明。

删除任何其他白色区域

图标周围可能还有其他白色区域——在我的例子中，您可以看到顶部和底部仍然有白色。我将采取同样的步骤来删除这些白色区域。

我不断点击颜色区域并按 **[Delete]** 键，直到它看起来干净。

当然，您仍然可以看到背景中的 **[X]** 框（无意冒犯）。我暂时保留该图层，以便用它来对齐我们的新图标。之后，我们将删除该图层。

第 12 步

在 GIMP 中选择 **移动** 工具，以便我们可以拖动图层。

第 13 步

抓住图标图层（单击并拖动），并将其调整为在背景的 **[X]** 框上方居中。这将确保当图标出现在任务栏和其他我们之前提到的位置时，它会显示在正确的位置。

这已经足够满足我们的需求了。

现在，我们只需要去掉那个 **[X]** 框背景。

第 14 步

在 GIMP 中打开 **图层** 窗口，并选择包含 **[X]** 框背景的图层。

第 15 步

选中后，您可以点击 **[Trashcan]** 图标，该图层将被从图像中删除。

第 16 步

终于到了将更改保存回原始文件的时候了。为此，请转到 GIMP **[File...]** 菜单，然后选择 **[Export to Square44x44Logo.targetsize-24_altform-unplated.png]**。

终于完成了。

因为我们直接修改了项目使用的图像，所以现在我们可以（终于）回到 Visual Studio 运行应用程序，我们的任务栏上将显示一个图标。

现在就运行应用程序，看看效果吧。

在 Visual Studio 中微调图标

您会发现仍然需要对图标进行一些微调。您可以双击“解决方案资源管理器”中的图标，此时会激活一个图标编辑器。继续双击“解决方案资源管理器”中的新图标（文件名），您会看到类似以下内容：

正如您所见，这是一个极度放大的视图，因为这是一个像素编辑器。您可以在此视图中更改单个像素，但除非您是图形设计师或对此类事务有丰富的经验，否则您可能会觉得困难。对于那些只需要编辑一两个像素的情况，它还是很有用的。

结论

您是否厌烦了所有这些图形设计工作？我也是。然而，如果我们决定创建专业的应用程序，这是一个必要的烦恼。

修改后的启动屏幕

如果您下载了相关的源代码，您会看到，在检查资源时，我修改了启动屏幕作为测试。

如果您阅读了本文，那么至少您现在有了一个在未来修改图像资源的有效方法。

下一篇文章：第四章

在第四章，我们将回到我最初的构想，创建每日日记及其功能。我们将添加至少三个新的 Windows 控件（`RichEditBox`、`DatePicker` 和 `ListView`），并学习它们的 XAML 和一些实际功能代码。

图形资源许可免责声明

虽然您可以使用本文中的任何代码，并且可以构建和使用相关的应用程序，但请理解，您无权重用相关的图形资源。我拥有该许可，因为我从 Fotolia.com 购买了它，但该许可不适用于任何人。如果您想使用这些图标，您需要购买自己的许可。

历史

• 2017-11-26 - 文章发布