Создание приложения на основе навигации в WPF

Автор: Кепил Део Малхотра (Kapil Deo Malhotra)

В этой статье показывается, как создавать Windows-приложение на основе навигации в WPF.

Существует два типа Windows-приложений. Первое — это стандартное Windows-приложение, обычно с тем же старым стилем Standalone (изолированное), иногда оно называется приложением рабочего стола. Второе называется приложением на основе навигации и является разновидностью веб-приложений. Поведение соответствует типу мастера приложения, когда можно переходить между окнами и выполнять задачу.

В WPF имеется способ создания Windows-приложения типа веб-страницы, когда можно выполнять навигацию между элементами управления Window или Page.

Обычно при создании приложения WPF XAML создает элемент управления Window, который имеет атрибуты Title, Width, Height и Windows Startup, как показано ниже.

Window1.xaml:

<Window x:Class="WpfApplication2.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x=https://schemas.microsoft.com/winfx/2006/xaml Title="ListView" Height="350" Width="400" Loaded="Window1_Loaded">
</Window>

Но при создании приложения на основе навигации элемент управления имеет тег Page вместо тега Window и не может иметь атрибут Title и некоторые другие свойства и атрибуты. Тег Page выглядит следующим образом:

Page1.xaml:

<Page x:Class="WpfApplication2.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=https://schemas.microsoft.com/winfx/2006/xaml WindowHeight="300" WindowWidth="300">
</Page>

Пример 1. В следующем примере показано, как можно реализовать приложение на основе навигации. В сущности, после размещения тега Page он будет отображать окно с панелью инструментов навигации, как показано на рисунке 1.

Window1.xaml

<Page x:Class="wpfnavigationwindow_cs.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    WindowHeight="300" WindowWidth="300"
    >
          <StackPanel>
                   <TextBlock HorizontalAlignment="Center" FontSize="25">My First Navigation App</TextBlock>
                   <StackPanel Orientation="Horizontal">
                             <Image Source="IMG116.jpg" Width="100px"/>
                             <TextBlock HorizontalAlignment="Center">This is my Network..</TextBlock>
                   </StackPanel>
                   <TextBlock>
                             Go <Hyperlink NavigateUri="Page1.xaml">Here</Hyperlink> to go to Next Page.
                             <TextBlock>
                                      <Hyperlink NavigateUri="http://www./www.c-sharpcorner.com">Go to the Site</Hyperlink>
                             </TextBlock>
                   </TextBlock>
          </StackPanel>
</Page>

Windows1.xaml.cs

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace wpfnavigationwindow_cs

{

          /// <summary>

          /// Interaction logic for Window1.xaml

          /// </summary>

          public partial class Window1 : System.Windows.Controls.Page

          {

                   public Window1()

                   {

                             InitializeComponent();

                   }

 

          }

}

Рисунок 1

При нажатии на ссылку "Here" выполняется навигация на следующую страницу Next Page, как указано в свойстве NavigationURI элемента управления Hyperlink. URI имеет файл параметров страницы (XAML), и при перемещении на следующую страницу он включает панель инструментов навигации, как показано на рисунке 2.

Page1.xaml

<Page x:Class="wpfnavigationwindow_cs.Page1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    >
    <Grid>
                   <TextBlock>This is Page 1.  Congratulations you made it.</TextBlock>
          </Grid>
</Page>

Рисунок 2

Однако рекомендуется, чтобы приложение на основе навигации использовало NavigationWindowinstead элемента управления Page. Поскольку элемент управления Page наиболее часто используется в веб-приложениях и для получения других преимуществ, можно получить свойства элемента управления Window. Теперь можно установить свойство Title окна NavigationWindow.

Другое преимущество состоит в том, что можно устанавливать Source, который будет открывать элемент управления Windows в элементе управления NavigationWindow. Страница XAML будет выглядеть следующим образом.

Window2.xaml

<NavigationWindow x:Class="wpfnavigationwindow_cs.Window2"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Here is my application" Height="300" Width="300" Source="Window1.xaml"
> 
</NavigationWindow>

Примечание. В качестве значения Source устанавливается Window1.xaml, поэтому он будет открывать window1.xaml в элементе управления NavigationWindow

Теперь можно установить атрибут StartupUri App.xaml в значение Window2.xaml, чтобы при запуске приложения открывалось приложение NavigationWindow.

App.xaml

<Application x:Class="wpfnavigationwindow_cs.App"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window2.xaml"
    >
    <Application.Resources>
        
    </Application.Resources>
</Application>