Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Первое приложение Metro на C#

1

Приступим   к   созданию   нашего   первого   приложения   Metro   на    языке программирования C#. Для этого создайте проект на основе пустого шаблона и откройте для редактирования файл BlankPage.xaml. В этом файле определен основной контейнер Grid, расположенный внутри элемента Page.

Установим для элемента Grid свойство VerticalAlignment="Center",  а  внутрь добавим элемент TextBox, вот таким образом:

<TextBlock Text="Hello Windows 8!" TextAlignment="Center" FontSize="64" Name="fillBox" />

Запустив это приложение, мы увидим, что на экране появилось сообщение "Hello Windows 8!". Оно находится в центре экрана и отображается в горизонтальной или вертикальной ориентации планшетного ПК. Но если перевести приложение в прикрепленный режим, то получим следующую картину.

Рис. 1.19.

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

Для этого в элементе Page пропишем обработчики событий, связанных с загрузкой и    исчезновением    страницы:    Loaded="Page_Loaded",    Unloaded="Page_ Unloaded". Код этих событий можно посмотреть ниже.

private void Page_Loaded(object sender, RoutedEventArgs e)

{

ApplicationView.GetForCurrentView().ViewStateChanged += this.ViewStateChanged;

VisualStateManager.GoToState(this, ApplicationView.Value.ToString(), false);

}

private void Page_Unloaded(object sender, RoutedEventArgs e)

{

ApplicationView.GetForCurrentView().ViewStateChanged -= this.ViewStateChanged;

}

Первое, что происходит в  обработчике Page_Loaded,  это установка  метода, реагирующего на событие ViewStateChanged класса ApplicationView, который позволяет получить текущее состояние  приложений (ориентацию и режим), а с помощью события ViewStateChanged уведомляет об изменении состояния всех желающих. Во второй строке метода Page_Loaded инициируется переход приложения в текущий режим. Это делается с помощью  метода GoToState класса   VisualStateManager,  который   знаком   многим   разработчикам  по Silverlight или WPF.

Обработчик события ViewStateChanged выглядит следующим образом:

private void ViewStateChanged(ApplicationView sender, ApplicationViewStateChangedEventArgs e)

{

VisualStateManager.GoToState(this, e.ViewState.ToString(), false);

}

Тут     мы     получаем    текущее    состояние    приложения    и     переводим

VisualStateManager в соответствующее состояние.

Давайте посмотрим, какие состояния могут быть у приложения. Все состояния определяются в перечислимом типе ApplicationViewState.

·                   Filled  —  в  стиле  Metro  на  экране  могут  размещаться  максимум два приложения. При этом одно из них находится в прикрепленном (Snapped) режиме,  а  второе  занимает  оставшуюся  часть  экрана  или  находится в режиме Filled.

·                   FullScreenLandscape — приложение находится в альбомной ориентации.

·                   FullScreenPortrait — приложение находится в книжной ориентации.

·                   Snapped — определяет прикрепленный режим для приложения.

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

Теперь перейдем к изменению XAML-файла. Модифицируем код внутри элемента

Grid следующим образом:

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="OrientationStates">

<VisualState x:Name="FullScreenLandscape" />

<VisualState x:Name="Filled" />

<VisualState x:Name="FullScreenPortrait" />

<VisualState x:Name="Snapped">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="snappedPanel">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="fillBox">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<TextBlock Text="Hello Windows 8!" TextAlignment="Center" FontSize="64" Name="fillBox" />

<StackPanel HorizontalAlignment="Center"

VerticalAlignment="Center" Name="snappedPanel" Visibility="Collapsed">

<TextBlock Text="H" FontSize="64" HorizontalAlignment="Center" />

<TextBlock Text="E" FontSize="64" HorizontalAlignment="Center" />

<TextBlock Text="L" FontSize="64" HorizontalAlignment="Center" />

<TextBlock Text="L" FontSize="64" HorizontalAlignment="Center" />

<TextBlock Text="O" FontSize="64" HorizontalAlignment="Center" />

</StackPanel>

Тут мы определили дополнительный контейнер StackPanel, куда  разместили несколько текстовых блоков, отображающих надпись  Hello в  центре экрана по  вертикали.  По  умолчанию  этот  контейнер  является  невидимым,  но  как только   приложение   переходит   в   прикрепленный  режим,   он   становится видимым,  а  основной   элемент  с  надписью  "Hello  Windows  8!",  наоборот, скрывается.  Изменение свойства Visibility  происходит с  помощью элемента VisualStateManager,  который  определяет  переходы  свойств   интерфейсных элементов из одного состояния в другое с помощью обычной анимации.

Если запустить приложение, то в прикрепленном режиме мы увидим следующую картину.

Рис. 1.20.

Теперь приложение работает должным образом.

В завершение главы обратим внимание на файлы, которые присутствуют в нашем проекте, а  именно LayoutAwarePage.cs. Если Вы  посмотрите  на  код  данного файла, то сможете найти много общего с тем, что  мы  написали. Правда, код в файле LayoutAwarePage.cs более  универсальный и позволяет определить не только механизмы изменения состояния страницы, но и механизмы навигации и представления. Вы можете использовать класс LayoutAwarePage как базовый, чтобы избежать написания кода, который кто-то уже написал за Вас. Именно так происходит в шаблонах проектов, отличных от Blank.

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии

1 комментарий

  1. ApplicationView.GetForCurrentView().ViewStateChanged += this.ViewStateChanged;

    не видит события ViewStateChanged
    как в примере и по книге.