NavigationWindowを使った画面遷移
WPFでは、Windowクラスの代わりにNavigationWindowというクラスを使うと、複数ページ間で画面遷移を行うプログラムを簡単に作成できます。
NavigationWindowでは、SourceプロパティでPage要素を持ったXAMLを指定すると、そのページを表示できます。
ちょっとしたウィザード的なアプリのように、段階的に画面遷移を伴うアプリを作るのに適してそうです。
NavigationWindowクラスの使い方
- 新規プロジェクトで、WPFアプリケーションを作成
- Pageの追加
- プロジェクトに、新しい項目の追加で、ページを追加する(Page1.xaml)
- MainWindow.xamlの編集
- Windowクラスを書いている部分をNavigationWindowに変更する。
- ↑のContentに書かれていたGridを削除
- Sourceプロパティに、表示するPage(Page1.xaml)を指定する。
- 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・・・ウィンドウ上部ナビゲーションバー表示の有無を切り替えられます。