第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)

01	Option Strict On

02

03	Partial Public Class MainPage

04	Inherits UserControl

05

06	Public Sub New()

07	InitializeComponent()

08

End Sub

09

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

11	HyperlinkButton1と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	■指定されたページに移動する処理

18	Frame1.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

22

End Class

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

クラスの作成

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

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

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

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

リスト6 (Class1.vb)

01	Option Strict On

02

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

04	Imports System.Xml.Linq

05	Public Class Class1

06

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

08	XElement.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

15

End 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?

1	Private 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()

4

End Sub