如何自定义桌面应用的“开始”屏幕磁贴（Windows 运行时应用）

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

从 Windows 8.1 开始，Win32 应用开发人员可以自定义“开始”屏幕上的桌面应用磁贴的外观。在 Windows 8 中，这些磁贴仅由系统提供，不能由开发人员自定义。系统根据“开始”屏幕的背景颜色在磁贴中显示应用的图标。Windows 8.1 提供了更加不同的默认磁贴外观，而且允许你使用自己的颜色和图像进一步品牌化你的磁贴。

可用于桌面应用磁贴的自定义包括：

自定义跨页图像
指定背景颜色
显示或隐藏磁贴上的应用名称的选项
在选择显示应用名称时指定的浅色或深色文本颜色

可以完全自定义磁贴，但是还应注意默认磁贴外观的更改，对你而言，这些内容可能足够了。Windows 分配给应用的默认磁贴仍然是显示应用名称和应用图标的中等磁贴。但是，从 Windows 8.1 开始，布局已发生变化，Windows 抽出了应用图标中的颜色，并在其周围提供相似的或互补的背景颜色。

下图显示了 Windows 8 和 Windows 8.1 中使用了相同的“开始”屏幕背景颜色的相同默认磁贴的外观。

为 Windows 8 和 Windows 8.1 显示的 Microsoft Office 磁贴

如果选择进一步自定义你的磁贴，可通过一个专门的 XML 文件来完成。此文件使用的方案与 Windows 应用商店应用磁贴使用的磁贴方案相似，但不要混淆这两种方案，—它们不可互换。本主题介绍创建以下示例文件，其中的 Square150x150Logo 和 Square70x70Logo 属性是可选的，但所有其他属性都是必需的。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

先决条件

了解 XML
了解命令行参数
理解图像缩放、高对比度和本地化版本的资源命名和打包。有关详细信息，请参阅如何使用限定符命名资源。

说明

步骤 1: 创建自定义 XML 文件

为你的磁贴指定自定义
放在可执行文件所在的相同目录中
命名为与可执行文件相同的名称，使用扩展名“.VisualElementsManifest.xml”。例如，对于可执行文件“contoso.exe”，相应的 XML 文件名为“contoso.visualelementsmanifest.xml”。

将以下代码添加到你创建的 XML 文件中。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements/>
</Application>

步骤 2: 声明背景颜色

必需
指定任何 RGB 十六进制值或以下预定义的字符串之一：
- 黑色
- 银色
- 灰色
- 白色
- 栗色
- 红色
- 紫色
- 紫红色
- 绿色
- 石灰色
- 橄榄色
- 黄色
- 藏青色
- 蓝色
- 凫蓝色
- 浅绿色

下面给出了两种表达颜色值的示例：


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"/>
</Application>


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="red"/>
</Application>

步骤 3: 声明是否在磁贴上显示应用的名称

必需
ShowNameOnSquare150x150Logo 属性具有两个可能值：
- “on”显示名称
- “off”隐藏名称
只有中级 (150x150) 磁贴大小可显示应用名称。

应用名称是应用的“开始”菜单快捷方式文件，或者应用的可执行文件（如果没有快捷方式文件）的名称。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"/>
</Application>

步骤 4: 声明前景文本颜色

必需，甚至在 ShowNameOnSquare150x150Logo="off" 时
指磁贴上的应用名称。
ForegroundText 属性具有两个可能值：
- “light”表示白色文本
- “dark”表示黑色文本

选择根据声明的背景颜色以最佳方式显示的值。为了最大化可视性和可访问性，将文本颜色与背景颜色之间的亮度比设置为至少 4.5:1。有关详细信息请参阅 W3C 辅助功能标准 G18：确保文本（和文本的图像）和文本后面的背景之间的对比率至少为 4.5:1。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"/>
</Application>

步骤 5: 指定图像

可选
提供跨页图像来取代默认图标和背景
仅支持中 (150x150) 和小 (70x70) 磁贴大小
具有正常磁贴图像的限制：
- 尺寸小于等于 1024x1024 像素
- 文件大小小于或等于 200 KB
- 文件类型为 .png、.jpg、.jpeg 或 .gif

要点如果你选择自定义图像，则必须针对 Square150x150Logo 和 Square70x70Logo 属性指定图像。如果仅指定其中一个属性，则忽略整个 XML 文件，并将默认样式（应用图标和背景）应用到磁贴。

磁贴设计最佳做法指定如果你的磁贴不是动态磁贴，则它不应该请求长方形 (310x150) 和大型 (310x310) 磁贴所需的额外屏幕空间。因为桌面应用的磁贴始终是静态的且绝不会是动态，因此该架构中不支持那些其他磁贴大小。

在本例中，图像位于名为“Assets”的文件夹中，该文件夹与 YourAppName.VisualElementsManifest.xml 文件同级。这些文件名称可以是真正的文件名称，也可以是用于第 6 步中讨论的缩放、高对比度，或者本地化的文件的一般性名称。请参阅“备注”一节，查阅一个关于图像资产命名的讨论。


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

现在这是完整的 .VisualElementsManifest.xml。将此文件包含在应用的安装目录中，与应用的可执行文件同级。

步骤 6: 指定呈比例的、本地化的和高对比度的图像

可选，但推荐使用
如果不提供呈比例的、高对比度或本地化的图像，可跳过此步骤
要实现最高的显示质量，可为第 5 步中指定的每个图像提供一组完整的比例资产。有关详细信息，请参阅“备注”一节。
使用正常的资源管理系统命名约定和 Resource.pri 文件

注意如果未提供一组完整的比例资产，Windows 会根据需要缩放你包含的一个或多个资产。最好包含其中一个较大大小（140% 或 180%），因为缩小通常可提供比放大好的结果。

根据更新磁贴时有效的系统设置，Windows 使用一个 Resources.pri 文件从你的资产集中选择正确的图像资产。我们将在这一步创建该文件。

**创建一个工作文件夹。**这个文件夹未包含在应用的安装目录中，它仅在创建 Resources.pri 文件期间使用。在本示例中，我们将其称为“CreateResources”。
```
md %USERPROFILE%\Documents\CreateResources
```
**创建 CreateResources 的一个子目录来保存图像文件。**在本示例中，我们将其称为“Assets”。
```
md %USERPROFILE%\Documents\CreateResources\Assets
```
将呈比例的、高对比度和/或本地化的图像放在“Assets”文件夹中。 只要遵循必需的命名和结构约定，就可以无层次列表形式或在子目录中构建的形式包含图像。出于此示例的用途，我们将以一个平面列表的形式提供呈比例的和高对比度的资产。
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png
**创建一个 MakePRI 配置文件。**这是一个 XML 文件，MakePRI.exe 使用它指定要在 Resources.pri 中为哪些图像建立索引。运行以下命令来创建该配置文件，我们将它命名为 "TestAppConfig.xml"。请注意，我们不会将该文件写入 CreateResources 文件夹。这可阻止配置文件本身包含在索引中。

要点 MakePRI.exe 命令行工具包含在 Windows SDK 中，可免费下载。如果使用 Microsoft Visual Studio，MakePRI.exe 可能已在你系统上的该安装目录中。

此命令和下一个命令假设 MakePRI.exe 位于你的路径中。如果它不在，可在“Program Files\Windows Kits”下搜索它，并将它的完整路径包含在这些命令中。
```
makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high
```
命令参数定义

/cf 你创建的配置文件的路径和名称

/dq 默认的限定符。至少需要一个限定符（lang、scale 等）。

命令参数	定义
/cf	你创建的配置文件的路径和名称
/dq	默认的限定符。至少需要一个限定符（lang、scale 等）。

创建 Resources.pri 文件。 运行以下命令，此命令将使用你刚创建的 TestAppConfig.xml 配置文件在 CreateResources 目录中生成 Resources.pri 文件。


makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri

命令参数	定义
/pr	项目文件的根位置
/cf	配置 XML 文件的路径
/in	Resources.pri 文件中的资源索引的名称。通常与应用的名称匹配。
/of	Resources.pri 文件的输出位置。如果省略，则使用由 /pr 参数指定的项目根目录。

**将 Resources.pri 文件包含到应用的安装中。**将它放在与应用的 .exe 文件和其 .VisualElementsManifest.xml 文件相同的目录中。在安装期间，应在安装应用的快捷方式文件之前将 .VisualElementsManifest.xml 放在适当的位置。

步骤 7: 重要信息！刷新快捷方式文件

如果已安装应用，则必须在新的或更新的 .VisualElementsManifest.xml 就位后微移你的快捷方式，否则它将被忽略。虽然有许多方式可以完成此任务，但以下虚拟 Contoso 应用的 Windows PowerShell 命令示例是一个如何完成此任务的模型。


(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date

备注

要点如果你的 .VisualElementsManifest.xml 文件有错误，则磁贴会还原到 Windows 提供的默认值。可能的文件错误包括无效 XML 文件、省略必需属性、无效属性值或找不到的图像。

你可以使用 MakePRI.exe 文件和 dump 命令选项来检查 Resources.pri 文件的内容。此方式可用于疑难解答。有关 MakePRI.exe 工具的详细信息，请参阅 MakePRI.exe 配置和 MakePRI.exe 命令选项。

进行疑难解答时，还可以在应用程序和服务日志\Microsoft\Windows\Shell-Core\Operational 日志中检查事件查看器以查找 28032 事件。事件详细信息数据包括 .VisualElementsManifest.xml 文件的路径、HRESULT 错误代码以及错误字符串（如果可用）。

使用资源管理系统。

全面解释资源管理系统的细节不属于本主题的介绍范围，我们仅简短概述一下。有关深入的讨论，请参阅资源管理系统主题。

一组完整的资源图像包括：

每个 DPI 缩放比例（80%、100%、140% 和 180%）的一个单独图像
每个图像的高对比度版本（黑色背景白色文本和白色背景黑色文本）
如果希望磁贴根据系统语言使用不同的图像（如图像包含文本时），也可包含本地化的图像

可提供所有这些图像或仅提供一个子集。

文件名将遵循模式 name.scale-100.ext、name.scale-100_contrast-black.ext 等。也可通过一个目录结构来提供限定符，而不是在文加名中提供。但是，在 .VisualElementsManifest.xml 文件中，你仅引用文件的根 name。例如，可为中等磁贴大小提供以下文件：

70x70Logo.scale-80.png
70x70Logo.scale-100.png
70x70Logo.scale-140.png
70x70Logo.scale-180.png
70x70Logo.scale-80_contrast-white.png
70x70Logo.scale-100_contrast-white.png
70x70Logo.scale-140_contrast-white.png
70x70Logo.scale-180_contrast-white.png
70x70Logo.scale-80_contrast-black.png
70x70Logo.scale-100_contrast-black.png
70x70Logo.scale-140_contrast-black.png
70x70Logo.scale-180_contrast-black.png

但是，在 .VisualElementsManifest.xml 文件中，仅引用我们示例中的“70x70Logo.png”。根据当前的系统设置，Windows 使用 Resources.pri 文件来从列出的所有这些选项中选择 70x70Logo 文件的正确版本。有关让此系统工作的命名约定的完整教程，请参阅快速入门：使用文件或图像资源。

桌面应用磁贴自定义 XSD

用于自定义桌面应用磁贴的方案的 XSD 如下所示。


<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  
           xmlns:xs="http://www.w3.org/2001/XMLSchema">  
  
    <xs:simpleType name="st_nonemptystring">  
        <xs:restriction base="xs:string">  
            <xs:minLength value="1"/>  
            <xs:maxLength value="32767"/>  
            <xs:pattern value="[^\s]|([^\s].*[^\s])"/>  
        </xs:restriction>  
    </xs:simpleType>  
    
    <xs:simpleType name="st_filenamecharset">  
        <xs:restriction base="st_nonemptystring">  
            <xs:pattern value=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_filename">  
        <xs:restriction base="st_filenamecharset">  
            <xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>  
            <xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>  
            <xs:maxLength value="256"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_imagefile">  
        <xs:restriction base="st_filename">  
            <xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_color">  
        <xs:restriction base="xs:string">  
            <xs:pattern value="#[\da-fA-F]{6}"/>  
            <xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_foregroundtext">  
        <xs:restriction base="xs:string">  
            <xs:enumeration value="light"/>  
            <xs:enumeration value="dark"/>  
        </xs:restriction>  
    </xs:simpleType>  

    <xs:simpleType name="st_showname">
        <xs:restriction base="xs:string">
            <xs:enumeration value="on"/>
            <xs:enumeration value="off"/>
        </xs:restriction>
    </xs:simpleType>
  
    <xs:complexType name="ct_visualelements">
        <xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>  
        <xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
        <xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>  
        <xs:attribute name="BackgroundColor" type="st_color" use="required"/>
        <xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>  
    </xs:complexType>  
  
    <xs:complexType name="ct_application">  
        <xs:all>  
            <xs:element name="VisualElements" type="ct_visualelements" />  
        </xs:all>  
    </xs:complexType>  
  
    <xs:element name="Application" type="ct_application" />  
  
</xs:schema>

通过