SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

NavigationWindowを使った画面遷移

WPFでは、Windowクラスの代わりにNavigationWindowというクラスを使うと、複数ページ間で画面遷移を行うプログラムを簡単に作成できます。
NavigationWindowでは、SourceプロパティでPage要素を持ったXAMLを指定すると、そのページを表示できます。

ちょっとしたウィザード的なアプリのように、段階的に画面遷移を伴うアプリを作るのに適してそうです。

NavigationWindowクラスの使い方

  1. 新規プロジェクトで、WPFアプリケーションを作成
  2. Pageの追加
    1. プロジェクトに、新しい項目の追加で、ページを追加する(Page1.xaml)
  3. MainWindow.xamlの編集
    1. Windowクラスを書いている部分をNavigationWindowに変更する。
    2. ↑のContentに書かれていたGridを削除
    3. Sourceプロパティに、表示するPage(Page1.xaml)を指定する。
  4. MainWindow.xaml.csで、MainWindowをNavigationWindowから派生するように書き換え

これで、以下のようなNavigationWindowでホストされた画面が表示できるようになります。

MainWindow.xaml
<NavigationWindow x:Class="NavigationTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400" Source="Page1.xaml">
</NavigationWindow>
MainWindow.xaml.cs

ウィザードで生成されたコードのまま。

Page1.xaml
<Page x:Class="NavigationTest.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      Title="Page1"
      d:DesignHeight="300"
      d:DesignWidth="300"
      mc:Ignorable="d">
    <Grid>
        <TextBlock Margin="10,10,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Text="Page1"
                   TextWrapping="Wrap" />

    </Grid>
</Page>
Page1.xaml.cs

ウィザードで生成されたコードのまま。


ページ遷移の実装方法

ページ遷移はNavigationServiceを使ってコードから指定する方法と、XAML上で遷移先を指定する方法があります。

コードビハインドから遷移先を指定する。

NavigationServiceのStaticメソッドで画面遷移の制御を行います。
以下のように、Uriで指定したり、インスタンスを渡して遷移したりできます。

// Uriで遷移
NavigationService.Navigate(new Uri("Page2.xaml", UriKind.Relative));
// Pageインスタンスを渡して遷移
var nextPage = new Page2();
NavigationService.Navigate(nextPage);
XAML上で遷移先を定義する

Hyperlinkコントロールを使うことで、XAML上から遷移先を指定することができます。
Hyperlinkは、UIElement派生クラスではないので、Gridなどのパネル配下に直接おくことはできません。
TextBlockなどの中身として記述する必要があります。

        <TextBlock Margin="10,78,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   TextWrapping="Wrap">
            <Run Text="リンク:"/>
            <Hyperlink NavigateUri="Page2.xaml">
                <Run Text="Page2へ遷移します"/>
            </Hyperlink>
        </TextBlock>


この辺を使ったコードは以下の通り。

Page1.xaml
<Page x:Class="NavigationTest.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      Title="Page1"
      d:DesignHeight="300"
      d:DesignWidth="300"
      mc:Ignorable="d">

    <Grid>
        <TextBlock Margin="10,10,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Text="Page1"
                   TextWrapping="Wrap" />
        <Button x:Name="btnNavigateWithUri"
                Margin="10,30,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click="btnNavigateWithUri_Click"
                Content="Uriで遷移" />
        <Button x:Name="btnNavigateWithObject"
                Margin="10,54,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click="btnNavigateWithObject_Click"
                Content="インスタンスを生成して遷移" />
        <TextBlock Margin="10,78,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   TextWrapping="Wrap">
            <Run Text="リンク:"/>
            <Hyperlink NavigateUri="Page2.xaml">
                <Run Text="Page2へ遷移します"/>
            </Hyperlink>
        </TextBlock>
    </Grid>
</Page>
Page1.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Navigation;
using System.Windows.Shapes;

namespace NavigationTest
{
    /// <summary>
    /// Page1.xaml の相互作用ロジック
    /// </summary>
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
        }

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

        private void btnNavigateWithObject_Click(object sender, RoutedEventArgs e)
        {
            var nextPage = new Page2();
            NavigationService.Navigate(nextPage);
        }
    }
}

その他

ナビゲーションバーの表示/非表示

ShowsNavigationUI・・・ウィンドウ上部ナビゲーションバー表示の有無を切り替えられます。