Шаг 5. Адаптация макета страницы под различные ориентации и представления

Сейчас приложение разработано для работы в полноэкранном режиме и альбомной ориентации. Но пользовательский интерфейс приложения Магазина Windows должен адаптироваться к различным ориентациям и макетам. Точнее говоря, приложение должно поддерживать и альбомную, и книжную ориентацию. В альбомной ориентации оно должно поддерживать полноэкранный режим, а также макеты с заполнением и с прикреплением. Посмотрим, как можно сохранить внешнюю привлекательность приложения при любом разрешении и ориентации экрана.

Простейший способ узнать, как будет выглядеть приложение в различных представлениях, — использовать Blend для Microsoft Visual Studio 2012 для Windows 8. Blend предоставляет визуальный конструктор, в котором легко просматривать и изменять пользовательский интерфейс. Давайте попробуем.

1. Запустите Blend.
2. В меню Файл выберите команду Открыть проект/решение.
3. В диалоговом окне Открытие проекта перейдите в расположение, где находится ваше приложение PhotoAppSample, выберите файл решения и нажмите кнопку Открыть.

Вы можете заметить, что среда Blend немного отличается от Microsoft Visual Studio.

Рассмотрим рабочее пространство Blend в общих чертах. Начнем с центральной области рабочего пространства.

Большую часть центральной области занимает монтажная панель. Здесь выполняется большинство задач по разработке макетов. Обратите внимание, что область приложения вставлена в виртуальное планшетное устройство.

Под монтажной панелью отображается код HTML и CSS. В текущем представлении (называемом представлением с разделением) отображаются и код, и монтажная панель. Можно переключаться между различными представлениями (конструктора, кода и с разделением), нажимая кнопки в правом верхнем углу монтажной панели:

Рассмотрим некоторые панели, окружающие центральное рабочее пространство.

Панель	Изображение	Описание
Проекты		В левом верхнем углу рабочего пространства расположена панель Проекты. Панель Проекты аналогична обозревателю решений в Visual Studio. С ее помощью можно открывать файлы и добавлять новые элементы.
Динамическая DOM		Под панелью Проекты расположена панель Динамическая DOM. На панели Динамическая DOM показана структура приложения, которое вы разрабатываете, и здесь можно выбрать элементы для настройки стиля. Важно то, что представление Динамическая DOM автоматически и динамически обновляется при изменении состояния приложения, включая изменения элементов, объявленных в разметке HTML, и изменения динамически создаваемых элементов.
Свойства CSS		На панели Свойства CSS можно просматривать и изменять свойства CSS для элемента HTML, выбранного на монтажной панели или на панели Динамическая DOM.
Правила стилей		На панели Правила стилей указаны все таблицы стилей, присоединенные к текущему документу, и все определенные в них стили.
Устройство		На панели Устройство можно выбрать экраны, представления и другие параметры отображения для приложения.

Используем панель Устройство, чтобы попробовать применить разные представления и посмотреть, как будет выглядеть приложение.

Использование различных представлений в Blend

1. На панели Устройство нажмите кнопку представления с заполнением (). Монтажная панель изменится для отображения заполненного представления. Вот как приложение выглядит, когда пользователь прикрепляет рядом с ним другое приложение. Это представление выглядит нормально, так что его можно оставить как есть.

   

2. На панели Устройство нажмите кнопку прикрепленного представления (). Конструктор изменится для имитации представления с прикреплением.

   Вот как приложение выглядит, когда пользователь прикрепляет его рядом с другим приложением. Это представление слишком узкое для отображения всего приложения, так что нужно внести некоторые корректировки.

   

3. На панели Устройство нажмите кнопку представления в книжной ориентации (). Конструктор изменится для имитации представления в книжной ориентации.

   Вот как приложение выглядит, когда пользователь поворачивает его в книжную ориентацию. Это представление тоже слишком узкое. Необходимо внести примерно те же корректировки, что и для прикрепленного представления.

   

Сначала скорректируем прикрепленное представление.

Корректировка прикрепленного представления

1. На панели Устройство нажмите кнопку представления с прикреплением (), чтобы открыть представление с прикреплением.
2. Дважды щелкните файл home.css на панели Проекты, чтобы открыть его.
3. Прокрутите файл до конца и просмотрите один из последних разделов:
   CSS

   @media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
    margin-left: 20px;
    }
   }
   
   
   

   Этот раздел использует запрос носителя для применения стилей, когда приложение находится в прикрепленном представлении. Эти конкретные запрос носителя и стиль были созданы шаблоном Visual Studio. Изменим этот стиль, удалив параметр поля из .homepage section[role=main] style (аналогично тому, что мы сделали для варианта без прикрепления).

   CSS

   @media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
    }
   }
   
   
   

4. Одна из проблем макета с прикреплением для нашего приложения заключается в том, что левое поле слишком велико. Создадим стиль прикрепленного представления для contentGrid, в котором размер поля изменен со 120 пикселей на 20 пикселей.
   CSS

   @media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
    }
   
    #contentGrid {
    margin-left: 20px;
    }
   }
   
   
   

5. Дважды щелкните файл default.html на панели Проекты, чтобы открыть его и отобразить монтажную панель. Теперь содержимое расположено ближе к левому краю.

   

6. Убедимся, что внесенные нами изменения распространяются только на прикрепленное представление. На панели Устройство нажмите кнопку альбомного представления (), чтобы отобразить представление в альбомной ориентации. Размер левого поля снова стал равным 120 пикселям.

   

7. Вернемся к прикрепленному представлению. На панели Устройство нажмите кнопку прикрепленного представления (), чтобы отобразить прикрепленное представление.
8. Дважды щелкните файл home.css на панели Проекты, чтобы снова открыть его. Вернитесь в раздел запроса носителя для прикрепленного представления.

9. Измените стиль элемента imageGrid так, чтобы он содержал один столбец (вместо двух) и две строки (вместо одной).

   CSS

   @media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
    }
   
    #contentGrid {
    margin-left: 20px;
    }
   
    #imageGrid {
    -ms-grid-columns: auto;
    -ms-grid-rows: auto auto;
    }
   }
   
   
   

10. Измените стиль контейнера imageInfo так, чтобы он занимал первый столбец и вторую строку, задайте его верхнее поле равным 20 пикселям, а левое поле — 0 пикселей.
    CSS

    @media screen and (-ms-view-state: snapped) {
     .homepage section[role=main] {
     }
    
     #contentGrid {
     margin-left: 20px;
     }
    
     #imageGrid {
     -ms-grid-columns: auto;
     -ms-grid-rows: auto auto;
     }
    
     #imageInfoContainer {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     margin-top: 20px;
     margin-left: 0px;
     }
    }
    
    
    

11. Измените стиль displayImage так, чтобы параметр width был равен 225 пикселям и параметр max-height — тоже 225 пикселям.
    CSS

    @media screen and (-ms-view-state: snapped) {
     .homepage section[role=main] {
     }
    
     #contentGrid {
     margin-left: 20px;
     }
    
     #imageGrid {
     -ms-grid-columns: auto;
     -ms-grid-rows: auto auto;
     }
    
     #imageInfoContainer {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     margin-top: 20px;
     margin-left: 0px;
     }
    
     #displayImage {
     width: 225px;
     max-height: 225px;
     }
    }
    
    
    

12. Измените стиль элементов div, расположенных внутри элемента imageInfo, так, чтобы их ширина была равна 250 пикселям.
    CSS

    @media screen and (-ms-view-state: snapped) {
     .homepage section[role=main] {
     }
    
     #contentGrid {
     margin-left: 20px;
     }
    
     #imageGrid {
     -ms-grid-columns: auto;
     -ms-grid-rows: auto auto;
     }
    
     #imageInfoContainer {
     -ms-grid-row: 2;
     -ms-grid-column: 1;
     margin-top: 20px;
     margin-left: 0px;
     }
    
     #displayImage {
     width: 225px;
     max-height: 225px;
     }
    
     #imageInfoContainer > div {
     width: 250px; 
     }
    
    }
    
    
    

13. Сохраните изменения, нажав клавиши CTRL+S.
14. Дважды щелкните файл default.html на панели Проекты, чтобы открыть его и отобразить монтажную панель. На панели Устройство нажмите кнопку прикрепленного представления (), чтобы отобразить прикрепленное представление.

    Теперь приложение выглядит в прикрепленном представлении так.

    

Теперь давайте исправим книжное представление. В этот раз для внесения изменений используем пользовательский интерфейс  Blend, вместо того чтобы редактировать код CSS напрямую.

Корректировка книжного представления

1. На панели Устройство нажмите кнопку книжного представления (), чтобы открыть книжное представление.
2. На панели Правила стилей разверните запись home.css и выберите запись @media screen and (-ms-view-state: portrait).

   

3. Снова щелкните запись и переименуйте ее в @media screen and (-ms-view-state: fullscreen-portrait).

4. Выберите этот стиль .homepage section[role=main] style. Это стиль .homepage section[role=main] style для книжного представления.

   

5. На панели Свойства CSS разверните раздел Макет. Задайте размер левого поля равным 0 пикселей.

   

6. На панели Правила стилей рядом со значением @media screen and (-ms-view-state: portrait) нажмите кнопку Добавить новый стиль ().
7. Задайте для нового стиля имя "#imageGrid" и выберите его.
8. На панели Свойства CSS разверните раздел Сетка. Задайте для параметра -ms-grid-columns значение "auto", а для параметра -ms-grid-rows — значение "auto auto".

   

9. На панели Правила стилей, рядом с записью @media screen and (-ms-view-state: portrait), снова нажмите кнопку Добавить новый стиль (). Назовите этот стиль "#imageInfoContainer" и выберите его.
10. На панели Свойства CSS разверните раздел Сетка. Задайте для параметра -ms-grid-column значение "1", а для параметра -ms-grid-row — значение "2".

    

11. Разверните раздел Макет. Задайте размер верхнего поля равным "20px", а размер левого поля — "0px".

    

    Обновленный код CSS выглядит так:

    @media screen and (-ms-view-state: fullscreen-portrait) {
     .homepage section[role=main] {
     margin-left: 0px;
     }
    
     #imageGrid {
     -ms-grid-columns: auto;
     -ms-grid-rows: auto auto;
     }
    
     #imageInfoContainer {
     -ms-grid-column: 1;
     -ms-grid-row: 2;
     margin-top: 20px;
     margin-left: 0px;
     }
    }
    
    

12. Сохраните изменения, нажав клавиши CTRL+S.

13. Запустите приложение. Теперь приложение выглядит в книжном представлении так.

    

Сводка

Поздравляем, вы прошли четвертый учебник! Вы научились использовать макет сетки и создавать стили для различных представлений. Вы также узнали, как использовать Blend для оформления пользовательского интерфейса.