Перший додаток Metro на C #

Приступимо до створення нашого першого застосування Metro на мові програмування C # Для цього створіть проект на основі порожнього шаблону і відкрийте для редагування файл BlankPagexaml У цьому файлі визначено основний контейнер Grid, Розташований всередині елемента Page

Встановимо для елемента Grid властивість VerticalAlignment=&quotCenter&quot, А всередину додамо елемент TextBox, Ось таким чином:

&ltTextBlock Text=&quotHello Windows 8&quot TextAlignment=&quotCenter&quot FontSize=&quot64&quot Name=&quotfillBox&quot /&gt

Запустивши це додаток, ми побачимо, що на екрані зявилося повідомлення Hello Windows 8″. Воно знаходиться в центрі екрану і відображається в горизонтальній або вертикальній орієнтації планшетного ПК Але якщо перевести додаток в прикріплений режим, то отримаємо таку картину

Рис 119

Подібна робота додатка неприпустима, тому спробуємо написати код, який реагуватиме на перехід додатки в прикріплений режим і відображати текст коректно

Для цього в елементі Page пропишемо обробники подій, повязаних із завантаженням і зникненням сторінки:Loaded=&quotPage_Loaded&quot,    Unloaded=&quotPage_ Unloaded&quot. Код цих подій можна побачити нижче

private void Page_Loaded(object sender, RoutedEventArgs e)

{

ApplicationViewGetForCurrentView()ViewStateChanged += thisViewStateChanged

VisualStateManagerGoToState(this, ApplicationViewValueToString(), false)

}

private void Page_Unloaded(object sender, RoutedEventArgs e)

{

ApplicationViewGetForCurrentView()ViewStateChanged -= thisViewStateChanged

}

Перше, що відбувається в обробнику Page_Loaded, Це установка методу, що реагує на подію ViewStateChanged класу ApplicationView, Який дозволяє отримати поточний стан додатків (орієнтацію і режим), а за допомогою події ViewStateChanged повідомляє про зміну стану всіх бажаючих У другому рядку методу Page_Loaded ініціюється перехід додатки в поточний режим Це робиться за допомогою методу GoToState класуVisualStateManager, Який знайомий багатьом розробникам по Silverlight або WPF

Обробник події ViewStateChanged виглядає наступним чином:

private void ViewStateChanged(ApplicationView sender, ApplicationViewStateChangedEventArgs e)

{

VisualStateManagerGoToState(this, eViewStateToString(), false)

}

Тут ми отримуємо поточний стан програми та переводимо

VisualStateManager у відповідний стан

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

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Filled  – У стилі Metro на екрані можуть розміщуватися максимум два додатки При цьому одна з них знаходиться у прикріпленому (Snapped) режимі, а другий займає решту екрану або знаходиться в режимі Filled

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FullScreenLandscape – Додаток знаходиться в альбомній орієнтації

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FullScreenPortrait – Додаток знаходиться в книжковій орієнтації

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Snapped – Визначає прикріплений режим для програми

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

Тепер перейдемо до зміни XAML-файла Модифікуємо код всередині елемента

Grid наступним чином:

&ltVisualStateManagerVisualStateGroups&gt

&ltVisualStateGroup x:Name=&quotOrientationStates&quot&gt

&ltVisualState x:Name=&quotFullScreenLandscape&quot /&gt

&ltVisualState x:Name=&quotFilled&quot /&gt

&ltVisualState x:Name=&quotFullScreenPortrait&quot /&gt

&ltVisualState x:Name=&quotSnapped&quot&gt

&ltStoryboard&gt

&ltObjectAnimationUsingKeyFrames StoryboardTargetProperty=&quotVisibility&quot StoryboardTargetName=&quotsnappedPanel&quot&gt

&ltDiscreteObjectKeyFrame KeyTime=&quot0&quot Value=&quotVisible&quot&gt

&lt/DiscreteObjectKeyFrame&gt

&lt/ObjectAnimationUsingKeyFrames&gt

&ltObjectAnimationUsingKeyFrames StoryboardTargetProperty=&quotVisibility&quot StoryboardTargetName=&quotfillBox&quot&gt

&ltDiscreteObjectKeyFrame KeyTime=&quot0&quot Value=&quotCollapsed&quot&gt

&lt/DiscreteObjectKeyFrame&gt

&lt/ObjectAnimationUsingKeyFrames&gt

&lt/Storyboard&gt

&lt/VisualState&gt

&lt/VisualStateGroup&gt

&lt/VisualStateManagerVisualStateGroups&gt

&ltTextBlock Text=&quotHello Windows 8&quot TextAlignment=&quotCenter&quot FontSize=&quot64&quot Name=&quotfillBox&quot /&gt

&ltStackPanel HorizontalAlignment=&quotCenter&quot

VerticalAlignment=&quotCenter&quot Name=&quotsnappedPanel&quot Visibility=&quotCollapsed&quot&gt

&ltTextBlock Text=&quotH&quot FontSize=&quot64&quot HorizontalAlignment=&quotCenter&quot /&gt

&ltTextBlock Text=&quotE&quot FontSize=&quot64&quot HorizontalAlignment=&quotCenter&quot /&gt

&ltTextBlock Text=&quotL&quot FontSize=&quot64&quot HorizontalAlignment=&quotCenter&quot /&gt

&ltTextBlock Text=&quotL&quot FontSize=&quot64&quot HorizontalAlignment=&quotCenter&quot /&gt

&ltTextBlock Text=&quotO&quot FontSize=&quot64&quot HorizontalAlignment=&quotCenter&quot /&gt

&lt/StackPanel&gt

Тут ми визначили додатковий контейнер StackPanel, Куди розмістили кілька текстових блоків, що відображають напис Hello в центрі екрану по вертикалі За умовчанням цей контейнер є невидимим, але як тільки додаток переходить в прикріплений режим, він стає видимим, а основний елемент з написом Hello Windows 8″, навпаки, ховається Зміна властивості Visibility  відбувається за допомогою елемента VisualStateManager, Який визначає переходи властивостей інтерфейсних елементів з одного стану в інший за допомогою звичайної анімації

Якщо запустити додаток, то в прикріпленому режимі ми побачимо наступну картину

Рис 120

Тепер додаток працює належним чином

На завершення глави звернемо увагу на файли, які присутні в нашому проекті, а саме LayoutAwarePagecs Якщо Ви подивіться на код даного файлу, то зможете знайти багато спільного з тим, що ми написали Правда, код в файлі LayoutAwarePagecs більш універсальний і дозволяє визначити не тільки механізми зміни стану сторінки, а й механізми навігації і уявлення Ви можете використовувати клас LayoutAwarePage як базовий, щоб уникнути написання коду, який хтось вже написав за Вас Саме так відбувається в шаблонах проектів, відмінних від Blank

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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*