さて、ナビゲーションを全然しないNavigation Applicationを作ってきた。
今回は、ついにナビゲーションしてみようと思う。
一番簡単な画面繊維のさせかたは、ハイパーリンクを使う方法になる。
TextBlock内のテキストでリンクをつけたい部分をHyperlinkタグで囲むことでリンクになる。HyperlinkのNavigationUriプロパティに遷移先のページを指定する形になる。まるでHTMLみたいだ。
ということで早速実験。FirstPage.xamlとSecondPage.xamlを作ってApp.xamlのStartupUriにFirstPage.xamlを設定した。
FirstPage.xaml
<Page x:Class="WpfNavi.FirstPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="FirstPage">
<Grid>
<TextBlock Margin="10">
二番目のページに移動するには<Hyperlink NavigateUri="SecondPage.xaml">ここ</Hyperlink>をクリック。
</TextBlock>
</Grid>
</Page>
SecondPage.xaml
<Page x:Class="WpfNavi.SecondPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SecondPage">
<Grid>
<TextBlock Margin="10">二番目のページです。</TextBlock>
</Grid>
</Page>
これでナビゲーションするアプリケーションの完成～。早速実行してみよう。
ハイパーリンクが出来てクリックできる。
ハイパーリンクをクリックして二番目のページに遷移すると、戻るボタンが押せるようになる。もちろん押すと前のページに戻れる。
純粋な書き物とかなら、ハイパーリンクによるリンククリックで遷移で事足りるかもしれないけど、従業員番号をクリックして従業員詳細画面に遷移するといった感じのアプリケーションの場合は、ページ間でデータの受け渡しが出来ないと困る。
そういう時のために、APIから画面遷移をさせることができるようになっている。
これで、クリックイベント等で必要な情報を次のページに渡して遷移ということが出来るようになってる。早速やってみよう。とりあえず、FirstPage.xamlを書き換えてこんな感じにしてみた。
<Page x:Class="WpfNavi.FirstPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="FirstPage"
Foreground="White">
<!-- ちょっと飽きたので色をつけてみた -->
<Page.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FF444444" Offset="0"/>
<GradientStop Color="#FFC3C3C3" Offset="1"/>
</LinearGradientBrush>
</Page.Background>
<StackPanel Margin="10">
<TextBlock>
下のテキストボックスに名前を入力して
<Hyperlink Foreground="LightBlue" Click="Hyperlink_Click">ここ</Hyperlink>
をクリックしてください。
</TextBlock>
<TextBox Name="textBoxName" />
</StackPanel>
</Page>
この画面のテキストボックスに入力されたテキストを次の画面に渡そうと思う。SecondPageのC#のほうに、入力されたテキストを受け取るためのプロパティを定義する。
using System.Windows.Controls;
namespace WpfNavi
{
public partial class SecondPage : Page
{
// FirstPageで入力されたテキストを受け取るためのプロパティ
public string YourName { get; set; }
public SecondPage()
{
InitializeComponent();
// 自分自身をDataContextにしてみる
DataContext = this;
}
}
}
SecondPage.xamlは、YourNameプロパティをバインドして表示するだけのシンプルなものにした。
<Page x:Class="WpfNavi.SecondPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SecondPage">
<StackPanel Margin="10" Orientation="Horizontal">
<TextBlock>こんにちは！！</TextBlock>
<TextBlock Text="{Binding YourName}" />
<TextBlock>さん！！</TextBlock>
</StackPanel>
</Page>
ついに本題！画面遷移の部分のコードだ。画面遷移には、NavigationServiceクラスのNavigateメソッドを使うことで出来る。Navigateメソッドには、次のページのインスタンスを渡すといった使い方になる。
ということで、Hyperlinkのクリックイベントは下のようになる。
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace WpfNavi
{
public partial class FirstPage : Page
{
public FirstPage()
{
InitializeComponent();
}
// ハイパーリンククリック！
private void Hyperlink_Click(object sender, RoutedEventArgs e)
{
// 次のページを作ってプロパティにTextBoxで入力された値を入れておく
var second = new SecondPage
{
YourName = textBoxName.Text
};
// 画面遷移！！
NavigationService.Navigate(second);
}
}
}
ということで、実行してみよう。
名前を入力してハイパーリンクをクリックすると…
入力値が次のページに出てくる！いいね。
NavigationServiceを使うと、任意のタイミングで次のページに遷移とかが出来るようになる。
いいことだ。