PR

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

2011年5月23日(月)
PROJECT KySS

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

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

3

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

3

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

<?xml version="1.0" encoding="utf-8" ?>
<古典>
  <情報>
  	<内容 title="平家物語">
  		祇園精舎の鐘の声 
  		諸行無常の響きあり 
  		沙羅双樹の花の色 
  		盛者必衰の理をあらわす 
  		おごれる人も久しからず 
  		ただ春の世の夢のごとし
  		たけき者も遂には滅びぬ 
  		偏に風の前の塵に同じ
  	</内容>
  </情報>

  <情報>
  	<内容 title="方丈記">
  		ゆく河の流れは絶えずして、
  		しかももとの水にあらず。
  		よどみに浮かぶうたかたは、
  		かつ消えかつ結びて、
  		久しくとどまりたるためしなし。
  		世の中にある人とすみかと、
  		またかくのごとし。
  	</内容>
  </情報>
</古典>

コントロールの配置

要素の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

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

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

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

~コード略~
(1)<StackPanel>要素内に2つの<HyperlinkButton>要素を配置しています。
  <Grid x:Name="LayoutRoot" Background="White">
    <Border BorderBrush="#FF17A4E0" BorderThickness="3" Height="40" HorizontalAlignment="Left" Margin="31,22,0,0" x:Name="Border1" VerticalAlignment="Top" Width="160" CornerRadius="12">
  	  <StackPanel Orientation="Horizontal" Height="21" Width="113" VerticalAlignment="Center" HorizontalAlignment="Center"> ■(1)
  		  <HyperlinkButton Content="平家物語" x:Name="HyperlinkButton1" Width="64"  Margin="0,0,0,2"/>
  		  <HyperlinkButton Content="方丈記" x:Name="HyperlinkButton2" Width="44"  Margin="0,0,0,2"/>
  	  </StackPanel>
    </Border>
  </Grid>
~コード略~

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

3

図4:Frameを配置した(クリックで拡大)

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

3

図5:Gridの背景を黒にし、Frameの上に背景がNavyのBorderを重ねた(クリックで拡大)
Think IT会員限定特典
  • 「スライドによるページナビゲーション」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

スライドによるページナビゲーション | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。