CodeZine(コードジン)

特集ページ一覧

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

Silverlight 3徹底入門(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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の表示
[図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の表示
[図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日間評価可能な評価版をダウンロードすることができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight 3徹底入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5