Эта статья является вторым днем в серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .
Сегодня мы поговорим о размерах экрана и почему они важны для разработки Windows 8. В первой части этой статьи мы обсудим ориентацию и некоторые простые способы сделать наше приложение более полезным в зависимости от того, как наш пользователь держит свое устройство. Во второй части мы рассмотрим наше приложение в «защелкнутом» состоянии и то, как мы могли бы изменить наш интерфейс, чтобы приспособить его к экрану гораздо меньшего размера.
Ориентация и привязка важны, потому что, если вы не учтете их в своем приложении, ваше приложение не будет одобрено для Магазина Windows.
Если вы посмотрите в требованиях сертификации приложений для Windows 8, в разделе 3.6 будет написано:
Ваше приложение должно поддерживать привязанный макет. В горизонтальной ориентации функции вашего приложения должны быть полностью доступны, когда размер экрана приложения составляет 1024 x 768. Ваше приложение должно оставаться работоспособным, когда клиент щелкает и отсоединяет приложение.
Это говорит о том, что наше приложение уже должно поддерживать как минимум три визуальных состояния:
- 1024 x 768 (минимальное разрешение экрана и заполненное состояние)
- 320 х 768 (с привязкой)
- Разрешение по умолчанию, которое вы планируете, обычно 1366 x 768.
Вот пример полноэкранного приложения, переходящего в привязанное состояние:
Вы можете видеть, что в этом случае мы перестроили наш контент, чтобы заполнить меньшее привязанное состояние. Также есть возможность переместить ваше приложение в «заполненное» состояние, которое представлено светло-серым блоком справа от нашего привязанного вида.
К счастью, есть несколько простых способов узнать, в каком состоянии находится наше приложение, и остальная часть этой статьи будет посвящена демонстрации того, как именно это делается.
Поддержка вращения
Для начала давайте создадим наше почти известное приложение из пустого шаблона в Visual Studio 2012. После того, как вы его создали, запустите ваше приложение в симуляторе или на удаленном компьютере (подробнее об этом позже). Вы увидите ваше удивительное пустое приложение, и если вы поверните его, приложение на самом деле будет автоматически вращаться. Почему как?
По умолчанию все шаблоны в Visual Studio настроены для поддержки всех вращений. Помните этот файл package.appxmanifest? На вкладке «Интерфейс приложения» вы найдете раздел « Поддерживаемые вращения». Проверяя одно или несколько предпочтений ориентации, вы выбираете, какие ориентации будет поддерживать ваше приложение. Опять по умолчанию мы поддерживаем все.
В зависимости от вашей ситуации это может иметь значение для общего опыта ваших приложений. Например, если вы создаете игру, вам может потребоваться только поддержка ландшафтного режима.
Распознавание изменения ориентации
Наш первый шаг в работе с ориентацией — убедиться, что мы можем распознать, когда произошло изменение ориентации. К счастью, Windows 8 SDK предоставил нам SimpleOrientationSensor, у которого есть события именно для этой цели. Для этого примера мы снова начали с пустого шаблона приложения в Visual Studio 2012.
Сначала мы добавили простой элемент управления TextBox в наш файл MainPage.xaml. Вот полный набор кода для этого файла в настоящее время:
<Page
x:Class="Day2_OrientationAndSnap.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Day2_OrientationAndSnap"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="No orientation reading."
x:Name="AlertBox"
FontSize="50"
TextAlignment="Center"
Margin="0,100,0,0" />
</Grid>
</Page>
Теперь откройте файл MainPage.xaml.cs. Нам нужно добавить код, чтобы использовать этот датчик.
Сначала мы добавим новый оператор using : using Windows.Devices.Sensors; , Далее мы добавим новый экземпляр класса SimpleOrientationSensor и добавим некоторые обработчики событий, чтобы иметь возможность активно распознавать изменение ориентации. Вот полный код из моего файла MainPage.xaml.cs. Мы объясним код позже. Есть несколько частей кода C # выше, которые я должен объяснить.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Devices.Sensors;
namespace Day2_OrientationAndSnap
{
public sealed partial class MainPage : Page
{
private SimpleOrientationSensor orientationSensor;
public MainPage()
{
this.InitializeComponent();
orientationSensor = SimpleOrientationSensor.GetDefault();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (orientationSensor != null)
orientationSensor.OrientationChanged += new TypedEventHandler<SimpleOrientationSensor, SimpleOrientationSensorOrientationChangedEventArgs>(orientationSensor_OrientationChanged);
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
if (orientationSensor != null)
orientationSensor.OrientationChanged -= orientationSensor_OrientationChanged;
base.OnNavigatingFrom(e);
}
async private void orientationSensor_OrientationChanged(SimpleOrientationSensor sender, SimpleOrientationSensorOrientationChangedEventArgs args)
{
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
ShowOrientationText(args.Orientation);
});
}
private void ShowOrientationText(SimpleOrientation simpleOrientation)
{
switch (simpleOrientation)
{
case SimpleOrientation.NotRotated:
AlertBox.Text = "Not Rotated";
break;
case SimpleOrientation.Rotated90DegreesCounterclockwise:
AlertBox.Text = "90 Degrees CounterClockwise";
break;
case SimpleOrientation.Rotated180DegreesCounterclockwise:
AlertBox.Text = "180 Degrees Rotated";
break;
case SimpleOrientation.Rotated270DegreesCounterclockwise:
AlertBox.Text = "270 Degrees Rotated CounterClockwise";
break;
case SimpleOrientation.Facedown:
AlertBox.Text = "Face Down";
break;
case SimpleOrientation.Faceup:
AlertBox.Text = "Face Up";
break;
default:
AlertBox.Text = "Unknown";
break;
}
}
}
}
Сначала мы создали новый объект SimpleOrientationSensor с именем Ориентация. В методе конструктора MainPage () мы создаем этот объект с помощью датчика ориентации по умолчанию на устройстве.
В обработчиках событий OnNavigatedTo () и OnNavigatingFrom () мы добавляем и удаляем событие OrientationChanged для нашего нового объекта. Важно убедиться, что объект не является нулевым, потому что на устройствах, у которых нет этого датчика, мы получим ошибку.
Далее у нас есть новый обработчик событий с именем Ориентация_ОбъектовОткрытия (). Следует отметить, что он снабжен асинхронным дескриптором и использует ключевое слово await при выполнении своего действия. В конечном итоге это делается для того, чтобы избежать узких мест в нашем коде, которые в противном случае могли бы удержать приложение. ( Вы можете прочитать больше об async / await на MSDN. )
Как только данные получены, мы вызываем новый метод ShowOrientationText (), передавая данные Orientation вместе.
Наконец, ShowOrientationText () выполняет простой оператор switch для всех возможных ориентаций: NotRotated, Rotated90DegreesCounterclockwise, Rotated180DegreesCounterclockwise, Rotated270DegreesCounterclockwise, Facedown, Faceup или Unknown. Я думаю, забавно, что они назвали одну из них Rotated180DegreesCountercwisewise, поскольку 180 градусов не должны иметь значения, в каком направлении они пошли.
Вот быстрый взгляд на приложение в его текущем состоянии:
Удаленная отладка
Теперь, если вы чем-то похожи на Кларка и меня, вам нравится писать свой код на мощном четырехъядерном настольном компьютере, может быть, 8-12 ГБ ОЗУ, два 27-дюймовых монитора, мышь, клавиатура и все 9 ярдов. К сожалению, эти машины вряд ли будут иметь датчик ориентации, и поднимать монитор, чтобы изменить ориентацию, просто не будет работать. Кроме того, используемый нами SimpleOrientationSensor не эмулируется симулятором, поэтому для этого нам понадобится реальное устройство.
Еще один важный урок, который мы усвоили: это симулятор , а не эмулятор, как Windows Phone. Это означает, что он будет имитировать только тот компьютер, над которым вы сейчас работаете, а не действовать как совершенно другое, полностью работоспособное устройство. Нет датчика ориентации? Вам нужно другое устройство.
К счастью, Microsoft предоставила нам возможность сделать это на удаленном вторичном устройстве, так же, как мы это делаем при создании приложений для Windows Phone. Вот краткий рассказ о том, как это работает ( MSDN имеет более длинную и тщательную историю ):
Установите средства удаленной отладки на дополнительном устройстве. Я использую Samsung Series 7 Slate , но подойдет любое устройство с Windows 8 в форм-факторе планшета. Вы можете скачать средства удаленной отладки здесь . Убедитесь, что вы выбрали подходящий вариант, x86, x64 или ARM, в зависимости от вашего устройства.
Запустите средства удаленной отладки на дополнительном устройстве. Вы увидите значок, который выглядит следующим образом:
После запуска удаленного отладчика на дополнительном устройстве вернитесь на основной компьютер и выберите «Удаленный компьютер» в качестве цели для развертывания.
Когда вы выбираете «Удаленный компьютер» в первый раз, вы увидите диалоговое окно, похожее на изображение ниже. Помните, что устройства в вашей подсети будут отображаться только в том случае, если средства удаленного отладчика установлены и работают в данный момент.
Позже, когда вы захотите переключить устройства, вы будете пытаться найти, где хранится эта опция. Я здесь, мои дорогие читатели, чтобы избавить вас от хлопот. Откройте свойства вашего проекта (Alt + Enter) и выберите вкладку Debug. Оттуда вы можете изменить или удалить свой предыдущий выбор. Если вы отмените выбор, в следующий раз, когда вы выберете удаленную отладку, вы получите диалоговое окно из более раннего.
Вернуться к кодированию …
Итак, на данный момент у нас есть приложение, которое распознает, что ориентация устройства изменилась. Это хорошо, когда мы хотим сделать что-то конкретное в коде с ориентацией, но что, если мы просто хотим, чтобы наше приложение переориентировалось на то, чтобы оно было читаемым / полезным для нашего пользователя? Есть намного более простой способ, благодаря VisualStateManager.
Вернитесь к своему проекту и щелкните правой кнопкой мыши диалоговое окно «Добавить… Новый элемент…».
Добавьте новую базовую страницу, мы назвали наш OrientationPage.xaml. Если вы посмотрите на XAML для этой страницы, вы обнаружите, что мы работаем с совершенно другим объектом страницы прямо из коробки. Это LayoutAwarePage , и по умолчанию он уже имеет достаточную структуру, чтобы правильно ориентироваться, и даже предоставляет VisualState для привязанного представления.
Кроме того, используя этот тип страницы, симулятор также учитывает изменения ориентации.
Это означает, что, просто используя этот тип страницы, мы автоматически получаем ориентированную на привязку страницу, которая имеет статический набор визуальных состояний, которыми мы можем манипулировать, чтобы заставить нашу страницу делать то, что мы хотели. Чтобы сделать это более очевидным, я собираюсь изменить свои визуальные состояния, чтобы у каждого был свой цвет фона.
Вот посмотрите на измененные значения VisualState из нашего OrientationPage.xaml:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Purple"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Filled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkGreen"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Как вы можете видеть, мы просто добавили новый узел в каждый раздел, который изменяет свойство Background моего layoutRoot Grid. То, что позволяет нам делать этот новый LayoutAwarePage, вместо того, чтобы писать тонны кода для управления нашей ориентацией, — это беспокоиться о том, что имеет значение: о нашем стиле. Написание отдельных стилей для наших элементов страницы на основе визуального состояния нашей страницы, мы упрощаем весь процесс.
Резюме
Сегодня мы рассмотрели, как мы можем определить ориентацию устройства пользователя, а также как использовать новый элемент LayoutAwarePage для управления различными визуальными состояниями, с которыми может столкнуться наше приложение. В интернете есть множество замечательных примеров, связанных с ориентацией и привязкой, но если есть один урок, который вы извлечете из сегодняшней статьи, это:
Ваша заявка ДОЛЖНА подтверждать состояние привязки. Убедитесь, что вы разместили его.
Чтобы загрузить весь пример решения из этой статьи, вы можете скачать его здесь:
Завтра мы посмотрим на заставку. Это ценный инструмент для загрузки вашего приложения, а также для его монетизации. Мы сначала погрузимся в это завтра. Увидимся позже!
