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

Silverlight 3徹底入門（5）

ナビゲーションフレームワーク

　Silverlight 3ではナビゲーションフレームワークの登場により、画面遷移をSilverlightが提供する標準的な仕組みを利用して行うことが可能になりました。ナビゲーションフレームワークの特徴を以下に挙げます。

• FrameコントロールとPageコントロールを利用した標準的な画面遷移
• ページ内アンカーを利用したコンテンツへの直接リンク
• Webブラウザーの履歴の記録
• UriMappingを利用した柔軟なUriマッピング

　ナビゲーションフレームワークを利用した画面遷移は図2で示した方法を、簡単に使いやすくした方法ということができるでしょう。ナビゲーションフレームワークでは、メインページに配置されたFrameコントロールのSourceプロパティーを差し替えることで画面遷移を行います（図3）。

図3　ナビゲーションフレームワークを利用した画面遷移

今回作成するサンプルアプリケーション

　ナビゲーションフレームワークというと、図4のようにVisual Studioであらかじめ用意されているナビゲーションアプリケーションのプロジェクトテンプレートで作成されるアプリケーションのイメージが強いですが、ナビゲーションフレームワークの本体は画面を格納するFrameコントロールと、Frameコントロール内に表示するPageコントロールからなります。

　ここではFrameコントロールとPageコントロールを使用し、ナビゲーションアプリケーションと同じようなアプリケーションを作成することで、ナビゲーションフレームワークに対する理解を深めていきます。

図4　ナビゲーションアプリケーションプロジェクト

　今回は図5のような画面構成のアプリケーションを作成します。

　ページの上部にはアプリケーション全体で常に表示したいヘッダー情報を、左には各ページへのリンクを、真ん中にアプリケーションのメインとなるコンテンツを表示します。

図5　今回作成するページのレイアウト

　図5の構造を作るために、リスト1のページを作成しました。

　今回はこのページに対しナビゲーションフレームワークを使ってページ遷移機能を追加します。

リスト1　今回利用するページのメインとなるMainPage.xaml

<UserControl 
  x:Class="CodezineNavigation.MainPage"
  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" 
  mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <StackPanel x:Name="LayoutRoot">
    <!-- ヘッダーパネル -->
    <Border Margin="5,5,5,0" BorderThickness="1" BorderBrush="Black">
      <StackPanel MinHeight="40"  x:Name="Headder"  >
        <TextBlock Text="ナビゲーションフレームワークサンプル" />
      </StackPanel>
    </Border>
    <StackPanel Orientation="Horizontal">
      <!-- メニューパネル -->
      <Border Margin="5,5,5,5" BorderThickness="1" BorderBrush="Black">
        <StackPanel MinWidth="75" MinHeight="150"></StackPanel>
      </Border>

      <!-- ナビゲーションフレームパネル -->
      <StackPanel Margin="0,5,5,5">
      </StackPanel>
    </StackPanel>
  </StackPanel>
</UserControl>

ページの追加

　ではナビゲーションフレームワークを利用したアプリケーションを作っていきましょう。まずは、フレームの内側に表示するページをプロジェクトに追加します。Visual StudioのソリューションエクスプローラーでViewsフォルダーを作成し、そのフォルダーに新しいページファイルを追加してください（プロジェクト構成については、コラム「プロジェクト構成」を参照してください）。

　図6ではViewフォルダーのコンテキストメニューから「新しい項目」を選択、Silverlightページを「TopPage.xaml」という名前をつけて作成しています。

図6　新しいページの追加

　後で使用しますので、アプリケーションの概要を説明するための「AboutPage.xaml」も同様に追加しておいてください。各ページにはリスト3のように、現在どのページなのか分かるようにページのタイトルを表示しておきます。

リスト2　各ページのタイトル

<navigation:Page 
    略
    Title="TopPage Page">
    <StackPanel x:Name="LayoutRoot">
      <!-- ここをページによって変更する -->
      <TextBlock Text="トップページ" />
   </StackPanel>
</navigation:Page>

プロジェクト構成

　Silverlightに限らずプログラムを作成する上では、フォルダー構成を決めてXAMLファイルやクラスファイル、ロジックを記述するソースコードを配置することで、プロジェクトの見通しが良くなります。ナビゲーションアプリケーションのプロジェクトテンプレートで作成したプロジェクトでは図7のプロジェクト構成になります。

 

図7　ナビゲーションアプリケーションのプロジェクト構成

　Viewsフォルダーには各ページファイルを、Assetsフォルダーにはアプリケーション全体で利用するスタイルなどのリソースファイルを配置します。あくまでテンプレートとしての例の一つですので、必ずしも同じにする必要はありませんが、今回は同じようにViewsフォルダーを作成し、このフォルダーにページファイルを配置しています。