PR

ボタンが開閉するアコーディオンメニュー

2011年5月25日(水)
PROJECT KySS

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

画面には、画像とタイトルの表示されたボタンが5個並んでいます。ボタンの上にマウスカーソルを乗せると、ボタンの背景色が変化します(図1左)。ボタンをクリックすると、ボタンがアコーディオンのように展開されてテキストが表示されます(図1右)。

3

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

<?xml version="1.0"?>
<画像>
  <情報>
    <画像名>すすき.jpg</画像名>
    <説明>
      冷たい秋風になびくすすき。
      晩秋のにおいを漂わせ,
      すすきはその儚い命を生きている。
      そのすすきの揺らめきに,私は,
      宇宙を感じた。幻か。。。。。
    </説明>
  </情報>
  <情報>
    <画像名>銀杏.jpg</画像名>
    <説明>
      抜けるような青空に,銀杏の木が突き刺さっている。
      間もなくこの銀杏も黄金色に変わるだろう。
      そして落ちていく。人生もしかり。
    </説明>
  </情報> 
  ~<情報></情報>繰り返し~
</画像>

コントロールの配置

要素の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のようになります。

3

図2:ボタン内に画像と画像名が表示されている

リスト2 (MainPage.xaml)

(1)<Button>要素内に<StackPanel>要素を配置し、OrientationプロパティにHorizontalを指定して、画像とタイトルが水平に並ぶように設定しています。<StackPane>要素の子要素として<Image>と<TextBlock>要素を配置しています。
(2)5つのTextBlockはTextBlock1が一番手前に来るように最後に配置します。TextBlock5~TextBlock1の順番になります。またHeightは95と指定しておきます。Widthは351です。
<UserControl x:Class="SL4_AnimationMenu.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="700">

  <Canvas x:Name="LayoutRoot" Background="White">
    <Rectangle Height="579" HorizontalAlignment="Left"  x:Name="Rectangle1" Width="373" Canvas.Left="199" Canvas.Top="109" />
    <Button Height="70" HorizontalAlignment="Left" x:Name="Button1" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="130"> ■(1)
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Image Width="80" Height="60" Source="Image/すすき.jpg"/>
        <TextBlock Text="すすき" FontSize="20" VerticalAlignment="Center" Margin="10"/>
      </StackPanel>
    </Button>
    <Button Height="70" HorizontalAlignment="Left"  x:Name="Button2" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="201"> ■(1)
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
        <Image Height="60" Source="Image/銀杏.jpg" Width="80" />
        <TextBlock FontSize="20" Margin="10" Text="銀杏   " VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Height="70" HorizontalAlignment="Left"  x:Name="Button3" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="272"> ■(1)
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
        <Image Height="60" Source="Image/枯れ木.jpg" Width="80" />
        <TextBlock FontSize="20" Margin="10" Text="枯れ木" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Height="70" HorizontalAlignment="Left"  x:Name="Button4" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="343"> ■(1)
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
        <Image Height="60" Source="Image/光.jpg" Width="80" />
        <TextBlock FontSize="20" Margin="10" Text="光  " VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Height="70" HorizontalAlignment="Left"  x:Name="Button5" VerticalAlignment="Top" Width="350" Canvas.Left="211" Canvas.Top="414"> ■(1)
      <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
        <Image Height="60" Source="Image/森林.jpg" Width="80" />
        <TextBlock FontSize="20" Margin="10" Text="森林 " VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <TextBlock  Height="95" HorizontalAlignment="Left" x:Name="TextBlock5" Text="TextBlock5" VerticalAlignment="Top" Width="351"  Canvas.Left="210" Canvas.Top="0"/> ■(2)
    <TextBlock  Height="95" HorizontalAlignment="Left" x:Name="TextBlock4" Text="TextBlock4" VerticalAlignment="Top" Width="351"  Canvas.Left="210" Canvas.Top="0"/> ■(2)
    <TextBlock  Height="95" HorizontalAlignment="Left" x:Name="TextBlock3" Text="TextBlock3" VerticalAlignment="Top" Width="351"  Canvas.Left="210" Canvas.Top="0"/> ■(2)
    <TextBlock  Height="95" HorizontalAlignment="Left" x:Name="TextBlock2" Text="TextBlock2" VerticalAlignment="Top" Width="351"  Canvas.Left="210" Canvas.Top="0"/> ■(2)
    <TextBlock  Height="95" HorizontalAlignment="Left" x:Name="TextBlock1" Text="TextBlock1" VerticalAlignment="Top" Width="351"  Canvas.Left="210" Canvas.Top="0"/> ■(2)
  </Canvas>
</UserControl>

リスト3のロジックコードを記述します。

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

リスト3 (MainPage.xaml.vb)

Option Strict On

XML文書をLINQ to XMLで処理するため、関連クラスの含まれるSystem.Xml.Linq名前空間をインポートしておきます。
Imports System.Xml.Linq
~コード略~

■ページが読み込まれた時の処理
TextBlock1からTextBlock5のTextプロパティに、XML文書内のインデックスが0から4にあたる、<情報>要素の子要素<説明>の内容テキストを指定しておきます。
  Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    Dim xmldoc As XElement = XElement.Load("photo_etc.xml")
    TextBlock1.Text = xmldoc.Descendants("情報")(0).<説明>.Value
    TextBlock2.Text = xmldoc.Descendants("情報")(1).<説明>.Value
    TextBlock3.Text = xmldoc.Descendants("情報")(2).<説明>.Value
    TextBlock4.Text = xmldoc.Descendants("情報")(3).<説明>.Value
    TextBlock5.Text = xmldoc.Descendants("情報")(4).<説明>.Value
  End Sub
~コード略~

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

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会員サービスの概要とメリットをチェック

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