Разработка Windows 8.1 приложений. Windowing. Часть 1

Эта статья является четвертой в серии о разработке под Windows 8.1. Она предназначена для Windows 8.1 разработчиков, желающих открыть для себя новые возможности.

Предыдущие статьи:

1. Введение.
2. Новые элементы управления.
3. AppBar, темы и навигация.
4. Windowing.

Введение

В Windows 8, пользователи обнаружили преимущества полноэкраного приложения: они могут сосредоточиться на том, что действительно имеет значение для них, благодаря соответственной концепции. Это новый способ использования приложений пришел с самой что ни на есть простой многозадачной модели: если пользователь хотел бы иметь более одного приложения одновременно, он может начать одно в полноэкранном режиме и установить рядом другое (snapped view). Такое поведение было весьма ограниченным, поскольку пользователи не могли работать более чем на двумя приложения сразу.

ОС Windows 8.1 предоставляет новый способ использования современных приложений. Теперь, до четырех приложений могут работать одновременно на одном экране. У каждого приложения есть минимальная ширина и она может быть изменена до размера экрана.

В этой четвертой статье мы увидим, как:

• создать приложение, которое хорошо работает в любом размере и на любом экране
• воспользоваться новой многозадачной моделью
• отображать прилжение на нескольких экранах

Прощайте view states. Здравствуй изменение размера.

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

• Full Screen landscape: состояние по -молчанию при запуске приложения
• Full screen portrait: приложение во весь экран в портретном режиме
• Snapped: приложение шириной 320px
• Filled: заполняя экран рядом с приложением в режиме Snapped

LayoutAwarePage из Windows 8 “заботился” о переходах между ними, вызывая их всякий раз, когда это было необходимо. Программно, нужно было использовать перечисление ApplicationViewState, что бы быть в курсе текущего состояния.

В Windows 8.1, эти состояний больше не существует. Но сейчас мы уже не будем вспоминать состояния, речь пойдет об изменении размера вашего приложения от минимального до полноэкранного режима. По умолчанию в  приложении Windows 8.1 минимальная ширина 500 пикселей. Это новый минимальный размер для Windows Store Apps.

Почему 500 пикселей?

Как и Windows 8, экран должен быть не менее 1024 PX широкий для приложения. Минимальный размер по умолчанию установлен в 500 пикселей, именно поэтому любой экран может работать, по крайней мере, с двумя приложениями одновременно: 500px + 24px (желоб) + 500px.

Этот размер минимальный?

Если вы считаете, что ваше приложение может работать и в режиме менее 500 пикселей, вы можете настроить его вручную — до 320 пикселей. Этот размер используется в ОС Windows 8 приложениях. В Windows 8.1, это совершенно необязательно.

Для этого:

• Откройте файл package.appxmanifest
• На вкладке Application UI, найдите минимальную ширину
• Установите ее в 320px

Перекомпилируйте ваше приложение и запустите его. Теперь вы можете использовать желоб, чтобы изменить размер вашего приложения до 320px.

Как Windows 8 приложения ведут себя на ОС Windows 8.1?

Если вы используете приложение Windows 8 (это означает, что приложение не было перекомпилировать под ОС Windows 8.1), вы сможете изменить его размер до 320 пикселей. Тем не менее, между этим размером и 500 пикселей, приложение устанавливается в 320 пикселей с черными колонками по каждую сторону.

Такой вариант отображения не является ни удобным, ни красивым. Чтобы избавиться от него, просто перенацельте свое приложение для Windows 8.1 в Visual Studio 2013.

Изменение размера приложение для 500 пикселей в ширину и больше

Вплоть до 500 пикселей, ваше приложение всегда должно быть полностью функциональным. Изменение размера должно быть естественным для пользователей, а не разрушительным. Когда пользователь изменить размер приложения, он ожидает, что оно всегда будет заполнено информацией. Макет вашего приложения должен быть адаптивным, чтобы заполнить пространство, по горизонтали и вертикали .

В Windows 8.1, вы все равно должны использовать VisualState элементы, чтобы перейти от одного состояния к другому. Тем не менее, теперь у вас есть возможность управлять ими самостоятельно. Помните, состояний больше не существует.

Теперь вы будете реагировать на смену ширины экрана и устанавливать необходимое вам состояние самостоятельно.

Для этого:

1. Добавить VisualState элемент на страницу XAML. Давайте назовем его DefaultLayout .
2. Зарегистрируйте на странице событие SizeChanged. Это событие вызывается всякий раз, когда приложение изменяет размер.
3. Получить новую ширину окна с помощью класса SizeChangedEventArgs, переданным в качестве параметра обработчику событий SizeChanged .
4. Если новый ширина больше 500 пикселей, используйте VisualStateManager для перехода в состояние DefaultLayout, которое вы только что создали .

Обратим внимание, что свойство ApplicationView.Value и перечисление ApplicationViewState сейчас устарели. Вы не должны полагаться на это API больше.

Предыдущем пример довольно прост. Моя страница содержит только один GridView. DefaultLayout не содержит ничего, так как это состояние по умолчанию для приложения.

GridView — отличный контрол, потому что он автоматически перекомпоновывает содержание, а это означает, что у вас нет необходимости что либо менять для заполнения пространства.

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

1. Горизонтально панорамированое приложений: при изменении размеров, эти приложения должны оставаться в горизонтальном положении. Пример: Bing приложения, путешествия, новости, спорт, …
2. Многоколоночные приложений: при изменении размеров, вы должны оставить только те столбцы, которые являются более значимыми. Например, при изменении размеров, приложение Почта постепенно распадается на два из трех столбцов.
3. Исправлена ​​соотношение сторон: при изменении размеров, эти приложения должны сокращаться и расти, чтобы поддерживать их соотношение. Это случай, для большинства игровых приложений.

Может ли приложение изменять динамически при перемещении желоба?

Нет, событие SizeChanged срабатывает только тогда, когда желоб отпустили. Приложение не может динамически изменять размер во время перемещения желоба.

Изменение размера приложение до 320 пикселей

Приложение, которое изменяется до 320 px не может быть полностью функциональным. При проектировании этого вида приложения, вы должны решить, какие функции вы оставите на виду, а какие уберете.

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

Для поддержки “узкого” режима:

• Установите минимальный размер в 320 пикселей в манифесте приложения
• Добавить новый элемент VisualState на ваш XAML. Давайте назовем его NarrowLayout.
• Используйте VisualStateManager для вызова этого состояния, когда размер приложения становится меньше 500 пикселей.

В моей странице, у меня теперь есть две “развилки”: DefaultView и NarrowView. NarrowView по умолчанию скрыта. Когда приложение изменяется с 500 пикселей на 320 пикселей, используется NarrowLayout.

Как вы видете на предыдущем скриншоте, макет приложения изменился, элементы и поля меньше. Вот несколько рекомендаций, которые следует соблюдать при изменении на минимальную ширину в 320 пикселей:

• Используйте вертикальный вид
• Используйте меньшую кнопку назад
• Уменьшите размер заголовка страницы
• Уменьшите отступы элементов
• Уменьшите размер элементов управления так, чтобы они занимали меньше пространства, но все равно были юзабельными

Ниже приведен размер интерактивных контролов по гадлайнам:

Заметим, что метод TryUnsnap является устаревшим.

На этом первая часть подошла концу. Совсем скоро вы увидите продолжение и окончательно закрепите свои навыки о новых возможностях изменения размеров приложения.