Silverlight 3に新しく追加されたコントロール

Silverlight 3徹底入門（2）

TreeView

　TreeViewコントロールは木構造のデータを画面上に表示するコントロールです。TreeViewコントロールを使うことで、サイトマップなどのXMLデータを読み取り視覚的に表示することができます。

　TreeViewコントロールは木の要素となるアイテムを直接追加する方法と、データの一覧をバインドして表示する方法の2つの表示方法があります。［リスト4］はTreeViewコントロールにTreeViewItemの要素を直に追加した場合の利用方法です。

［リスト4］TreeViewItemを使ったTreeViewの表示

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
  x:Class="CodeZine2.TreeViewSample1">
  <Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
      <TextBlock x:Name="textBlock" Text="TreeViewItemを使ったTreeViewの表示" />
      <controls:TreeView x:Name="treeView">
        <controls:TreeViewItem Header="1">
          <controls:TreeViewItem Header="1－1" />
          <controls:TreeViewItem Header="1－2" />
          <controls:TreeViewItem Header="1－3">
            <controls:TreeViewItem Header="1－3－1" />
          </controls:TreeViewItem>
        </controls:TreeViewItem>
        <controls:TreeViewItem Header="2" />
      </controls:TreeView>
    </StackPanel>
  </Grid>
</UserControl>

　TreeViewコントロールの子供であるTreeViewItemコントロールの階層構造がそのままTreeViewコントロールの内容として表示されます。実行すると［図3］のようにXAMLで指定した親子関係がツリー表示されていることを確認できます。

［図3］ TreeViewItemを使ったTreeViewの表示

　次にコレクションのデータバインドを利用した場合のコード例を見ていきましょう。

　［リスト5］はTreeViewにコレクションをデータバインドする際のXAML側のデザインコードです。

［リスト5］コレクションのデータバインドをTreeViewの表示（XAML側）

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
  xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
  x:Class="CodeZine2.TreeViewSample2">
  <Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
      <TextBlock Text="コレクションのデータバインドを使ったTreeViewの表示" />
      <controls:TreeView x:Name="SectionTreeView" >
        <controls:TreeView.ItemTemplate>
          <common:HierarchicalDataTemplate ItemsSource="{Binding SubSections}">
            <StackPanel>
              <TextBlock Text="{Binding Content}"/>
            </StackPanel>
          </common:HierarchicalDataTemplate>
        </controls:TreeView.ItemTemplate>
      </controls:TreeView>
    </StackPanel>
  </Grid>
</UserControl>

　コレクションのデータバインドを使ったTreeViewの表示では、TreeViewコントロールのItemTemplateプロパティに、HierarchicalDataTemplateコントロールを利用して階層型のデータに対するテンプレートを作成し、整形して表示しています。

　データをバインドするコードを記述していないためまだ動きませんが、動作イメージは［図4］のようになります。

［図4］ コレクションのデータバインドを使ったTreeViewの表示

　次にデータをセットするロジック側を確認していきましょう。

　階層型のデータ表示に優れたTreeViewコントロールですが、今のところXMLをじかに表示する機能は持っていません。そのため、XMLを読み込んだ後は一度コレクションに変換してTreeViewコントロールにバインドする必要があります。そのため［リスト5］のようなエンティティクラスを事前に用意し、初期化コードでは読み込んだXMLをこのクラスのListに流し込む処理を記述します。

［リスト5］ XMLデータを一時的に格納するエンティティクラス

public class Section
{
  public string Id { get; set; }
  public string Content { get; set; }
  public List<Section> SubSections { get; set; }
}

　［リスト6］はこのサンプル画面の初期化コードです。

［リスト6］ リスト4の初期化コード

  /// <summary>
  /// 画面の初期化コード
  /// <summary>
  public TreeViewSample2()
  {
    InitializeComponent();

    var xml = LoadXml();
    var query = ParseXml(xml);
    SectionTreeView.ItemsSource = query;
  }

  /// <summary>
  /// 1.TreeViewに表示するXMLデータの読み込み
  /// </summary>
  private XElement LoadXml()
  {
    return XElement.Parse(
@"<root>
  <Section Id='1' Content='親'>
    <Section Id='1-1' Content='子1'/>
    <Section Id='1-2' Content='子2'/>
    <Section Id='1-3' Content='子3'>
      <Section Id='1-3-1' Content='孫1'/>
    </Section>
  </Section>
  <Section Id='2' Content='親2'/>
  </root>");
  }

  /// <summary>
  /// 2.XMLからSectionクラスのコレクションへの変換
  /// </summary>
  private List<Section> ParseXml(XElement section)
  {
    var query = (from element in section.Elements("Section")
       select new Section
       {
         Id = (string)element.Attribute("Id"),
         Content = (string)element.Attribute("Content"),
         SubSections = ParseXml(element),
       }).ToList();

    return query;
  }

　処理自体は単純なものですので詳しくは解説しませんが、初期化で行っている作業は次の3つです。

1. TreeViewに表示するXMLデータの読み込み
2. XMLからSectionクラスのコレクションへの変換
3. TreeViewコントロールのItemSourceプロパティーへの割り当て

　作成が終わったら早速実行してみてください。［図4］のような画面は表示されましたか？

　TreeVeiwの詳しい説明はMSDNの「TreeViewクラス」を参照してください。

XAMLの確認

　WindowsFormよりも表現の幅が広がったSilverlightですが、ヘルプをみてもいまいちXAMLの書き方がわからなかったり、こういった機能を実現するためにはどのようにXAMLを記入すればいいのかがわからないことはありませんか？ また、正しくXAMLを書いているのにどうも表示が乱れてしまうということはありませんか？

　MSDNの「Silverlight SDK Sample Browser」では、Silverlight SDKに含まれるコントロールを対象にこの機能を実現するときにはどのようなXAMLを記入すればいいのかといった、機能からXAMLの逆引きを行うことができます。

　また、Silverlight SPYを利用すると、画面に表示されているSilverlightのコンテンツがどのようなXAMLの構造になっているか、プロパティーの値やイベントハンドラーの状況などを確認することができます。

　Silverlight SPYは有償の製品ですが、silverlightdoc.netから21日間評価可能な評価版をダウンロードすることができます。