Simplestar Game

:::::::::::050話　ナビゲーション:::::::::::

WPF のナビゲーション機能についてご紹介します。
Web で親しまれているリンク先へジャンプする機構、ハイパーリンクと呼ばれますが
これが簡単に実装できるのも WPF アプリの魅力的なところ。
どうやって作るのか早速見てみましょう。

ナビゲーションとページ

とりあえず、WPF アプリケーションを作成してみます。
名前は「WPFLesson03」です。

全体のクラス構成を見渡せるように、クラス図を使ってみたいと思います。
次に示す赤枠の部分をクリックすると現在のソースコードからクラス図を作成します。

作成されたクラス図がこちら↓

注目するのは赤枠で囲った MainWindow クラスです。
継承元が Window になっていますが、これを NavigationWindow に変更します。

手順ですが、一旦 MainWindow.xaml ファイルを次のように書き換えます。

続いて、ソースコードの方の継承元を変更

この状態でビルドすると次のように、戻る、進むボタンが追加されたウィンドウになります。
これがナビゲーションウィンドウです。

では最初にアクセスするページと、ハイパーリンクでジャンプするページを作ってみましょう。
手順はプロジェクトを右クリックして「追加」→「ページ」を選択

クラス名は PageTop とします。同様の手順で PageNext も作ります。
それぞれの xaml ファイルに次のハイパーリンクの行を加えます。

あとはアプリ起動時に PageTop を表示するように次の行を書くだけです。

実行結果がコチラ↓

確認してみるとわかると思いますが
戻る、進むボタンが機能し、ジャーナルと呼ばれるトラベルログを表示できるようになります。

ページを移動できるようになると、次の疑問が湧いてきます。
ページ間でデータを共有したい場合はどうするのか？

ページの移動、つまりナビゲーションが起きる直前にイベント「RequestNavigate」が起きます。
これを利用してデータをコントロールから取得し、任意のクラスや変数へ退避させておきます。
移動後のページでの「Loaded」イベントを利用してこの情報を取得するようにすれば解決します。

ここに示した例のように、それぞれのイベントは Page のものと Hyperlink のものであることに注意されたし。

本当に簡単にですが、ナビゲーションアプリの作り方の一例を示してみました。
今後、Webっぽいアプリ、ナビゲーションアプリを作る際に参考になれば良いなぁと思います。

詳しいことは次のページを読めば大体載っているのではないでしょうか？

ナビゲーションの概要

私が頭悪いのか、初見でこういうページ読んでもちゃんと理解できないんですよね。
今なら多少読み進められるかも？

…

で、ちょっと読んでみたところ Windows + IE の環境で動作するWPFブラウザアプリが気になりました。
XBAPs と呼ばれるこのアプリ、ユーザーは常にブラウザで操作できるため
いつ WPF のアプリに切り替わったのか判別がつかないそうな。
今後ブラウザアプリが欲しいという要求があるかもしれませんね。

ちょっと触ってみますか？

上記の選択項目より、XBAPs の雛形が作れると思います。
WPF の入門第一話で示したように InkCanvas コントロールをぺたりと貼り付けてビルドしてみましょう。
簡易お絵かきページとなるだろうと思いますがどうでしょう？
次に成果物へのリンクを貼っておきます。

20秒ほどで作った InkCanvas コントロールのページ

グラデーションのページへジャンプし、その領域にお絵かき出来ますか？
実は健全に調べ物をしている方は、以下に示すエラーが出てしまいます。

XBAPs で「使用していたアプリケーションでエラーが発生しました」というエラーが発生するのです。
解決するには次に示すようにインターネットオプションを変更します。
（セキュリティ　レベルのカスタマイズ　→　XAML ブラウザー　アプリの有効無効）

これでも解決しない場合があります。
ビルド設定によっては開発者は .exe ファイルを .exe.deploy と拡張子をリネームする必要があります。
また、一度でも VisualStudio 上で実行テストを行っている場合は次のパスに保存されている
アプリケーションのキャッシュを一度クリアしなければなりません。
（無茶苦茶な名前で保存されているのでアプリ特定のファイルを探すのにも一苦労します…）

C:\Users\simplestar\AppData\Local\Apps\2.0

上記の対応を行って自分は正しく動作することを確認しました。
ちょっと調べるのに時間を使ってしまいました。（疲れた…）
実行結果を次に示します。

Webブラウザ上から XAML ブラウザアプリケーションでお絵かきの例。
XBAP はファイルの入出力ができないなど、セキュリティ面で制約がありますが
ブラウザ上で動作するプログラムを C# で好きなように書けるのはなんだか夢が広がりますよね。
（初回のロード時間が長いですが…）

続いてWPF のデータバインディングというものを勉強してみましょう。

役に立ったら押すボタン↓

2012/04/30 初記。