Как настроить плитки на начальном экране для классических приложений (приложения среды выполнения Windows)

Статья
12/12/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 с одинаковым цветом фона начального экрана.

Плитки Microsoft Office для Windows 8 и Windows 8.1

Если вы решите продолжить настройку плитки, то должны будете использовать особый 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 или одну из следующих предопределенных строк:
- black (черный)
- silver (серебристый)
- gray (серый)
- white (белый)
- maroon (малиновый)
- red (красный)
- purple (сиреневый)
- fuchsia (розовый)
- green (зеленый)
- lime (травяной)
- olive (оливковый)
- yellow (желтый)
- navy (темно-синий)
- blue (синий)
- teal (сине-зеленый)
- aqua (голубой)

Примеры обоих способов выразить значение цвета приведены здесь:


<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" — скрывать имя
Имя приложения может отображаться только на плитке среднего размера (150 x 150).

Имя приложения берется из файла ярлыка приложения в меню "Пуск", а если ярлыка нет, то из исполняемого файла.


<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: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.


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

Этап 5: Указание изображений

Необязательно
Укажите изображения без полей вместо значка и фона по умолчанию.
Поддерживаются только плитки среднего (150 x 150) и малого (70 x 70) размеров.
Действуют обычные ограничения в отношении изображения плитки:
- Размеры не более 1024 x 1024 пикселей
- Размер файла не более 200 КБ
- Типы файлов: PNG, JPG, JPEG или GIF

Важно Пользовательское изображение необходимо задавать в обоих атрибутах — Square150x150Logo и Square70x70Logo. Если задать только один атрибут, то весь XML-файл игнорируется и к плитке применяется стиль по умолчанию (значок приложения и фон).

Согласно рекомендациям по проектированию плиток, если плитка не является живой, она не должна требовать дополнительное пространство экрана, необходимое для широкой (310 x 150) и большой (310 x 310) плиток. Поскольку плитки классических приложений всегда являются статическими и никогда не бывают живыми, эти дополнительные размеры плиток не поддерживаются в данной схеме.

В данном примере изображения находятся в папке "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	Квалификаторы по умолчанию. Требуется хотя бы один квалификатор (языка, масштаба и т. п.).

Создайте файл Resources.pri. Выполните следующую команду, которая по созданному файлу конфигурации TestAppConfig.xml создает файл Resources.pri в каталоге CreateResources.


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 необходимо обновить ярлык, иначе он будет игнорироваться. Это можно сделать многими способами. Далее показан пример команды Windows PowerShell для вымышленного приложения Contoso.


(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.

При диагностике вы также можете проверить просмотр события для события 28032 в журналах приложения и служб \Microsoft\Windows\Shell-Core\Operational. Подробные данные о событии включают путь файла .VisualElementsManifest.xml, код ошибки HRESULT и строку ошибки, если она доступна.

Работа с системой управления ресурсами

Хотя подробное объяснение работы с системой управления ресурсами выходит за рамки данного раздела, здесь приведен ее краткий обзор. Подробнее: Система управления ресурсами.

В полный набор изображений ресурсов входит следующее:

отдельное изображение для каждого уровня масштабирования (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>