連載：Silverlight 3実践プログラミング ナビゲーション・フレームワークとChildWindowコントロール シグマコンサルティング　菅原 英治 2009/09/15
Page1 Page2 Page3

●ナビゲーション・フレームワークの使い方

　ここでは、ナビゲーション・フレームワークの使い方について解説します。ナビゲーション・フレームワークは、VS 2008に用意されるテンプレートを利用することで簡単に使うことができます。

　次の画面のように、VS 2008で新しいプロジェクトを作成する際には、「Silverlight ナビゲーション アプリケーション」を選択できるようになりました（※Silverlight 3 Toolsをインストール済みの場合）。

VS 2008の［新しいプロジェクト］ダイアログ

ナビゲーション・フレームワーク用のテンプレート「Silverlight ナビゲーション アプリケーション」が追加されている。

●ナビゲーション・フレームワークの構成

　このテンプレートを利用して作成したプロジェクトは、次の図のように構成されます。

テンプレートを利用して作成した「Silverlight ナビゲーション アプリケーション」の構成

　この構成においてポイントとなるファイルは、「MainPage.xaml」と「Views」フォルダ内の「Home.xaml」と「About.xaml」です。

●FrameコントロールとPageコントロール

○Frameコントロール

　MainPage.xamlファイルでは、メニューなどアプリ全体に共通する部分を定義しています。その定義に利用するのがFrameコントロールです。次のコードは、MainPage.xamlファイルでFrameコントロールを利用している個所です。

……（略）…… <navigation:Frame x:Name="ContentFrame"     Style="{StaticResource ContentFrameStyle}"     Source="/Home"     Navigated="ContentFrame_Navigated"     NavigationFailed="ContentFrame_NavigationFailed">   ……（略）…… </navigation:Frame> ……（略）……

<navigation:Frame>タグによりFrameコントロールを定義しているXAMLコード（MainPage.xamlファイル）

　上記のコードにおいて、ポイントとなる個所を2点、太字で示しました。第1に、「x:Name="ContentFrame"」の個所です。ここでは、このFrameコントロールに「ContentFrame」と名前付けています。この名前は、HyperLinkコントロールによる画面遷移時に指定する際に利用します。

　第2に「Navigated="ContentFrame_Navigated"」の個所です。これは、フレームの内容が入れ替わった際に発生するイベントのハンドラです。本稿ではコードは詳しく解説しませんが、コードビハインド側の「MainPage.xaml.cs」ファイルでは、そのイベント・ハンドラで、各リンクが選択状態に見えるような外観（サンプルでは、青色の背景）を設定しています。

○UriMapper

　もう少し詳しくFrameコントロールのXAMLタグ（＝<navigation:Frame>タグ）の内容を見ていきましょう。太字で示したようにUriMapper要素に注目してください。

……（略）…… <navigation:Frame x:Name="ContentFrame" ……（略）……>   <navigation:Frame.UriMapper>     <uriMapper:UriMapper>       <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>       <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>     </uriMapper:UriMapper>   </navigation:Frame.UriMapper> </navigation:Frame> ……（略）……

<navigation:Frame.UriMapper>タグによりUriMapperを定義しているXAMLコード（MainPage.xamlファイル）

　UriMapper要素は、リクエストされるUriを実際のPageコントロール（詳細は後述）へマッピングするために利用します。

　次のコードは、「/{pageName}」でリクエストされたUriを「/Views/{pageName}.xaml」にマッピングする定義です。具体的にはアドレスの末尾が、「/Home」とリクエストされ場合、「/Views/Home.xaml」へマッピングします。

<uriMapper:UriMapping       Uri="/{pageName}"       MappedUri="/Views/{pageName}.xaml"/>

○Pageコントロール

　Viewsフォルダ内の「Home.xaml」ファイルと「About.xaml」ファイルは、フレームのコンテンツ内に表示する「ホーム」画面、「バージョン情報」画面の中身を定義しています。その定義に利用するのが、Pageコントロールです。

　次のコードは「Views/Home.xaml」ファイルのXAMLコードです。太字で示したように、ファイルそのものがPageコントロールとして定義されています(通常Silverlightで画面を定義する場合はUserControlコントロールとして定義します)。

<navigation:Page  ……（略）……>   ……（略）…… </navigation:Page>

<navigation:Page>タグによりPageコントロールを定義しているXAMLコード（Views/Home.xamlファイル）

　以上を理解していただくと、ナビゲーション・フレーム上に新しいページを追加するのが簡単にできることが分かるのではないでしょうか。試しに1ページを追加してみましょう。

●Silverlightページを追加してみよう

　まずは［ソリューション エクスプローラ］上から、Viewsフォルダにページ（＝Pageコントロール）を追加しましょう。次の図のように、「Silverlight ページ」を選択します。

Silverlightページの追加

　続いて、MainPage.xamlファイルに、新しく追加したページへのハイパーリンク・ボタンを追加しましょう。太字で示したように、コードを修正します。

……（略）…… <StackPanel x:Name="LinksStackPanel"     Style="{StaticResource LinksStackPanelStyle}">   <HyperlinkButton x:Name="Link1"       Style="{StaticResource LinkStyle}"       NavigateUri="/Home"       TargetName="ContentFrame"       Content="ホーム"/>   <Rectangle x:Name="Divider1"       Style="{StaticResource DividerStyle}"/>   <HyperlinkButton x:Name="Link2"       Style="{StaticResource LinkStyle}"       NavigateUri="/About"       TargetName="ContentFrame"       Content="バージョン情報"/>   <Rectangle x:Name="Divider2"       Style="{StaticResource DividerStyle}"/>   <HyperlinkButton x:Name="Link3"       Style="{StaticResource LinkStyle}"       NavigateUri="/Page1"       TargetName="ContentFrame"       Content="ページ1"/> </StackPanel> ……（略）……

ページ1へのハイパーリンク・ボタンを追加したXAMLコード（MainPage.xamlファイル）

　修正が完了したら実行してみましょう。次のようにページ1へのハイパーリンク・ボタンが追加され、クリックするとそのページを表示できるようになります。

ハイパーリンク・ボタンを追加したサンプル

■

　ナビゲーション・フレームワークについては以上です。まるでWebページのように簡単に画面遷移を簡単に構築できることが分かったのではないでしょうか。また、次の記事内でSilverlightアプリのサンプルとして紹介している「抜き打ちカバンチェック」は、まさにこのナビゲーション・フレームワークを利用して作成しています。ご参照ください。

• Silverlight制作をデザイナと開発者でコラボしてみた

　続いてChildWindowコントロールについて解説します。

【コラム】SilverlightでオンラインRPG

以前、「Silverlight 3、ここがすごい！」のコラムにおいて、Silverlight 3はゲームのプラットフォームとしての可能性があるのではないかと述べました。 　その実を確かめるため、わたしは簡単なサンプルを作ってみました。 Silverlight 3 RPG Sample Silverlight 3で作成したゲームのサンプル 　このサンプルは、画面上のマップをキャラクターが歩き回るだけという単純なものですが、RPGの基本は押さえられているといえるでしょう。さらに作り込めばSilverlightでRPG（ロール・プレイング・ゲーム）を作ることは可能だと思います。 　上述したmixiアプリでこのようなゲームを作成すると、SNS（ソーシャル・ネットワーク・サービス）と組み合わせたMMORPG（多人数同時参加型オンラインRPG）が作成できるかもしれませんね。

INDEX
	連載：Silverlight 3実践プログラミング
	ナビゲーション・フレームワークとChildWindowコントロール
	1．ナビゲーション・フレームワークとは
	2．ナビゲーション・フレームワークの使い方
	3．ChildWindowコントロールとは／その使い方

「Silverlight 3実践プログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）