Silverlight 3で作る業務アプリケーションの要
「ナビゲーションフレームワーク」

Silverlight 3徹底入門（5）

HyperlinkButtonコントロールによるナビゲーション

　次にフレームの内容をほかのページに変更し、フレームの内容をほかのページに切り替えてみましょう。

ナビゲーションボタンによるナビゲーション

　HyperlinkButtonコントロールを利用して画面の切替（ナビゲーション）を行うためには、NavigateUriに移動先のUriか後述するマッピング名を指定し、ユーザーがリンクをクリックすることで画面の切り替えを行います。

　リスト1の「メニューパネル」とある部分をリスト4のように変更してみましょう。

リスト4　HyperLinkボタン

<!-- メニューパネル -->
<Border Margin="5,5,5,5" BorderThickness="1" BorderBrush="Black">
  <StackPanel MinWidth="75" MinHeight="300">
    <HyperlinkButton Content="トップ" NavigateUri="/Views/TopPage.xaml" />
    <HyperlinkButton Content="概要" NavigateUri="/Views/AboutPage.xaml" />

    <HyperlinkButton Content="飲み物" NavigateUri="/Views/DrinkPage.xaml" />        <HyperlinkButton Content="コーヒー" NavigateUri="/Views/DrinkPage.xaml?name=cafee" />
    <HyperlinkButton Content="二郎" NavigateUri="/Views/DrinkPage.xaml?name=jiro" />
  </StackPanel>
</Border>

　HyperlinkButtonコントロールのNavigateUriプロパティーに遷移先ページのUriを指定します。併せてTargetNameプロパティーを指定することで、遷移対象のフレームを指定してページを移動することができます。

　ほかのページにパラメーターを受け渡したい場合は、HTTPのGETリクエストと同じように?と&を使うことでほかのページにパラメーターを渡すことができます。受け渡したパラメーターは、各ページのNavigateContextプロパティーから取得することができます（リスト5）。

リスト5　パラメーターの取得

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (NavigationContext.QueryString.ContainsKey("item")) 
    {
        MessageBox.Show(NavigationContext.QueryString["item"]);
    }
}

　図11はリスト4の実行結果です。

　左側のリンクをクリックすることでフレーム部分のコンテンツが切り替わっていることが分かると思います。

図11　HyperlinkButtonコントロールを利用したナビゲーション

ディープリンクとブラウザーの履歴

　ここで注目したいのは概要ボタンやトップボタンをクリックしたときのUriです。

　たとえばリスト4のHyperlinkButtonトップページへリンクした場合は次のようなUriになります。

http://localhost:1095/CodezineNavigationTestPage.aspx#/Views/TopPage.xaml

　同様に概要ページへリンクした場合は次のようなUriになります。

http://localhost:1095/CodezineNavigationTestPage.aspx#/Views/AboutPage.xaml

　Uriを確認すると分かりますが、ページへのリンクは「#リンク名」で各ページへ直接アクセス可能なディープリンクになっています。ディープリンクでUriを構築しているため、各ページをブックマークしたり、ほかのWebページから各ページに直接移動したりすることができます。

　またHyperlinkButtonをクリックしたタイミングで、Webブラウザーの履歴が作成されていることにも気がつくでしょう（図12）。

図12　ブラウザー履歴

　各ページへのディープリンクが作成されることで、もう一つうれしいことがあります。それは、ページのUriに「Drink」や「Jiro」といったカテゴリーや商品名を埋め込むことで、SEOに対する効果を見込むことができるということです。これは、後述するページマッピングを使うことでさらに効果が高くなります。

外部サイトへのナビゲーション

　外部サイトのURIを指定すると外部サイトに対してもナビゲーションを行うことが可能ですが、Silverlightのフレーム内に外部サイトを表示することはできません。外部サイトへリンクする場合はTargetNameプロパティーで、SilverlightをホストしているHTMLのフレームを指定するか、_blankなどで新しいウインドウを開いてあげる必要があります。（リスト6）

リスト6　外部サイトへのリンク

<HyperlinkButton Content="WINGSプロジェクト" NavigateUri="http://www.wings.msn.to" TargetName="_blank"  />
<HyperlinkButton Content="CodeZine" NavigateUri="http://codezine.jp" TargetName="_self"  />

　ここで存在しないHTMLのフレームタグを指定したり、TagetNameが指定されていない場合はArgumentExceptionの例外が発生します。Webブラーザーのエラー通知を有効にしている場合、図13のエラーが表示されます。

図13　ナビゲーション時のエラーウインドウ

　外部サイトにナビゲートする場合はもう一つ注意すべき設定があります。それは、Silverlightの起動パラメータであるenableNavigationオプションです。

　enableNavigationオプションはall（外部へのナビゲーションを許す；既定）とnone（許さない）を設定できますが、noneの状態でリスト5のリンクをクリックした場合、図14のエラー画面が表示されます。また、noneを指定した場合、ブラウザーの履歴やディープリンクも作成されませんので注意してください。

図14　外部サイトへのリンク禁止時のエラーウインドウ