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

（13） TreeViewコントロール

2011/04/19 14:00

ポスト

ダウンロード TreeView WPF VBサンプル (1.5 MB)
ダウンロード TreeView WPF C#サンプル (1.5 MB)
ダウンロード TreeView Silverlight VBサンプル (10.8 MB)
ダウンロード TreeView Silverlight C#サンプル (10.8 MB)

08.項目に画像とテキストを表示する

　ツリービュー項目に画像とテキストを表示するには、TreeViewItemクラスのHeaderプロパティに設定します。

　下記は項目に画像とテキストを表示する例です。

　画像にはImageクラスを使用し、テキストにはTextBlockを使用してStackPanelに配置した上で、Headerプロパティに設定しています。

項目に画像とテキストを表示する例

XAMLの例（WPFの例）

<DockPanel Name="DockPanel1" LastChildFill="True">
    <TreeView Name="TreeView1" DockPanel.Dock="Top">
        <TreeViewItem Header="Flower" Name="TreeViewItem1" IsExpanded="True">
            <!-- コードから項目を追加するにはコメントにする ここから -->
            <TreeViewItem IsExpanded="True">
                <TreeViewItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/Chrysanthemum.jpg" Width="102" Height="76" Margin="2" />
                        <TextBlock Text="菊" FontSize="32" Height="76" />
                    </StackPanel>
                </TreeViewItem.Header>
            </TreeViewItem>
            <TreeViewItem IsExpanded="True">
                <TreeViewItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Images/Tulips.jpg" Width="102" Height="76" Margin="2"/>
                        <TextBlock Text="チューリップ" FontSize="32" Height="76" />
                    </StackPanel>
                </TreeViewItem.Header>
            </TreeViewItem>
            <!-- コードから項目を追加するにはコメントにする ここまで -->
        </TreeViewItem>
    </TreeView>
</DockPanel>

XAMLの例（Silverlightの例）

<sdk:TreeView Height="230" HorizontalAlignment="Left" Margin="12,44,0,0" 
              Name="TreeView1" VerticalAlignment="Top" Width="360">
    <sdk:TreeViewItem Name="TreeViewItem1" Header="Flower">
        <!-- コードから項目を追加するにはコメントにする ここから -->
        <sdk:TreeViewItem IsExpanded="True">
            <sdk:TreeViewItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Navigation;component/Images/Chrysanthemum.jpg" 
                           Width="102" Height="76" Margin="2" />
                    <TextBlock Text="菊" FontSize="32" Height="76" />
                </StackPanel>
            </sdk:TreeViewItem.Header>
        </sdk:TreeViewItem>
        <sdk:TreeViewItem IsExpanded="True">
            <sdk:TreeViewItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Navigation;component/Images/Tulips.jpg" 
                           Width="102" Height="76" Margin="2"/>
                    <TextBlock Text="チューリップ" FontSize="32" Height="76" />
                </StackPanel>
            </sdk:TreeViewItem.Header>
        </sdk:TreeViewItem>
        <!-- コードから項目を追加するにはコメントにする ここまで -->
    </sdk:TreeViewItem>
</sdk:TreeView>

VBの例

'XAMLからツリービュー項目（イメージとテキスト）を追加するには下記のようにします

Dim item1 As New TreeViewItem
Dim item2 As New TreeViewItem
Dim stackPanel1 As New StackPanel
Dim stackPanel2 As New StackPanel
Dim image1 As New Image
Dim image2 As New Image
Dim textBlock1 As New TextBlock
Dim textBlock2 As New TextBlock

stackPanel1.Orientation = Orientation.Horizontal
stackPanel1.Margin = New Thickness(2)
'イメージの作成
image1.Source = New BitmapImage(New Uri("Images/Chrysanthemum.jpg", UriKind.Relative))
image1.Width = 102
image1.Height = 76
stackPanel1.Children.Add(image1)
'テキストの作成
textBlock1.Text = "菊"
textBlock1.FontSize = 32
stackPanel1.Children.Add(textBlock1)
'ツリービュー項目にスタックパネルをセット
item1.Header = stackPanel1
'ツリービューに項目を追加
TreeViewItem1.Items.Add(item1)

stackPanel2.Orientation = Orientation.Horizontal
stackPanel2.Margin = New Thickness(2)
'イメージの作成
image2.Source = New BitmapImage(New Uri("Images/Tulips.jpg", UriKind.Relative))
image2.Width = 102
image2.Height = 76
stackPanel2.Children.Add(image2)
'テキストの作成
textBlock2.Text = "チューリップ"
textBlock2.FontSize = 32
stackPanel2.Children.Add(textBlock2)
'ツリービュー項目にスタックパネルをセット
item2.Header = stackPanel2
'ツリービューに項目を追加
TreeViewItem1.Items.Add(item2)

C#の例

// XAMLからツリービュー項目（イメージとテキスト）を追加するには下記のようにします

TreeViewItem item1 = new TreeViewItem();
TreeViewItem item2 = new TreeViewItem();
StackPanel stackPanel1 = new StackPanel();
StackPanel stackPanel2 = new StackPanel();
Image image1 = new Image();
Image image2 = new Image();
TextBlock textBlock1 = new TextBlock();
TextBlock textBlock2 = new TextBlock();

stackPanel1.Orientation = Orientation.Horizontal;
stackPanel1.Margin = new Thickness(2);
//イメージの作成
image1.Source = new BitmapImage(new Uri("Images/Chrysanthemum.jpg", UriKind.Relative));
image1.Width = 102;
image1.Height = 76;
stackPanel1.Children.Add(image1);
//テキストの作成
textBlock1.Text = "菊";
textBlock1.FontSize = 32;
stackPanel1.Children.Add(textBlock1);
//ツリービュー項目にスタックパネルをセット
item1.Header = stackPanel1;
//ツリービューに項目を追加
TreeViewItem1.Items.Add(item1);

stackPanel2.Orientation = Orientation.Horizontal;
stackPanel2.Margin = new Thickness(2);
//イメージの作成
image2.Source = new BitmapImage(new Uri("Images/Tulips.jpg", UriKind.Relative));
image2.Width = 102;
image2.Height = 76;
stackPanel2.Children.Add(image2);
//テキストの作成
textBlock2.Text = "チューリップ";
textBlock2.FontSize = 32;
stackPanel2.Children.Add(textBlock2);
//ツリービュー項目にスタックパネルをセット
item2.Header = stackPanel2;
//ツリービューに項目を追加
TreeViewItem1.Items.Add(item2);

ポイント

　ツリービューに画像やテキストを表示するにはTreeViewItemクラスのHeaderプロパティに項目を配置する。

09.項目にチェックボックスやラジオボタンを表示する

　ツリービュー項目にチェックボックスやラジオボタンを表示するには、TreeViewItemクラスのHeaderプロパティにCheckBoxコントロールやRadioButtonコントロールを配置します。CheckBoxやRadioButtonのTipsについては下記を参照してください。

SIlverlight/WPFで使える逆引きTips集　--ラジオボタンとチェックボックス機能

　下記は、ツリービューにチェックボックスとラジオボタンを表示する例です。

項目にチェックボックスやラジオボタンを表示する例

XAMLの例（WPFの例）

<DockPanel Name="DockPanel1" LastChildFill="True">
    <TreeView Name="TreeView1" DockPanel.Dock="Top">
        <TreeViewItem Header="RadioButton" IsExpanded="True">
            <RadioButton Content="項目1" />
            <RadioButton Content="項目2" />
            <RadioButton Content="項目3" />
        </TreeViewItem>
        <TreeViewItem Header="CheckBox" IsExpanded="True">
            <CheckBox Content="項目1" />
            <CheckBox Content="項目2" />
            <CheckBox Content="項目3" />
        </TreeViewItem>
    </TreeView>
</DockPanel>

XAMLの例（Silverlightの例）

<sdk:TreeView Height="220" HorizontalAlignment="Left" Margin="12,44,0,0" 
              Name="TreeView1" VerticalAlignment="Top" Width="300">
    <sdk:TreeViewItem Header="RadioButton" IsExpanded="True">
        <RadioButton Content="項目1" />
        <RadioButton Content="項目2" />
        <RadioButton Content="項目3" />
    </sdk:TreeViewItem>
    <sdk:TreeViewItem Header="CheckBox" IsExpanded="True">
        <CheckBox Content="項目1" />
        <CheckBox Content="項目2" />
        <CheckBox Content="項目3" />
    </sdk:TreeViewItem>
</sdk:TreeView>

ポイント

　ツリービューにラジオボタンやチェックボックスを表示するには、TreeViewItemクラスのHeaderプロパティにRadioButtonコントロールやCheckBoxコントロールを配置する。

まとめ

　WPFやSilverlightで使えるTreeViewコントロールは、XAMLを使用すれば容易にイメージを表示したり、コントロールを表示することができます。

　また、コードから現在選択されている項目を取得したり追加したりといったことも容易に行えることがお分かりいただけたかと思います。

　今回、紹介しませんでしたがコントロールテンプレートを使用することで自分好みのTreeViewコントロールも作成可能ですので是非挑戦してみてください。

　最後にTreeViewクラスとTreeViewItemクラスのMSDNリンクを下記に示します。

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

印刷用を表示

ポスト

Silverlight／WPFで使える逆引きTips集連載記事一覧: Silverlight／WPFで使える逆引きTips集　――マルチタッチ機能

Silverlight／WPFで使える逆引きTips集　――DataGrid機能（Silv...

Silverlight／WPFで使える逆引きTips集　――DataGrid機能（Silv...

もっと読む

この記事の著者: HIRO（ヒロ）

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

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

この著者の最近の執筆記事