スライドによるページナビゲーション

まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。

画面左上方に表示された、「平家物語」と「方丈記」のリンクをクリックすると、フレーム内が左から右に向かってスライドして（図1）、作成しておいた該当ページにナビゲートし、クリックした物語の冒頭の文言が表示されます（図2）。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

新規プロジェクトの作成

早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。

VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_NavigationPageSlideIn」という名前を付けています。

ソリューションエクスプローラー内にリスト1のXMLファイルを取り込んでおきます。XMLファイルをLINQ to XMLで処理するため、「プロジェクト(P)／参照の追加(F)」から、System.Xml.Linqを追加しておいてください。

ダウンロードされたサンプル・ファイルにはXMLファイルは追加済みです。

リスト1　XMLファイル(Contents.xml)

コントロールの配置

要素のWidthに800、Heightに600と指定します。ツールボックスからBorderコントロールを配置し、Widthに160、Heightに40と指定します。Borderのプロパティ[共通]パネルにある、BorderThicknessに3を指定して、枠線を太くしておきます。CornerRadiusに12を指定して、四隅を丸めます。[ブラシ]パネルにある枠線の色を指定するBorderBrushに、明るい青系統色を指定します。Border内にStackPanelを配置し、OrientationプロパティにHorizontal(デフォルトはVertical)を指定します。StackPanel内に2個のHyperlinkButtonを配置し、Contentプロパティに「平家物語」、「方丈記」と指定します。図3のように配置します。

書き出されるXAMLコードはリスト2のようになります。

リスト2　書き出されたXAMLコード(MainPage.xaml)

次に、ツールボックスからFrameコントロールを配置します。Widthに727、Heightに457と指定します。WidthやHeightの値は読者の皆さんが適当な値を指定してください。Frameのプロパティ[その他]パネルにあるBorderThicknessに3を指定して、枠線を太くしておきます。[ブラシ]パネルにある枠線の色を指定するBorderBrushにBlueを指定します（図4）。

次に、x:NameがLayoutRootの要素のBackgroundプロパティにBlackを指定し、背景を黒にします。全体が黒で塗りつぶされます。いま、配置したFrameコントロールの上にBorderコントロール（Border2）を重ねます。WidthとHeightはFrameの値と同じにします。BorderThicknessに3、BorderBrushにBlue、BackgroundにNavyと指定します（図5）。