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

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

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

図1：フレーム内が左から右に向かってスライドする（クリックで拡大）

図2：物語の冒頭の文言が表示される（クリックで拡大）

今回のサンプルは以下よりダウンロードできます。
→　今回のサンプルファイル（546KB）

新規プロジェクトの作成

早速サンプルを作っていきましょう。本稿では開発言語に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)

01<?xml version="1.0" encoding="utf-8" ?>

02<古典>

03  <情報>

04    <内容 title="平家物語">

05        祇園精舎の鐘の声

06        諸行無常の響きあり

07        沙羅双樹の花の色

08        盛者必衰の理をあらわす

09        おごれる人も久しからず

10        ただ春の世の夢のごとし

11        たけき者も遂には滅びぬ

12        偏に風の前の塵に同じ

13    </内容>

14  </情報>

15 

16  <情報>

17    <内容 title="方丈記">

18        ゆく河の流れは絶えずして、

19        しかももとの水にあらず。

20        よどみに浮かぶうたかたは、

21        かつ消えかつ結びて、

22        久しくとどまりたるためしなし。

23        世の中にある人とすみかと、

24        またかくのごとし。

25    </内容>

26  </情報>

27</古典>

コントロールの配置

<UserControl>要素の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のように配置します。

図3：Border、StackPanel、HyperlinkButtonを配置した

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

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

01～コード略～

02（１）<StackPanel>要素内に2つの<HyperlinkButton>要素を配置しています。

03  <Grid x:Name="LayoutRoot" Background="White">

04    <Border BorderBrush="#FF17A4E0" BorderThickness="3" Height="40" HorizontalAlignment="Left" Margin="31,22,0,0" x:Name="Border1" VerticalAlignment="Top" Width="160" CornerRadius="12">

05      <StackPanel Orientation="Horizontal" Height="21" Width="113" VerticalAlignment="Center" HorizontalAlignment="Center">　■（１）

06          <HyperlinkButton Content="平家物語" x:Name="HyperlinkButton1" Width="64"  Margin="0,0,0,2"/>

07          <HyperlinkButton Content="方丈記" x:Name="HyperlinkButton2" Width="44"  Margin="0,0,0,2"/>

08      </StackPanel>

09    </Border>

10  </Grid>

11～コード略～

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

図4：Frameを配置した（クリックで拡大）

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

図5：Gridの背景を黒にし、Frameの上に背景がNavyのBorderを重ねた（クリックで拡大）

Silverlightページの作成

次にVS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Silverlightページ」を作成します。「名前(N)」に「heike.xaml」と入力しておきます（図6）。同様な手順で、もう1つhoujyouki.xamlという「Silverlightページ」も作成しておきます。これら2つの「Silverlightページ」内に表示された「平家物語」や「方丈記」の冒頭の文言が、リンクをクリックすることで、Frame内にナビゲーションされます。

図6：heike.xamlという「Silverlightページ」を作成する（クリックで拡大）

ソリューションエクスプローラー内に追加された、heike.xamlをクリックしてデザイン画面を表示します。Pageプロパティの[共通]パネルにあるTitleに「平家物語」と入力します。[レイアウト]パネルにあるWidthに727、Heightに457と指定します。この値はMainPage.xaml内に配置したFrame1のWidthとHeightの値に同じです。ツールボックスからTextBlock(TextBlock1)をPage画面一杯に配置します。WidthとHeightはPageの値に同じです。

x:NameがLayoutRootの、<Grid>要素のプロパティ[ブラシ]パネルにあるBackgroundに、Blackを指定します。TextBlockを選択し、プロパティの[ブラシ]パネルにあるForegroundにWhiteを指定して文字色を白にします。[テキスト]パネルにある文字サイズを18に指定します。[共通]パネルにあるTextプロパティを空にしておきます。画面全体が真っ黒なheike.xamlが完成します（図7）。

図7：画面全体が真っ黒なheike.xamlが完成（クリックで拡大）

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

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

01（１）<navigation:Page>要素のTitleに「平家物語」と指定している。

02（２）<Grid>要素のBackgroundプロパティにBlackを指定している。

03<navigation:Page x:Class="SL4_NavigationPageSlideIn.heike"

04        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

05        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

06        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

07        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

08        mc:Ignorable="d"         xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

09 

10        d:DesignWidth="640" d:DesignHeight="480"

11        Title="平家物語" Width="727" Height="457">　■（１）

12  <Grid x:Name="LayoutRoot" Background="Black">　■（２）

13    <TextBlock Height="457" HorizontalAlignment="Left" Name="TextBlock1" Text="" VerticalAlignment="Top" Width="727" TextWrapping="Wrap" Foreground="White" FontSize="18" />

14  </Grid>

15</navigation:Page>

同じ手順で、houjyouki.xamlにもTextBlockを配置して、heike.xamlと全く同じ画面を作成します。ただし、Titleには「方丈記」と指定します。

ここで、先に、「平家物語」と「方丈記」のリンクをクリックすると、それぞれの冒頭の文言が表示されるコードを記述して、動作を確認しておきましょう。その前に、MainPage.xamlの2つのHyperlinkButtonのTagプロパティにheike.xamlとhoujyouki.xamlを追加しておきます。リスト4のように追加してください。

リスト4　HyperlinkButtonのTagプロパティにページを指定する(MainPage.xaml)

1<HyperlinkButton Content="平家物語" x:Name="HyperlinkButton1" Width="64" Margin="0,0,0,2" Tag="heike.xaml"/>

2<HyperlinkButton Content="方丈記" x:Name="HyperlinkButton2" Width="44"  Margin="0,0,0,2" Tag="houjyouki.xaml"/>

MainPage.xaml.vbにリスト5のコードを記述します。

ロジックコードを記述する

リスト5　(MainPage.xaml.vb)

01Option Strict On

02 

03Partial Public Class MainPage

04  Inherits UserControl

05 

06  Public Sub New()

07    InitializeComponent()

08  End Sub

09 

10■ページが読み込まれた時の処理

11HyperlinkButton1とHyperlinkButton2がクリックされた時、NavigateToPageプロシージャを実行します。

12    Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

13        AddHandler HyperlinkButton1.Click, AddressOf NavigateToPage

14    AddHandler HyperlinkButton2.Click, AddressOf NavigateToPage

15  End Sub

16 

17■指定されたページに移動する処理

18Frame1.Navigateメソッドで、リスト4でHyperlinkButtonのTagプロパティに指定していたページに移動します。

19  Private Sub NavigateToPage(ByVal sender As Object, ByVal e As EventArgs)

20    Frame1.Navigate(New Uri("/" + DirectCast(sender, HyperlinkButton).Tag.ToString, UriKind.Relative))

21  End Sub

22End Class

次に、heike.xaml.vbとhoujyouki.xaml.vbで使用する、XMLを読み込んで内容を表示するクラスを作成します。

クラスの作成

VS2010メニューの「プロジェクト(P)／クラスの追加(C)」と選択し、「クラス」を選択します。「名前(N)」はデフォルトのClass1.vbのままにしておきます（図8）。

図8：クラスを選択する（クリックで拡大）

作成した、Class1.vb内にリスト6のコードを記述します。

ロジックコードを記述する

リスト6 (Class1.vb)

01Option Strict On

02 

03XMLファイルをLINQ to XMLで処理するため、関連するクラスの含まれる、System.Xml.Linq名前空間をインポートしておきます。

04Imports System.Xml.Linq

05Public Class Class1

06 

07■XMLを読み込んで、変数noに該当する、<情報>要素の子要素<内容>の内容テキストを取得する関数

08XElement.LoadメソッドでXML文書ファイル(Contents.xml)を読み込みます。

09戻り値は、変数noに該当する、<情報>要素の子要素<内容>の内容テキストです。

10  Function ReadXml(ByVal no As Integer) As String

11    Dim xmldoc As XElement = XElement.Load("Contents.xml")

12    Dim naiyou As String = xmldoc.Descendants("情報")(no).<内容>.Value

13    Return naiyou

14  End Function

15End Class

heike.xaml.vbとhoujyouki.xaml.vb内にリスト7のコードを記述します。

ロジックコードを記述する

リスト7 (heike.xaml.vbとhoujyouki.xaml.vb)

01●heike.xaml.vb

02～コード略～

03■ユーザーがこのページに移動した時に実行される処理

04新しいClass1のインスタンス_myClassを生成し、TextBlockのTextプロパティに、リスト6で作成した関数に0の引数を与えて指定します。インデックスが0番目の、<情報>要素の子要素<内容>の内容テキスト(平家物語の冒頭の文言)が表示されます。

05  Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)

06    Dim _myClass As New Class1

07    TextBlock1.Text = _myClass.ReadXml(0)

08  End Sub

09～コード略～

10 

11●houjyouki.xaml.vb

12～コード略～

13■ユーザーがこのページに移動した時に実行される処理

14新しいClass1のインスタンス_myClassを生成し、TextBlockのTextプロパティに、リスト6で作成した関数に1の引数を与えて指定します。インデックスが1番目の、<情報>要素の子要素<内容>の内容テキスト(方丈記の冒頭の文言)が表示されます。

15  Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)

16    Dim _myClass As New Class1

17    TextBlock1.Text = _myClass.ReadXml(1)

18  End Sub

19～コード略～

では、ここで一度実行してみましょう。その前に、MainPage.xaml内の、ページにナビゲートするFrame1にはBorder2が重なっていますので、動作を確認する時だけ、Border2のOpacityプロパティに0を指定して透明化しておきましょう。

「デバッグ(D)／デバッグ開始(S)」と選択して実行します。図9のように、リンクをクリックして内容が変化すればOKです。

図9：「方丈記」のリンクをクリックして、その内容が表示されている（クリックで拡大）

動作が確認できたところで、MainPage.xamlのBorder2に仮に指定しておいたOpacityプロパティを削除してください。

ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4でのStoryboardの作成

「オブジェクトとタイムライン(B)」の下にあるストーリーボードの「新規作成」アイコン(＋)をクリックし、SlideInStoryboardというストーリーボードを作成します（図10）。

図10：SlideInStoryboardを作成する（クリックで拡大）

アートボード上の画面全体が赤の枠線で囲まれ、「●SlideInStoryboardタイムライン記録オン」に変わります。この状態でタイムラインの記録が可能になります。

「タイムラインとオブジェクト(B)」内のBorder2を選択し、タイムラインの黄色い再生ヘッドを0秒に合わせます。楕円と+マークの付いた「キーフレームの記録」アイコンをクリックします。次に再生ヘッドを0.5の位置に移動し、Border2をマウスでFrame1の半分近くまでドラッグします（図11）。

図11：再生ヘッドが0.5の位置で、Border2をFrame1の半分近くまでドラッグする（クリックで拡大）

次に再生ヘッドを1秒の位置に移動し、Border2のOpacityに50と指定します。Border2も残りの半分近くまでドラッグします。

最後に再生ヘッドを1.5秒の位置に移動し、Opacityに100と指定します。Border2の幅をFrame1の幅までドラッグします（図12）。

図12：再生ヘッド1.5の位置で、Border2をFrame1の幅まで完全にドラッグする（クリックで拡大）

これで1.5秒かかってBorder2が左から右にスライドします。スライドの途中で一時的に50％の透明化が実行されます。

「●SlideInStoryboardタイムライン記録オン」の●をクリックして記録をオフとし、Blend4を終了してVS2010に戻ります。

MainPage.xaml.vb内のNavigateToPageプロシージャに、リスト8のように、ストーリーボードを開始する処理を追加します。

リスト8　ストーリーボードを開始する処理を追加したプロシージャ

view sourceprint?

1Private Sub NavigateToPage(ByVal sender As Object, ByVal e As EventArgs)

2  Frame1.Navigate(New Uri("/" + DirectCast(sender, HyperlinkButton).Tag.ToString, UriKind.Relative))

3  SlideInStoryboard.begin()

4End Sub