SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight/WPFで使える逆引きTips集

Silverlight/WPFで使える逆引きTips集
――ツリービュー機能

(13) TreeViewコントロール

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載ではSilverlightやWPFで使えるTipsを逆引き形式で紹介していきます。今回はSilverlightとWPFで使用できるツリービュー機能(TreeViewコントロール)のノウハウを解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 この連載ではSilverlightとWPFで使える、逆引きTipsを紹介していきます。今回は、SilverlightとWPFで使えるツリービュー機能(TreeViewコントロール)について取り上げます。

対象読者

 Visual BasicまたはVisual C#、および、Silverlight/WPFのプロジェクト作成方法、XAMLについて基礎的な知識がある方を対象としています。

必要な環境

 下記を使ってプログラミングできる環境(筆者はこの環境で検証し執筆しています)。

  • Visual Studio 2010
  • Microsoft Silverlight 4 Tools for Visual Studio 2010

 Microsoft Silverlight 4 Tools for Visual Studio 2010は、Microsoftダウンロードセンターより入手できます。Visual Studio 2010が準備できない方は、Visual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0の組み合わせでも構いません。ただし、この場合は本連載で取り上げるTipsが動作しない可能性もあります。あらかじめご了承ください。

今回紹介するTips

  1. ツリービューを作成する
  2. 動的に項目を追加する
  3. 選択された項目を取得する
  4. 選択された項目のパスを取得する
  5. 選択した項目に子項目を追加する
  6. 選択された項目を削除する
  7. 項目を展開/折りたたみする
  8. 項目に画像とテキストを表示する
  9. 項目にチェックボックスやラジオボタンを表示する

01.ツリービューを作成する

 ツリービューを作成するにはTreeViewクラスを、ツリービュー項目を作成するにはTreeVewItemクラスを使用します。

 ツリービュー項目に表示するテキストはHeaderプロパティに設定します。

 また、項目は入れ子にすることで子項目を作成することができます。

 コードから項目を追加する場合にはItemsプロパティAddメソッドを使用します。

 下記はツリービューを作成する例です。

ツリービューを作成する例
ツリービューを作成する例
XAMLの例(WPFの例)
<TreeView>
    <TreeViewItem Header="親1">
        <TreeViewItem Header="子1" />
        <TreeViewItem Header="子2">
            <TreeViewItem Header="孫1" />
            <TreeViewItem Header="孫2" />
        </TreeViewItem>
        <TreeViewItem Header="子3">
            <TreeViewItem Header="孫1" />
            <TreeViewItem Header="孫2" />
            <TreeViewItem Header="孫3" />
        </TreeViewItem>
    </TreeViewItem>
    <TreeViewItem Header="親2">
        <TreeViewItem Header="子1" />
        <TreeViewItem Header="子2" />
    </TreeViewItem>
</TreeView>
XAMLの例(Silverlightの例)
<sdk:TreeView Height="200" Width="200" HorizontalAlignment="Left" 
              VerticalAlignment="Top" Name="TreeView1">
    <sdk:TreeViewItem Header="親1">
        <sdk:TreeViewItem Header="子1" />
        <sdk:TreeViewItem Header="子2">
            <sdk:TreeViewItem Header="孫1" />
            <sdk:TreeViewItem Header="孫2" />
        </sdk:TreeViewItem>
        <sdk:TreeViewItem Header="子3">
            <sdk:TreeViewItem Header="孫1" />
            <sdk:TreeViewItem Header="孫2" />
            <sdk:TreeViewItem Header="孫3" />
        </sdk:TreeViewItem>
    </sdk:TreeViewItem>
    <sdk:TreeViewItem Header="親2">
        <sdk:TreeViewItem Header="子1" />
        <sdk:TreeViewItem Header="子2" />
    </sdk:TreeViewItem>
</sdk:TreeView>
VBの例
'XAMLではなくコードでツリービューを作成するには下記のようにします

'=== 親1のツリーを作成 ここから ===
Dim treeView1 As New Controls.TreeView
Dim item1 As New TreeViewItem
Dim item2 As New TreeViewItem
Dim item3 As New TreeViewItem
Dim item4 As New TreeViewItem
Dim item5 As New TreeViewItem
Dim item6 As New TreeViewItem
Dim item7 As New TreeViewItem
Dim item8 As New TreeViewItem

item1.Header = "親1"
item2.Header = "子1"
item3.Header = "孫1"
item4.Header = "孫2"

子1に孫1を追加
item2.Items.Add(item3)
子1に孫2を追加
item2.Items.Add(item4)
親1に子1を追加
item1.Items.Add(item2)

item5.Header = "子2"
item6.Header = "孫1"
item7.Header = "孫2"
item8.Header = "孫3"

子2に孫1を追加
item5.Items.Add(item6)
子2に孫2を追加
item5.Items.Add(item7)
子2に孫3を追加
item5.Items.Add(item8)
親1に子2を追加
item1.Items.Add(item5)
ツリービューに親1を追加
treeView1.Items.Add(item1)
'=== 親1のツリーを作成 ここまで ===

'=== 親2のツリーを作成 ここから ===
Dim item9 As New TreeViewItem
Dim item10 As New TreeViewItem
Dim item11 As New TreeViewItem

item9.Header = "親2"
item10.Header = "子1"
item11.Header = "子2"

親2に子1を追加
item9.Items.Add(item10)
親2に子2を追加
item9.Items.Add(item11)
ツリービューに親2を追加
treeView1.Items.Add(item9)
'=== 親2のツリーを作成 ここまで ===
C#の例
// XAMLではなくコードでツリービューを作成するには下記のようにします

//=== 親1のツリーを作成 ここから ===
System.Windows.Controls.TreeView treeView1 = new System.Windows.Controls.TreeView();
TreeViewItem item1 = new TreeViewItem();
TreeViewItem item2 = new TreeViewItem();
TreeViewItem item3 = new TreeViewItem();
TreeViewItem item4 = new TreeViewItem();
TreeViewItem item5 = new TreeViewItem();
TreeViewItem item6 = new TreeViewItem();
TreeViewItem item7 = new TreeViewItem();
TreeViewItem item8 = new TreeViewItem();

item1.Header = "親1";
item2.Header = "子1";
item3.Header = "孫1";
item4.Header = "孫2";

// 子1に孫1を追加
item2.Items.Add(item3);
// 子1に孫2を追加
item2.Items.Add(item4);
// 親1に子1を追加
item1.Items.Add(item2);

item5.Header = "子2";
item6.Header = "孫1";
item7.Header = "孫2";
item8.Header = "孫3";

// 子2に孫1を追加
item5.Items.Add(item6);
// 子2に孫2を追加
item5.Items.Add(item7);
// 子2に孫3を追加
item5.Items.Add(item8);
// 親1に子2を追加
item1.Items.Add(item5);
// ツリービューに親1を追加
treeView1.Items.Add(item1);
//=== 親1のツリーを作成 ここまで ===

//=== 親2のツリーを作成 ここから ===
TreeViewItem item9 = new TreeViewItem();
TreeViewItem item10 = new TreeViewItem();
TreeViewItem item11 = new TreeViewItem();

item9.Header = "親2";
item10.Header = "子1";
item11.Header = "子2";

// 親2に子1を追加
item9.Items.Add(item10);
// 親2に子2を追加
item9.Items.Add(item11);
// ツリービューに親2を追加
treeView1.Items.Add(item9);
//=== 親2のツリーを作成 ここまで ===
ポイント

 ツリービューを作成するにはTreeViewクラスを使用する。

 ツリービュー項目を作成するにはTreeViewItemクラスを使用する。

次のページ
02.動的に項目を追加する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight/WPFで使える逆引きTips集連載記事一覧

もっと読む

この記事の著者

HIRO(ヒロ)

HIRO's.NETのHIROです。とある半導体工場のSEです。VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。最近はBlog でPowerShellについて書いています。2008/07/07にPowerShell from Japan!!というサイトを立ち上げまし...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5870 2011/04/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング