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

ツリービュー項目に画像とテキストを表示するには、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);