Краткое руководство. Использование файловых и графических ресурсов (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
Вы можете добавить изображения и другие файловые ресурсы к своему приложению и ссылаться на эти файлы из приложения. Чтобы реализовать поддержку выбора приложений на основе параметров высокой контрастности или встроенную подгонку под расширение в среде выполнения Windows, следуйте приведенным ниже инструкциям по именованию и организации файловых ресурсов в папках.
Инструкции
Создание изображений и других файловых ресурсов для различных конфигураций отображения (значений DPI) и уровней контрастности
Создайте изображения в нескольких рекомендуемых размерах, чтобы ваше приложение хорошо выглядело при загрузке операционной системой Windows соответствующего ресурса. См. раздел Рекомендации по масштабированию в зависимости от плотности пикселей.
Создайте несколько вариантов каждого изображения:
- Исходный размер, который используется типичным устройством с разрешением 96 точек на дюйм. Назовите этот файл name**.scale-100.**ext. (В этой и всех последующих инструкциях name означает выбранное имя ресурса, а ext — расширение файла. .scale-100 — это сегмент имени ресурса, определяющий поведение масштабирования среды выполнения Windows; именно в этой части имени следует использовать соглашения, описанные в данном документе.)
- 140 % от исходного размера. Например, изображение размером 100 x 100 пикселей должно также иметь версию размером 140 x 140 пикселей. Назовите этот файл name**.scale-140.**ext
- 180 % от исходного размера. Например, изображение размером 100 x 100 пикселей должно также иметь версию размером 180 x 180 пикселей. Назовите этот файл name**.scale-180.**ext
- 240 % от исходного размера (для приложений Windows Phone). Например, изображение размером 100 x 100 пикселей должно также иметь версию размером 240 x 240 пикселей. Назовите этот файл name**.scale-240.**ext
- Высококонтрастное изображение с черным фоном и белым передним планом в исходном размере. Назовите этот файл name**scale-100_contrast-black.**ext
- Высококонтрастное изображение с белым фоном и черным передним планом в исходном размере. Назовите этот файл name**scale-100_contrast-white.**ext
Примечание Изображения логотипа приложения также используют ресурсы, определенные в файле манифеста приложения. Если вы используете конкретное изображение для логотипа приложения, необходимо создать его копию размером 80 % от исходного. Например, изображение логотипа размером 100 x 100 пикселей должно также иметь версию размером 80 x 80 пикселей. Назовите этот файл name**.scale-80.**ext. Дополнительные сведения см. в разделах Выбор изображений для вашего приложения и Визуальные активы плиток и всплывающих уведомлений.
Поместите все изображения в одну папку структуры вашего приложения. Например:
- images/logo.scale-100.png
- images/logo.scale-140.png
- images/logo.scale-180.png
- images/logo.scale-240.png
- images/logo.scale-80.png
- images/logo.scale-100_contrast-black.png
- images/logo.scale-100_contrast-white.png
Добавление ссылок на изображения в коде HTML без квалификаторов
Для ссылки на этот файловый ресурс из разметки используйте формат name.ext. (Мы намеренно пропускаем сегмент, определяющий масштабирование или контрастность; среда выполнения Windows добавляет этот сегмент самостоятельно при извлечении соответствующего ресурса.) Например:
<img src="images/logo.png" />Добавление ссылок на изображения в коде без квалификаторов
Для ссылки на этот файловый ресурс из кода используйте формат name.ext. (Мы намеренно пропускаем сегмент, определяющий масштабирование или контрастность; среда выполнения Windows добавляет этот сегмент самостоятельно при извлечении соответствующего ресурса.) Отличие от инструкций для разметки, приведенных выше, заключается в том, что разметка может предполагать схему и корневой объект в связи с контекстом файла разметки. Однако в случае с кодом это невозможно; при создании нового класса Uri для кода требуются схема и части корневого объекта универсального кода ресурса (URI). Например:
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);Для файла логотипа добавьте ссылку на изображение в манифесте без квалификаторов
Откройте файл Package.appxmanifest в Microsoft Visual Studio. Откройте вкладку Визуальные активы.
Отредактируйте ссылку в манифесте, чтобы она указывала на файл ресурсов. Она показана в качестве поля для редактирования текста по умолчанию. При указании имени файла ресурса пропустите сегмент квалификатора. Например, в поле Квадратный логотип 150 x 150 значение может быть следующим:
images\logo.png
Файловые ресурсы и глобализация
Инструкции в этом разделе посвящены квалификаторам ресурсов, включающим поддержку масштабирования и контрастности. Они используют соглашение о включении квалификатора в имя файла. Однако некоторые изображения или файлы могут потребовать локализации по другим причинам, не связанным с поддержкой масштабирования и контрастности, особенно если они содержат текст или материал, восприятие которых зависит от языка и региональных стандартов. Файлы на компьютере пользователя могут отличаться не только по языку, но и в зависимости от местоположения пользователя. Например, карта может иметь разные границы в зависимости от местоположения пользователя, но надписи должны быть на предпочтительном для пользователя языке. Дополнительные сведения о том, в каких случаях это необходимо, см. в статье Руководство по глобализации и локализации.
Если вам необходимы разные ресурсы для разных языков и местоположений, среда выполнения Windows также поддерживает соглашение, в котором язык и местоположение могут быть определены во время выполнения, после чего могут быть загружены те или иные ресурсы. Данное соглашение использует имена папок, а не файлов. За счет этого вы можете группировать описанные здесь соглашения об именовании файлов с соглашениями для папок с целью определения ресурсов, поддерживающих масштабирование и контрастность, а также локализацию. Также поддерживаются ресурсы для языков с написанием справа налево и соглашение о целевом размере, которое используется для особых ситуаций, например для изображений, отображаемых системой для сопоставления файлов. Дополнительные сведения о соглашении об именовании папок для квалификации ресурсов, а также о соглашениях квалификации см. в разделе Именование ресурсов с использованием квалификаторов.
Связанные разделы
Как присваивать имена ресурсам с помощью квалификаторов
Руководство по масштабированию в зависимости от плотности пикселей.