Основы разработки приложений на языке С# под Windows 8, 2014 (стр. 6 )

  </AppBar>

  </Page. BottomAppBar>

Запустим приложение, щёлкнем правой кнопкой мыши, чтобы открыть панели приложения. Посмотрим, какая панель приложений у нас получилась:

Замечание

В Windows 8 отсутствует специальный вид кнопок AppBarButton, нужный вид кнопкам придаётся с помощью стилей:

Button Style="{StaticResource PlayAppBarButtonStyle}" вместо

AppBarButton Icon="Play" Label="Play"

Стили находятся в StandardStyles. xaml в закомментированном виде, перед их применением нужные стили следует раскомментировать. Некоторые стили задают подписи к кнопкам автоматически, также подпись можно задать с помощью AutomationProperties. Name.

Свойство IsSticky

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

<AppBar Name="bottomAppBar" IsSticky="True">

Кроме того, панель приложения предоставляет и другие полезные свойства, например IsOpen, регулирующее открытие и закрытие панели приложения.

Задание. Самостоятельно изучите свойство IsOpen.

Отображение всплывающих окон и меню

При нажатии на кнопку панели приложения часто бывает необходимо отобразить меню или интерфейс для ввода дополнительных данных. Для этого можно использовать механизм всплывающих окон. Экземпляры класса Popup отображаются в заданных координатах поверх содержимого страницы, внутри могут находиться любые элементы управления.

Отобразим всплывающее окно по нажатию на одну из кнопок панели приложения. Графический интерфейс всплывающего окна определим в коде, это будет прямоугольная панель на основе элемента Grid с цветом фона как у самой панели и кнопкой посередине.

private void AppBarButton_Click(object sender, RoutedEventArgs e)

  {

  Popup popup = new Popup();

  popup. IsLightDismissEnabled = true;

  Grid panel = new Grid();

  panel. Background = bottomAppBar. Background;

  panel. Height = 250;

  panel. Width = 150;

  Button btnMain = new Button();

  btnMain. Content = "Кнопка";

  btnMain. VerticalAlignment = VerticalAlignment. Center;

  btnMain. HorizontalAlignment = HorizontalAlignment. Center;

  panel. Children. Add(btnMain);

  popup. Child = panel;

  var button = (Button)sender;

  var transform = button. TransformToVisual(this);

  var point = transform. TransformPoint(new Point());

  popup. HorizontalOffset = point. X;

  popup. VerticalOffset = Window. Current. CoreWindow. Bounds. Bottom –

                                       bottomAppBar. ActualHeight - panel. Height - 4;

  popup. IsOpen = true;

  }

Для отображения всплывающего окна необходимо задать его содержимое Child, у нас это панель panel (которая в свою очередь содержит кнопку btnMain), а также местоположение (HorizontalOffset и VerticalOffset) и установить свойство IsOpen в значение true.

Запустим приложение, откроем панель приложения и нажмём кнопку, для которой добавили всплывающее окно:

С помощью всплывающего окна можно создать любой графический интерфейс, в том числе меню. Но для отображения всплывающего меню предназначен специальный класс PopupMenu. Всплывающие окна и меню можно использовать и отдельно от панелей приложения. Например, во всплывающих окнах часто отображаются настройки приложения.

Задание. Поэкспериментируйте с кнопкой-переключателем AppBarToggleButton так, чтобы её подпись изменялась в зависимости от состояния.

«Живые» плитки

Плитки (Tiles) приложений – одно из основных нововведений интерфейса Windows 8. Основное отличие плиток от привычных иконок состоит в том, что их можно «оживлять» (Live Tile), то есть на плитках можно отображать меняющуюся информацию для пользователя независимо от того, запущено ли приложение. Также приложения могут создавать дополнительные плитки (Secondary Tiles), с помощью которых пользователь получает доступ в какой-то определённый раздел или экран приложения и дополнительную тематическую информацию на самой плитке.

Плитки бывают двух видов - квадратные и прямоугольные (широкие) - и разных размеров. Например, в Windows 8.1:

Большая плитка (310 x 310 пикселей); Широкая плитка (310 x 150 пикселей); Средняя плитка (150 x 150 пикселей); Маленькая плитка (30 x 30 пикселей).

Рис. 17. Виды плиток

Плитка любого формата может содержать текст, изображения или и текст, и изображения одновременно. На ней также может отображаться индикатор событий и логотип или краткое название. Индикатор событий отображается в правом нижнем углу, а логотип или краткое название — в левом нижнем углу.

Настройка плиток для приложения

Настроим плитку для нашего приложения. Для этого выполните следующие действия:

Выберите область «Визуальные активы» (Application UI, Пользовательский интерфейс приложения) в редакторе манифестов. Замените изображения по умолчанию на пути к вашим изображениям логотипа (или измените сами картинки).

Укажите, отображать ли короткое имя приложения на плитке. Длина этого имени не должна превышать 13 символов. Слишком длинное имя будет усекаться. Для отображения можно выбрать логотип, имя или ни то, ни другое. В зависимости от цвета фона выберите светлый или темный шрифт текста имени. Примите цвет фона по умолчанию или укажите собственную строку цвета, например, #FFFFFF. Цвет фона используется для определения цвета других элементов приложения, например, кнопок в любом диалоговом окне приложения и страницы "Описание приложения" в Магазине Windows.

Замечание. #FFFFFF – это константа, соответствующая белому цвету в RGB модели.

После этого в Windows 8 выберите приложение в списке установленных приложений и закрепите его на начальном экране:

Рис. 18. Закрепление приложения в виде плитки
на начальном экране Windows 8

Теперь на начальном экране отображается плитка нашего приложения с настроенными нами параметрами:

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

Изменение плитки

Добавим нашему приложению возможность временной смены плитки по нажатию на кнопку.

Содержимое плитки определяется в XML на основании набора шаблонов, предоставляемых Windows.

Каталог шаблонов плиток можно найти по ссылкам:

http://msdn. /ru-ru/library/windows/apps/hh761491.aspx

или

http://msdn. /en-us/library/windows/apps/ windows. ui. notifications. tiletemplatetype. aspx)

Чтобы определить содержимое плитки, нужно заполнить шаблон собственным текстом и изображениями. Выберем один из шаблонов и ознакомимся с ним подробнее:

Название шаблона в Windows 8 (версия 1):  TileSquarePeekImageAndText04

Название шаблона в Windows 8.1 (версия 2): TileSquare150x150PeekImageAndText04

Рис. 19. Пример шаблона плитки

Мы выбрали один из средних (150x150) обзорных шаблонов. Обзорные шаблоны поставляют содержимое плитки, которое прокручивается между двумя рамками информации в пространстве плитки (такие плитки иногда называют анимированными или двусторонними). Верхняя рамка — это изображение или семейство изображений, нижняя рамка — это текст или текст с изображением. В нашем шаблоне верхний край: квадратное изображение, без текста, нижний край: одна строка обычного текста с переносом не более чем на четыре строки.

Пример XML-кода для версии 2:

<tile>

  <visual version="2">

  <binding template="TileSquare150x150PeekImageAndText04" fallback="TileSquarePeekImageAndText04">

  <image id="1" src="image1" alt="alt text"/>

  <text id="1">Text Field 1</text>

  </binding> 

  </visual>

Вернёмся к нашему проекту и добавим в разметку главной страницы MainPage. xaml ещё одну кнопку (назовём её «AppTileButton» и разместим на 200 пикселей ниже центра экрана):

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

  <Button x:Name="MyButton" Content="Нажми меня"

HorizontalAlignment="Center" VerticalAlignment="Center"

Click="MyButton_Click"/>

  <HyperlinkButton x:Name="HyperlinkButtonToPage2" Content="Страница 2"

               HorizontalAlignment="Center" VerticalAlignment="Center"

Margin="0,-200,0,0" Click="HyperlinkButtonToPage2_Click"/>

  <Button Name="AppTileButton" Content="Изменить плитку"

HorizontalAlignment="Center" VerticalAlignment="Center"

Margin="0, 200, 0, 0" Click="AppTileButton_Click" />

</Grid>

Также сразу создадим обработчик события нажатия на эту кнопку (AppTileButton_Click в MainPage. xaml. cs).

Для работы с уведомлениями необходимо подключить соответствующее пространство имён Windows. UI. Notifications (в MainPage. xaml. cs):

using Windows. UI. Notifications;

Чтобы вручную заполнить XML, подключим также Windows. Data. Xml. Dom

using Windows. Data. Xml. Dom;

Замечание. Модель DOM - это стандартизованный, структурированный способ представления XML-данных в памяти. Модель DOM позволяет читать, обрабатывать и изменять XML-документ программным образом: изменять значения атрибута, содержимое элемента, вставлять и удалять узлы.