Silverlightでのツリー表示（その1）: 標準TreeViewコントロールとNetAdvantage XamDataTreeコントロール

階層構造の表示

　ここまでは階層構造を持たない単一のコレクションオブジェクトのデータを設定し、表示しましたが、TreeViewコントロールやXamDataTreeコントロールは本来階層構造を表示するためのコントロールなので、いよいよ階層構造を表示してみましょう。

　ItemsControlは設定されたコレクションオブジェクトの個々のItemを表示するために、個々のItem表示用のコントロールを生成して表示に利用します。生成するコントロールは親となるコントロールによって異なります。

　例えばListBoxコントロールの場合はListBoxItemコントロール、ComboBoxの場合はComboBoxItem、そしてTreeViewコントロールの場合はTreeViewItemというコントロールが生成されます。

　つまり、最終的にはItemsSourceに設定されたオブジェクトの要素の数だけTreeViewItemコントロールが追加されることになります。

　TreeViewItemコントロールもコンテンツモデルのコントロールで、こちらはHeaderdItemsControlというコントロールの種類でオブジェクトのコレクションとヘッダーを取り扱うコントロールとなっています。

　そのため、TreeViewItemには通常のItemsControlと同じItemsプロパティ、そしてItemsSourceプロパティに加えてヘッダーを表示するためHeaderプロパティが用意されています。

　つまり、TreeViewコントロールは複数のTreeViewItemを保持することができて、コンテンツとして設定することで階層構造を表現することができます。

　それでは早速、コンテンツにTreeViewItemコントロールを利用して階層構造の表示を行ってみましょう。

• サンプルプログラム4： 04-TreeViewItem.zip

LIST7：TreeViewItemコントロールを使った階層構造の表示（XAML）

<UserControl x:Class="_04_TreeViewItem.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" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        
        <!-- TreeViewコントロール -->
        <sdk:TreeView Name="treeView1">
            <sdk:TreeViewItem Header="階層構造1">
                <sdk:TreeViewItem Header="階層構造2－1">
                    <sdk:TreeViewItem Header="階層構造3－1" />
                    <sdk:TreeViewItem Header="階層構造3－2" />
                </sdk:TreeViewItem>
                <sdk:TreeViewItem Header="階層構造2－2" />
                <sdk:TreeViewItem Header="階層構造2－3" />
                <sdk:TreeViewItem Header="階層構造2－4" />
            </sdk:TreeViewItem>
        </sdk:TreeView>
    </Grid>
</UserControl>

　実行結果は以下のとおりです。

　TreeViewItemは個々のデータ表示にContentPresenterを利用して表示しています。つまり、通常の文字だけではなく、各項目の表示をコントロールで表現できます。

　以下のようなXAMLを設定することで各項目をカスタマイズすることもできます。

• サンプルプログラム5： 05-TreeViewItemUseControl.zip

LIST8：階層構造の各項目にコントロールを利用した表示（XAML）

<UserControl x:Class="_05_TreeViewItemUseControl.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" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:TreeView Name="treeView1">
            <sdk:TreeViewItem Header="テキストブロック">
                <TextBlock Text="テキストブロック1" />
                <TextBlock Text="テキストブロック2" />
                <TextBlock Text="テキストブロック3" />
            </sdk:TreeViewItem>
            <sdk:TreeViewItem Header="ボタンコントロール">
                <Button Content="ボタン1" />
                <Button Content="ボタン2" />
                <Button Content="ボタン3" />
            </sdk:TreeViewItem>
            <sdk:TreeViewItem Header="チェックボックスコントロール">
                <CheckBox Content="チェックボックス1"/>
                <CheckBox Content="チェックボックス2"/>
                <CheckBox Content="チェックボックス3"/>
            </sdk:TreeViewItem>
        </sdk:TreeView>
    </Grid>
</UserControl>

　実行結果は以下のとおりです。