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

</Page>

Заголовок страницы («My Application») определен в XAML-ресурсах страницы и отображается в текстовом блоке с именем pageTitle с помощью механизма связывания данных. Кнопка перехода на предыдущую страницу (backButton) использует стиль NavigationBackButtonNormalStyle, поэтому выглядит как круг со стрелкой, а не как стандартная прямоугольная кнопка.

Помимо самой страницы были добавлены файлы, которые можно увидеть в папке Common проекта приложения. Поскольку эти файлы используются рядом шаблонов (в том числе шаблоном Basic Page), их не рекомендуется перемещать, переименовывать или удалять.

Добавим на страницу MainPage. xaml возможность перехода на страницу Page2.xaml. Для этого создадим новый элемент управления, выглядящий как ссылка, - гипертекстовую кнопку (HyperlinkButton).

Укажем название (свойство Name) гипертекстовой кнопки, например, «HyperlinkButtonToPage2», заменим содержимое (свойство Content) текстом «Страница 2», также зададим расположение кнопки с помощью выравнивания и отступов (свойства HorizontalAlignment, VerticalAlignment и Margin: выровняем по центру как и первую кнопку, но поднимем выше на 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"/>

</Grid>

Затем добавим обработчик нажатия на кнопку (Click) и воспользуемся предложением автоматически создать для этого новый метод.

Код обработчика будет содержать переход на вторую страницу, выполняемый с помощью известного нам метода Navigate (аргумент - тип страницы - Page2).

private void HyperlinkButtonToPage2_Click(object sender, RoutedEventArgs e)

{

  this. Frame. Navigate(typeof(Page2));

}

Передача параметров между страницами

Теоретически странице, на которую осуществляется переход, можно передать объект любого типа. Для этого данный объект следует указать вторым аргументом функции Navigate объекта класса Frame. Однако на практике в качестве параметров следует передавать только простые типы, такие как int, string, char, Guid и т. д.

Замечание. GUID (Globally Unique Identifier) — статистически уникальный 128-битный идентификатор. Вероятность дублирования такого идентификатора очень мала. В тексте GUID обычно записывается в виде строки из тридцати двух шестнадцатеричных цифр, разбитой на группы дефисами и окружённой фигурными скобками: {6F9619FF-8B86-D011-B42D-00CF4FC964FF}

Это связано с тем, что ссылка на объект, переданный в качестве параметра, будет храниться в стеке навигации фрейма, занимая память. Кроме того, в случае приостановки приложения, фрейм сможет сериализовать только простые типы.

Замечание. Сериализация — процесс перевода какой-либо структуры данных в последовательность битов. Обратной к операции сериализации является операция десериализации (структуризации) — восстановление начального состояния структуры данных из битовой последовательности. Сериализация используется для передачи объектов по сети и для сохранения их в файлы.

Передадим второй странице в качестве параметра строковый литерал (например, «(<- MainPage) Это Страница 2»).

private void HyperlinkButtonToPage2_Click(object sender, RoutedEventArgs e)

{

  this. Frame. Navigate(typeof(Page2), "(<- MainPage) Это Страница 2");

}

Для того чтобы обработать переданный параметр, необходимо переопределить метод OnNavigatedTo на странице, на которую осуществляется переход. В нашем случае это вторая страница Page2.xaml. Установим параметр-строку в качестве заголовка страницы.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

  string param = e. Parameter as string;

  pageTitle. Text = param;

  navigationHelper. OnNavigatedTo(e);

}

В методе OnNavigatedTo параметр приводится к нужному типу (в нашем случае к строке). Затем свойству Text заголовка страницы (pageTitle) устанавливается значение переданной строки. Теперь мы можем запустить приложение. Проверим его работу, перейдя на вторую страницу и затем вернувшись обратно на начальную.

Рис.15 Страница Page2

Рис. 16 Страница MainPage

При желании стандартную анимацию появления элементов страницы EntranceThemeTransition можно сменить:

Задание. Добавьте в приложение третью страницу. Организуйте возможность переходов между тремя страницами приложения.

Панель приложения

Панель приложения (Application Bar) — один из ключевых элементов управления в Windows Store – приложениях. На странице могут быть максимум две панели приложения, одна из которых открывается снизу, другая сверху. Несмотря на то, что название панели содержит слово Application, из-за которого оно и переводится, как «панель приложения», задается она индивидуально для каждой страницы, а не на уровне приложения в целом. Поэтому на различных страницах могут быть разные панели приложения, а на каких-то страницах их может не быть вовсе. Хотя также можно создать и такие панели приложения, которые будут отображаться на нескольких страницах.

Панели приложения по умолчанию скрыты и открываются в случае необходимости. Они находятся как бы «вне страницы» и при открытии «наплывают» на ее содержимое. Верхняя и нижняя панели приложения открываются и закрываются вместе. Пользователь может открыть панели приложения щелчком правой кнопкой мыши на странице, либо нажав комбинацию клавиш Windows + Z, либо проведя пальцем в направлении от верхнего или нижнего края сенсорного экрана. Панели приложения можно открывать и закрывать также программным образом. Например, при выделении какого-либо элемента в приложении можно открыть панель приложения с контекстными командами, применимыми к выделенному элементу.

Внутри панелей приложения могут находиться любые элементы управления, их можно использовать для размещения элементов навигации, команд и инструментов для пользователей. Однако базовые команды должны находиться в основном окне приложения, а не в панелях. Нижнюю панель приложения обычно используют для команд, а верхнюю — для навигации. Верхняя панель используется реже. На большинстве страниц присутствует только нижняя панель приложения, в которой размещаются кнопки различных действий. Некоторые из этих кнопок могут открывать дополнительные меню.

Создание панелей приложения

Для добавления панелей приложения необходимо установить свойство BottomAppBar (для нижней панели приложения) или TopAppBar (для верхней соответственно) страницы. Сама панель приложения представляет собой элемент управления AppBar.

<Page...>

  ...

  <Page. TopAppBar>

  <AppBar>

  <!-- Содержимое верхней панели приложения -->

  </AppBar>

  </Page. TopAppBar>

  <Page. BottomAppBar>

  <AppBar>

  <!-- Содержимое нижней панели приложения -->

  </AppBar>

  </Page. BottomAppBar>

  ...

</Page>

Разместим в нижней панели приложения две кнопки панели приложения (AppBarButton), разделитель (AppBarSeparator) и одну кнопку-переключатель (AppBarToggleButton) слева и одну кнопку (AppBarButton) справа.

Для последовательного расположения и выравнивания элементов панели используем StackPanel.

Замечание. StackPanel - контейнер, располагающий дочерние элементы в одну строку, которую можно ориентировать по горизонтали или по вертикали.

Следует отметить, что перетаскиванием из панели инструментов элементы можно добавлять не только в визуальную часть редактора страницы, но и сразу в XAML-разметку.

<AppBar Name="bottomAppBar">

  <Grid> 

  <StackPanel Orientation="Horizontal">

  <AppBarButton Label="AppBarButton" />

  <AppBarButton Label="AppBarButton" />

  <AppBarSeparator />

  <AppBarToggleButton /> 

  </StackPanel>

  <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

  <AppBarButton Label="AppBarButton" />

  </StackPanel>

  </Grid>

  </AppBar>

Кнопки круглые, так как это стандартный вид кнопок панели приложения. Кнопкам можно назначить вид (Icon) и подпись (Label).

Выбрать вид кнопки можно по названию с помощью подсказки (IntelliSense) непосредственно в XAML-разметке или в окне редактирования свойств (Properties) элемента:

Зададим кнопкам подписи и иконки:

  <Page. BottomAppBar>

  <AppBar Name="bottomAppBar">

  <Grid>

  <StackPanel Orientation="Horizontal">

  <AppBarButton Label="Кнопка 1" Icon="Favorite"></AppBarButton>

  <AppBarButton Label="Кнопка 2" Click="AppBarButton_Click" >

  <AppBarButton. Icon>

  <SymbolIcon/>

  </AppBarButton. Icon>

  </AppBarButton>

  <AppBarSeparator></AppBarSeparator>

  <AppBarToggleButton Label="Переключатель" Icon="Audio" />

  </StackPanel>

  <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

  <AppBarButton Label="Кнопка 3" Icon="ClosePane"></AppBarButton> 

  </StackPanel>

  </Grid>