まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。
画面には、画像とタイトルの表示されたボタンが5個並んでいます。ボタンの上にマウスカーソルを乗せると、ボタンの背景色が変化します（図1左）。ボタンをクリックすると、ボタンがアコーディオンのように展開されてテキストが表示されます（図1右）。
|
|
| 図1：ボタンの上にマウスカーソルを乗せると背景色が変化する(左図)。任意のボタンをクリックするとテキストが表示される(右図)（クリックで拡大） |
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
新規プロジェクトの作成
早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。
VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_AnimationMenu」という名前を付けています。
ソリューションエクスプローラー内にリスト1のXMLファイルを取り込んでおきます。XMLファイルをLINQ to XMLで処理するため、「プロジェクト(P)／参照の追加(F)」から、System.Xml.Linqを追加しておいてください。
またソリューションエクスプローラー内にImageというフォルダを作成し、5枚の画像も取り込んでおきます。
ダウンロードされたサンプル・ファイルにはXMLファイルや画像ファイルは追加済みです。
リスト1 XMLファイル(photo_etc.xml)
16 | 抜けるような青空に，銀杏の木が突き刺さっている。 |
コントロールの配置
要素のWidthに800、Heightに700と指定します。次に、LayoutRootの要素をとすることを忘れないようにしてください。
ツールボックスからRectangleを1個、Buttonを5個、TextBlockコントロールを5個配置し、Buttonコントロール内にはStackPanelコントロールを配置して、ImageとTextBlockを配置します。ImageのWidthに80、Heightに60を指定します。SourceプロパティにImageフォルダ内の画像を指定します。画像名を表示するTextBlockのMarginプロパティに10を指定し、余白を設けます。Textプロパティにタイトルとなる画像名を直接指定します（図2）。ButtonのStackPanel内に配置するTextBlockのx:Nameは省略します。書き出されるコードはリスト2のようになります。
|
|
| 図2：ボタン内に画像と画像名が表示されている |
リスト2 (MainPage.xaml)
01 | （１）<Button>要素内に<StackPanel>要素を配置し、OrientationプロパティにHorizontalを指定して、画像とタイトルが水平に並ぶように設定しています。<StackPane>要素の子要素として<Image>と<TextBlock>要素を配置しています。 |
02 | （２）5つのTextBlockはTextBlock1が一番手前に来るように最後に配置します。TextBlock5～TextBlock1の順番になります。またHeightは95と指定しておきます。Widthは351です。 |
03 | <UserControl x:Class="SL4_AnimationMenu.MainPage" |
09 | d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="700"> |
11 | <Canvas x:Name="LayoutRoot" Background="White"> |
12 | <Rectangle Height="579" HorizontalAlignment="Left" x:Name="Rectangle1" Width="373" Canvas.Left="199" Canvas.Top="109" /> |
13 | <Button Height="70" HorizontalAlignment="Left" x:Name="Button1" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="130"> ■（１） |
14 | <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> |
15 | <Image Width="80" Height="60" Source="Image/すすき.jpg"/> |
16 | <TextBlock Text="すすき" FontSize="20" VerticalAlignment="Center" Margin="10"/> |
19 | <Button Height="70" HorizontalAlignment="Left" x:Name="Button2" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="201"> ■（１） |
20 | <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"> |
21 | <Image Height="60" Source="Image/銀杏.jpg" Width="80" /> |
22 | <TextBlock FontSize="20" Margin="10" Text="銀杏 " VerticalAlignment="Center" /> |
25 | <Button Height="70" HorizontalAlignment="Left" x:Name="Button3" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="272"> ■（１） |
26 | <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"> |
27 | <Image Height="60" Source="Image/枯れ木.jpg" Width="80" /> |
28 | <TextBlock FontSize="20" Margin="10" Text="枯れ木" VerticalAlignment="Center" /> |
31 | <Button Height="70" HorizontalAlignment="Left" x:Name="Button4" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="343"> ■（１） |
32 | <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"> |
33 | <Image Height="60" Source="Image/光.jpg" Width="80" /> |
34 | <TextBlock FontSize="20" Margin="10" Text="光 " VerticalAlignment="Center" /> |
37 | <Button Height="70" HorizontalAlignment="Left" x:Name="Button5" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="414"> ■（１） |
38 | <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"> |
39 | <Image Height="60" Source="Image/森林.jpg" Width="80" /> |
40 | <TextBlock FontSize="20" Margin="10" Text="森林 " VerticalAlignment="Center" /> |
43 | <TextBlock Height="95" HorizontalAlignment="Left" x:Name="TextBlock5" Text="TextBlock5" VerticalAlignment="Top" Width="351" Canvas.Left="210" Canvas.Top="0"/> ■（２） |
44 | <TextBlock Height="95" HorizontalAlignment="Left" x:Name="TextBlock4" Text="TextBlock4" VerticalAlignment="Top" Width="351" Canvas.Left="210" Canvas.Top="0"/> ■（２） |
45 | <TextBlock Height="95" HorizontalAlignment="Left" x:Name="TextBlock3" Text="TextBlock3" VerticalAlignment="Top" Width="351" Canvas.Left="210" Canvas.Top="0"/> ■（２） |
46 | <TextBlock Height="95" HorizontalAlignment="Left" x:Name="TextBlock2" Text="TextBlock2" VerticalAlignment="Top" Width="351" Canvas.Left="210" Canvas.Top="0"/> ■（２） |
47 | <TextBlock Height="95" HorizontalAlignment="Left" x:Name="TextBlock1" Text="TextBlock1" VerticalAlignment="Top" Width="351" Canvas.Left="210" Canvas.Top="0"/> ■（２） |
リスト3のロジックコードを記述します。
ロジックコードを記述する
リスト3 (MainPage.xaml.vb)
03 | XML文書をLINQ to XMLで処理するため、関連クラスの含まれるSystem.Xml.Linq名前空間をインポートしておきます。 |
04 | Imports System.Xml.Linq |
08 | TextBlock1からTextBlock5のTextプロパティに、XML文書内のインデックスが0から4にあたる、<情報>要素の子要素<説明>の内容テキストを指定しておきます。 |
09 | Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded |
10 | Dim xmldoc As XElement = XElement.Load("photo_etc.xml") |
11 | TextBlock1.Text = xmldoc.Descendants("情報")(0).<説明>.Value |
12 | TextBlock2.Text = xmldoc.Descendants("情報")(1).<説明>.Value |
13 | TextBlock3.Text = xmldoc.Descendants("情報")(2).<説明>.Value |
14 | TextBlock4.Text = xmldoc.Descendants("情報")(3).<説明>.Value |
15 | TextBlock5.Text = xmldoc.Descendants("情報")(4).<説明>.Value |
ソリューションエクスプローラー内の、MainPage.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。
