Краткое руководство: добавление экрана-заставки (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Задайте изображение экрана-заставки и цвет фона для вашего приложения с помощью Microsoft Visual Studio 2013.

Посмотрите, как работает эта функция в действии в качестве части нашей серии Компоненты приложений от "А" до "Я": Пользовательский интерфейс приложения Магазина Windows от "А" до "Я" (HTML).

Необходимые условия

В этом кратком руководстве используется Visual Studio 2013. Чтобы скачать эту программу, перейдите на страницу Скачиваемые файлы.

Задание изображения экрана-заставки и цвета фона с помощью Visual Studio 2013

Когда для создания приложения вы используете шаблон Visual Studio 2013, изображение по умолчанию добавляется в проект и задается как изображение экрана-заставки. Цвет фона для экрана-заставки по умолчанию светло-серый. Чтобы изменить стандартное изображение или цвет экрана-заставки вашего приложения:

  1. Откройте существующий проект приложения среды выполнения Windows в Visual Studio 2013.

  2. В окне Solution Explorer (Обозреватель решений) откройте файл "Package.appxmanifest". Его также можно открыть, выбрав в строке меню Project (Проект), Store (Магазин) и Edit App Manifest (Изменить манифест приложения).

  3. Откройте вкладку Visual Assets (Визуальные активы) и выберите пункт Splash Screen (Экран-заставка) на панели All Image Assets (Все активы изображений) в левой части окна "Package.appxmanifest". Если вы изменяете экран-заставку впервые, вы увидите путь "Assets\SplashScreen.png" в поле Splash Screen (Экран-заставка).

    На следующем снимке экрана показано окно "Package.appxmanifest" в Visual Studio 2013. В зависимости того, предназначен ли проект для приложения Магазина Windows или приложения Магазина Windows Phone, вы увидите несколько другой набор визуальных ресурсов.

    Снимок экрана с окном Package.appxmanifest в Visual Studio 2013

    Если вы откроете "Package.appxmanifest" в текстовом редакторе, SplashScreen element будет отображаться как дочерний элемент VisualElements element. Так выглядит в текстовом редакторе разметка экрана-заставки по умолчанию в файле манифеста:

    <m2:SplashScreen Image="Assets\splashscreen.png" />
    
  4. Чтобы выбрать новое изображение экрана-заставки для приложения Магазина Windows, нажмите кнопку с многоточием, которая отображается рядом с меткой 620 x 300 пикселей под областью Масштабированные активы. Выберите изображение размером 620 x 300 пикселей (с расширением PNG, JPG или JPEG), которое вы бы хотели использовать в качестве экрана-заставки.

    Важно  Размер выбранного изображения экрана-заставки должен составлять 620 x 300 пикселей при коэффициенте масштабирования 1x. Кроме того, при разработке экрана-заставки обратите внимание, что экран-заставка меньше экрана и расположен по центру. Экран-заставка не заполняет экран, как это делает экран-заставка приложения Магазина Windows Phone.

     

  5. Чтобы выбрать новое изображение экрана-заставки для приложения Магазина Windows Phone, нажмите кнопку с многоточием, которая отображается рядом с меткой 1152 x 1920 пикселей под областью Масштабированные активы. Выберите изображение размером 1152 x 1920 пикселей (с расширением PNG, JPG или JPEG), которое вы бы хотели использовать в качестве экрана-заставки.

    Важно  Размер выбранного изображения экрана-заставки должен составлять 1152 x 1920 пикселей, что является правильным размером для коэффициента масштабирования 2,4x. Если это единственный ресурс, который вы предоставляете, то он будет масштабироваться в сторону уменьшения для коэффициентов масштабирования 1,4x и 1x.

     

  6. В поле Background Color (Цвет фона) в разделе Splash Screen (Экран-заставка) задайте цвет фона, отображаемый вместе с изображением экрана-заставки. Вы можете ввести либо название цвета, либо '#' и шестнадцатеричное значение цвета. Список названий доступных цветов: SplashScreen element.

    Задавать цвет фона экрана-заставки не обязательно. Если вы не укажете цвет для приложения Магазина Windows, цвет фона экрана-заставки будет по умолчанию светло-серый (шестнадцатеричное значение — #464646). Такой же цвет задан по умолчанию как цвет фона в области Tile (Плитка) (см. поле Background Color [Цвет фона] раздела Tile Images and Logos [Изображения и логотипы на плитках] на вкладке Visual Assets [Визуальные активы]). Если вы не укажете цвет для приложения магазина Windows Phone, или установите для него значение "прозрачный", цвет фона экрана-заставки будет прозрачен.

Краткая сводка и дальнейшие действия

Если ваше приложение принимает белый цвет для загрузки, рекомендуется добавить расширенный экран-заставку. Пошаговое руководство см. в разделе Расширение экрана-заставки. Подробнее об обеспечении эффективного взаимодействия с пользователем во время загрузки см. в разделе Руководство и контрольный список для экранов-заставок.

Хотите узнать больше о других изображениях, необходимых для приложения Магазина Windows? См. Выбор изображений для вашего приложения.

Связанные разделы

Пример экрана-заставки

Руководство и контрольный список для экранов-заставок

Расширение экрана-заставки

Выбор изображений для приложения

Справочные материалы

Package manifest schema SplashScreen element

Windows.ApplicationModel.Activation.SplashScreen class