WPF Navigation: Используем связку Page + Frame

image

Windows Presentation Foundation имеет много вариантов создания многооконного приложения. Среди них выделяются два типа: стандартный привычный Window и «браузерный» Page. Ничего особенно интересного для меня в Window не было, поэтому решил попробовать браузерный вариант в десктопном приложении. Звучит несколько странно и, возможно, абсурдно, но менее интересно от этого не становится. В данном топике будут описаны основные этапы создания данной навигации.


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


Первым делом, мы должны создать проект WPF Application (File -> New -> Project -> C# -> WPF Application). Выбор версии Framework`а никакой роли не играет. В нашем новом приложении уже есть одно «окно» MainWindow.xaml, которое будет является своеобразным layout`ом для наших страниц. На нем размещаем меню для навигации, создаем кнопки, ссылки… тип элемента не влияет на код.

Пример с использованием кнопок приведен ниже

<Button Click="Button_Click">
  <Image Source="/Images/find.gif" />
</Button>
<Button Click="Button_Click_1">
  <Image Source="/Images/add.gif" />
</Button>
<Button Click="Button_Click_2">
  <Image Source="/Images/dict.gif" />
</Button>


Создаем страницы


Процесс аналогичен созданию окон. Кликаем по нашему проекту -> Add -> Page… После подтверждения получаем очередной xaml-файл. В отличии от окон, класс нашей страницы наследует Page. Разметку делаем как у обычных форм, с той лишь разницей, что основной тег Page должен включать лишь одного непосредственного потомка, но особых проблем это не доставляет, так как мы будем использовать Grid, который может включать любое количество потомков. Также стоит помнить, что это всего лишь фрейм, так что ничего лишнего помещать туда не нужно.
Следует сказать отдельно о размерах фрейма/страницы. В конечном приложении будет использоваться размер фрейма, т.е. размер страницы напрямую ни на что не влияет, а вот позиция элементов страницы определяется их размещением на странице относительно, например, границ, т.е. отступ в 24px сверху и 20px справа останется и в главном окне (относительно границ фрейма).



Работаем с главным окном


К данному моменту у нас должны быть: одно главное окно(layout) с навигацией и несколько страниц с контентом. В главном окне создадим элемент Frame, настроим его расположение и размеры, назовем, например, «mainFrame». Нашим кнопкам(ссылкам) присвоим событие(например, Click у кнопки). Теперь приступим к редактированию кода, а, точнее, всего лишь одной функции(вызываемой по событию). Функция смены страницы в фрейме крайне проста и лаконична.

private void Button_Click(object sender, RoutedEventArgs e)
{
  frame.NavigationService.Navigate(new Uri("Find.xaml", UriKind.Relative));
}


Соответственно, вместо «Find.xaml» пишем название своего файла-страницы. На другие кнопки вешаем подобные события, но с другими названиями файлов.
Вот, собственно, и все. Безусловно, это лишь каркас будущей навигации, который можно модифицировать и настраивать по собственному вкусу, благодаря богатой .net библиотеке.

Напоследок скриншот того, что должно получиться в итоге:

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

    0
    Вы бы хоть MVVM использовали при создании каркаса, а то просто получается пересказ МСДНа какой-то…
      0
      Или описали как сделать переход не на компиляемую страницу, а на динамически распарсиваемые XAML'ы из подкаталога приложения. Я когда-то давно делал подобное…
      А тут просто создал из темплейта студии приложение и рассказал «че это такЭ». Ничего интересного.
        0
        Суть поста в демонстрации работы Page в, так сказать, вакуумном WPF. Не затрагивая другие технические моменты… А вот статья на msdn мне лично не очень понравилась, как-то слишком абстрактно и размыто.
          0
          А чем у вас лучше?
            0
            «Суть поста в демонстрации работы Page в, так сказать, вакуумном WPF. „
            На мой взгляд этого маловато для статьи на хабре.

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

        Самое читаемое