Устройства Ultrabook™ поддерживают различные ориентации экрана и подходящие варианты можно выбирать в зависимости от приложения и того, как оно используется. Для одних приложений, лучше всего подходит альбомная ориентация, для других - книжная. Разработчики приложений могут реализовать только одну из них или обеспечить поддержку различных ориентаций в приложении за счет управления элементами интерфейса.
API Windows* RT поддерживает датчик ориентации, который отслеживает изменения положения устройства. Он также предоставляет более подробную информацию о различных ориентациях, таких как лицевой стороной вверх или вниз, книжная вниз и т. д. Возьмем, к примеру, приложение «Photo». Его элементы интерфейса могут менять местоположение при различных положениях устройства, чтобы максимально эффективно использовать доступное пространство экрана. Ниже показаны снимки экранов этого приложения при альбомной и книжной ориентации. На иллюстрации видно, что элементы интерфейса скомпонованы по-разному, обеспечивая максимальное удобство.
Расположение элементов интерфейса на экране приложения «Photo» в альбомной ориентации
ПРИМЕЧАНИЕ. Данное приложение разработано на платформе Windows 8 Release Preview. Мы установили, что оповещения об ориентации, получаемые от операционной системы, могут противоречить ожиданиям пользователя. Например, судя по данным на информационной панели, в случае верхнего снимка экрана система предположила, что используется книжная ориентация (Portrait). В таких случаях в приложении «Photo» мы выводим вариант интерфейса для альбомного расположения, если обнаружена книжная ориентация, и наоборот.
Расположение элементов интерфейса на экране приложения «Photo» в книжной ориентации
Реализация
Датчик ориентации - это один из датчиков, который позволяет приложениям реагировать на изменение положения устройства в пространстве. Класс SimpleOrientationSensorсреды выполнения Windows предоставляет различные события и методы для доступа к ориентации устройства. Событие OrientationChangedактивируется в том случае, если устройство меняет положение, и предоставляет данные о происходящих изменениях.
В разделах ниже описываются способы определения текущей ориентации устройства и обработки событий изменений.
Шаг 1
Объявите в классе MainWindowViewModel private переменную типа SimpleOrientationSensor, а также строковую переменную _orientationMode для хранения значения текущей ориентации в виде строки.
//ViewModelBase is the base class for all view models. It provides INotifyPropertyChanged implementation to all its derived classes. class MainWindowViewModel : ViewModelBase { //Member variables //declare variable of SimpleOrientationSensor class private SimpleOrientationSensor orientationSensor; //String variable to store current orientation sensor value private string _orientationMode; //Declare public orientation changed event raised when current orientation changes //This is raised when SetOrientationModeProperty is called public event EventHandler<OrientatationChangedEventArgs> OrientationChanged; ..... } Шаг 2
В конструкторе MainWindowViewModel() получите простой датчик ориентации устройства по умолчанию и установите отслеживание события OrientationChanged. Затем получите текущее значение датчика вызовом метода "GetCurrentOrientation()".
class MainWindowViewModel : ViewModelBase { public MainWindowViewModel() { //Get default SimpleOrientationSensor. orientationSensor = SimpleOrientationSensor.GetDefault(); //Register for the event to get the orientation changed notification. orientationSensor.OrientationChanged += orientationSensor_OrientationChanged ; //Get the current orientation and set the string to show the current orientation SetOrientationModeProperty(orientationSensor.GetCurrentOrientation()); ..... } ..... } Шаг 3
Когда датчик обнаруживает, что положение устройства изменилось, он сообщает обработчику событий новое значение. Новое значение можно узнать из аргументов события, например SimpleOrientationSensorOrientationChangedEventArgs args, и, следовательно, назначить соответствующее строковое значение свойству OrientationMode.
class MainWindowViewModel : ViewModelBase { //Event handler notified when orientation changed void orientationSensor_OrientationChanged(SimpleOrientationSensor sender, SimpleOrientationSensorOrientationChangedEventArgs args) { SetOrientationModeProperty(args.Orientation); } ..... } Шаг 4
В классе SimpleOrientationSensor собраны ключевые слова (SimpleOrientation) для различных значений ориентации. Имена здесь роли не играют: мы сами можем объявить ключевые слова и для их сопоставления со значением SimpleOrientation записать соответствующий метод.
public enum ViewOrientationMode { OrientationModeUnknown = -1, OrientationModePortraitUp , OrientationModePortraitDown , OrientationModeLandScapeRight , OrientationModeLandScapeLeft , OrientationModeFaceUp , OrientationModeFaceDown }; Шаг 5
Объявите общедоступное свойство для предоставления доступа к текущей ориентации. Примените интерфейс INotifyPropertChanged, чтобы предоставить автоматическое уведомление при задании нового значения переменной _orientationMode.
class MainWindowViewModel : ViewModelBase { //Create public property public string OrientationMode { get { return _orientationMode; } set { if (_ orientationMode != value) { _ orientationMode = value; //Raises notification when new value is set for this variable. OnNotifyPropertyChanged("OrientationMode"); } } } ..... } Шаг 6
Запишите метод для сопоставления ключевых слов SimpleOrientation с перечислением ViewOrientationMode. Этот метод также отправит оповещение об изменении ориентации классу View, а тот применит другую компоновку интерфейса.
class MainWindowViewModel : ViewModelBase { void SetOrientationModeProperty( SimpleOrientation orientation ) { ViewOrientationMode vOrientation = ViewOrientationMode.OrientationModeUnknown; switch(orientation) { case SimpleOrientation.NotRotated: { OrientationMode = “Portrait”; vOrientation = ViewOrientationMode.OrientationModePortraitUp; break; } case SimpleOrientation.Roated90DegreesCounterclockwise: { OrientationMode = “Landscape”; vOrientation= ViewOrientationMode.OrientationModeLandScapeLeft; break; } ..... default: break; } //Send Notification to view to change the layout. If (OrientationChanged != null) OrientationChanged(this, new OrientationChangedEventArgs(vOrientation)); } ..... } Шаг 7. Изменение компоновки
Чтобы получить сигнал о событии изменения ориентации, необходимо установить отслеживание события OrientationChanged в коде основного окна. Вызовите метод ChangeLayout для обработчика событий изменения ориентации. Логика метода ChangeLayout предполагает, что в соответствии с положением устройства будут применяться различные варианты компоновки. Элементы интерфейса соответствующим образом размещаются по строкам и столбцам сетки.
class MainWindow: ViewModelBase { MainWindow() { //Register for receiving orientation changed notification vm.OrientationChanged = vm_OrientationChanged; ….. } //OrientationChanged Event Handler void vm_OrientationChanged(object sender, OrientationChangeEventArgs e) { //Do all re-layouting work in background and once ready for rendering, give it to main UI thread Dispatcher.BeginInvoke(new Action(() => ChangeLayout(e.viewOrientation)), null); } void ChangeLayout(ViewOrientationMode currentOrientationMode) { //Portrait mode if (currentOrientationMode == ViewOrientationMode.OrientationModeFaceUp || currentOrientationMode == ViewOrientationMode.OrientationModeFaceDown || currentOrientationMode == ViewOrientationMode.OrientationModePortraitUp || currentOrientationMode == ViewOrientationMode.OrientationModePortraitDown) { //Change the layouts for controls. Grid.SetRow(debugPanel, 0); Grid.SetColumn(debugPanel, 1); debugGraphicaPanel.Orientation = Orientation.Vertical; Grid.SetRow(listBoxGrid, 0); Grid.SetColumn(listBoxGrid, 0); Grid.SetColumnSpan(listBoxGrid, 1); Grid.SetRow(controlsGrid, 0); Grid.SetColumn(controlsGrid, 1); Grid.SetColumn(controlsBtnPanel, 0); Grid.SetColumn(cameraBtn, 1); imagesListBox.Height = lbActualHeight; //Reset the orientation for camera button & controls panel. controlsGrid.HorizontalAlignment = HorizontalAlignment.Right; cameraBtn.HorizontalAlignment = HorizontalAlignment.Right; //Change the scrollbar visibility. if (imageScrollViewer != null) imageScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden; } else if (currentOrienationMode == ViewOrientationMode.OrientationModeLandScapeLeft || currentOrientationMode == ViewOrientationMode.OrientationModeLandScapeRight) //LandScape mode { //Change the layouts for controls. Grid.SetRow(debugPanel, 1); Grid.SetColumn(debugPanel, 0); debugGraphicaPanel.Orientation = Orientation.Horizontal; Grid.SetRow(listBoxGrid, 1); Grid.SetColumn(listBoxGrid, 0); Grid.SetColumnSpan(listBoxGrid, 2); Grid.SetRow(controlsGrid, 0); Grid.SetColumn(controlsGrid, 0); //Set the image list box to show only 2 rows. imagesListBox.Height = 275; //Set the orientation for camera button & controls panel accordingly. if (currentOrientationMode == ViewOrientationMode.OrientationModeLandScapeRight) { controlsGrid.HorizontalAlignment = HorizontalAlignment.Right; Grid.SetColumn(controlsBtnPanel, 0); Grid.SetColumn(cameraBtn, 1); } else { controlsGrid.HorizontalAlignment = HorizontalAlignment.Left; Grid.SetColumn(controlsBtnPanel, 1); Grid.SetColumn(cameraBtn, 0); } //Change the scrollbar visibility to hide the multiple rows in list. if (imageScrollViewer != null) imageScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; } } ….. } Варианты интерфейса приложения «Photo» при различной ориентации:
Устройства-трансформеры Ultrabook имеют два режима работы: 1) планшет; 2) ноутбук. Если дисплей и клавиатура находятся в одной плоскости, значит устройство используется как планшет. Если они расположены перпендикулярно друг другу, это режим ноутбука.
Режим ноутбука лицевой стороной вверх
Если дисплей и клавиатура расположены перпендикулярно друг другу, значит устройство используется как ноутбук. На снимке экрана ниже показан вид приложения «Photo» в этом режиме.
Режим планшета в книжной ориентации
Если дисплей находится над клавиатурой и оба они располагаются в одной плоскости, устройство используется как планшет в книжной ориентации. На снимке экрана ниже показан вид приложения в этом режиме.
Режим ноутбука в альбомной ориентации
Если дисплей и клавиатура перпендикулярны друг другу, а устройство ориентировано вертикально, значит оно используется как ноутбук в книжной ориентации. На снимке экрана ниже показан вид приложения в этом режиме.
Режим планшета в альбомной ориентации
Если дисплей расположен слева или справа от клавиатуры и они находятся в одной плоскости, значит устройство используется в режиме планшета с альбомной ориентацией. На снимке экрана ниже показан вид приложения «Photo» в этом режиме.
*Другие наименования и товарные знаки могут быть собственностью третьих лиц.