VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



TreeView

    イメージ
  •  TreeView は、展開したり折りたたんだりできる階層ツリー型データを表示できるコントロールです。 エクスプローラーの左側にあるフォルダーツリーの部分に相当するコントロールです。

  •  とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「TreeViewWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="TreeViewWindow1"
            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"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="TreeViewWindow1" Height="350" Width="525">
    
        <Grid>
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <TreeView Margin="10">
    
                <TreeViewItem Header="root">
    
                    <TreeViewItem Header="parent1">
                        <TreeViewItem Header="child1a" />
                        <TreeViewItem Header="child1b" />
                        <TreeViewItem Header="child1c" />
                    </TreeViewItem>
    
                    <TreeViewItem Header="parent2">
                        <TreeViewItem Header="child2a" />
                        <TreeViewItem Header="child2b" />
                        <TreeViewItem Header="child2c" />
                    </TreeViewItem>
    
                    <TreeViewItem Header="parent3">
                        <TreeViewItem Header="child3a" />
                        <TreeViewItem Header="child3b" />
                        <TreeViewItem Header="child3c" />
                    </TreeViewItem>
                    
                </TreeViewItem>
    
            </TreeView>
    
            <TreeView Margin="10" Grid.Row="1">
    
                <TreeViewItem Header="root" IsExpanded="True">
    
                    <TreeViewItem Header="parent1">
                        <TreeViewItem Header="child1a" />
                        <TreeViewItem Header="child1b" />
                        <TreeViewItem Header="child1c" />
                    </TreeViewItem>
    
                    <TreeViewItem Header="parent2" IsExpanded="True">
                        <TreeViewItem Header="child2a" />
                        <TreeViewItem Header="child2b" />
                        <TreeViewItem Header="child2c" />
                    </TreeViewItem>
    
                    <TreeViewItem Header="parent3">
                        <TreeViewItem Header="child3a" />
                        <TreeViewItem Header="child3b" />
                        <TreeViewItem Header="child3c" />
                    </TreeViewItem>
    
                </TreeViewItem>
    
            </TreeView>
    
        </Grid>
        
    </Window>
    

  •  TreeView は、大元となる TreeView と各ノードとなる TreeViewItem から成り立っています。 親ノード1つに対して、子ノードを複数追加することができます。

  •  IsExpanded を True に設定することで最初から展開した状態で表示できるようになります。

  • スポンサーリンク


  •  続いて、ノード選択した時のイベント処理です。

  • <Window x:Class="TreeViewWindow2"
            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"
            xmlns:local="clr-namespace:z04_NormalControls"
            mc:Ignorable="d"
            Title="TreeViewWindow2" Height="350" Width="525">
    
        <Grid>
    
            <TreeView Margin="10" SelectedItemChanged="SelectedItemChanged">
    
                <TreeViewItem Header="root" IsExpanded="True">
    
                    <TreeViewItem Header="parent1">
                        <TreeViewItem Header="child1a" />
                        <TreeViewItem Header="child1b" />
                        <TreeViewItem Header="child1c" />
                    </TreeViewItem>
    
                    <TreeViewItem Header="parent2" IsExpanded="True">
                        <TreeViewItem Header="child2a" />
                        <TreeViewItem Header="child2b" />
                        <TreeViewItem Header="child2c" />
                    </TreeViewItem>
    
                    <TreeViewItem Header="parent3">
                        <TreeViewItem Header="child3a" />
                        <TreeViewItem Header="child3b" />
                        <TreeViewItem Header="child3c" />
                    </TreeViewItem>
    
                </TreeViewItem>
    
            </TreeView>
    
        </Grid>
    
    </Window>
    

    Public Class TreeViewWindow2
    
        Private Sub SelectedItemChanged(sender As Object, e As RoutedPropertyChangedEventArgs(Of Object))
    
            ' 変更前の選択項目
            If e.OldValue IsNot Nothing Then
                Dim item = CType(e.OldValue, TreeViewItem)
                Console.WriteLine("")
                Console.WriteLine($"{item.Header} old selected.")
            End If
    
            ' 変更後の選択項目
            If e.NewValue IsNot Nothing Then
                Dim item = CType(e.NewValue, TreeViewItem)
                Console.WriteLine($"{item.Header} new selected.")
            End If
    
        End Sub
    
    End Class
    

  •  SelectedItemChanged イベントの引数からは、変更前と変更後の値を取得することができます。これを使って、変更した値を調べています。