TreeViewコントロール Visual Basic 6 編


    知人がVBでTreeViewコントロールを使った開発をやることになり、かなり悩んでいました。
    また、VBでTreeViewを扱う方法についてtechbank.jpでも取り上げて欲しいとの要望があり、
    急遽取り上げることにしました。


    ■　TreeViewコントロールって何？

    ■　TreeViewコントロールの参照設定

    ■　ImageListコントロールの配置と設定

    ■　TreeViewコントロールの配置と設定

    ■　Form_Load()でTreeViewのRootノードを設定する

    ■　TreeViewのイベント関数

    ■　子ノードを作成する

    ■　サンプルソースのダウンロード(XML+TreeView)



    ■ TreeViewコントロールって何？

    		TreeViewコントロールは、何かの階層図やエクスプローラのようにディスク上のファイルやディレクトリ等、 階層構造をしたあらゆる種類の情報を表示するために使用するコントロールです。

    TreeViewコントロールを使った例

    		■　TreeViewコントロールの参照設定

    		新規でプロジェクトファイルを作成すると、Visual Basicのデフォルトのコントロールとして
    TreeViewコントロールが表示されていません。
    TreeViewコントロールを配置するには、以下の作業を行う必要があります。
    （下記は、VB6でのやり方を説明します）



    手順1. Visual Basicの[プロジェクト]メニュー ⇒　[コンポーネント]を選択する

    手順2. [コントロール]選択画面から
    　　[Microsoft Windows Common Controls 6.0 (SP4)]を選択し、[OK]ボタンを押す。



    すると[ツールボックス]ウィンドウに下記の図のようなコンポーネントが追加されます。

    		■ ImageListコントロールの配置と設定

    		TreeViewコントロールにあるアイコン（例えばフォルダ用アイコン等）は、
    ImageListコントロールを参照して制御しています。
    その為、ImageListコントロールにTreeViewで使用するアイコンを事前に登録する必要があります。



    手順1. [ツールボックス]ウィンドウから、ImageListコントロールを選択し、フォームに貼り付ける

    手順2. 配置したImageListを選択し、[プロパティ]ウィンドウから[プロパティページ]を選択する。

    手順3. ImageListのプロパティページ用のウィンドウが表示されるので、[イメージ]タブを選択します。




    選択後、[ピクチャの挿入]ボタンをClickし、TreeViewで使用したいアイコンやBitmapファイル
    を選択します。ピクチャの挿入後、挿入したピクチャに[キー名]を命名します。
    キー名は後に、TreeViewコントロールのアイコンを制御する際に使用するので、必ず名前をつけます。



    設定後は、[OK]ボタンを押し、ImageListプロパティページの設定を完了させます。

    		■ TreeViewコントロールの配置と設定

    		ここからTreeViewコントロールに対する設定です。


    手順1. [ツールボックス]ウィンドウから、TreeViewコントロールを選択し、フォームに貼り付ける

    手順2. 配置したTreeViewを選択し、[プロパティ]ウィンドウから[プロパティページ]を選択する。

    手順3. TreeViewのプロパティページ用のウィンドウが表示されるので、[全般]タブを選択します。
    　　　　画面中央部に[イメージリスト]という項目があるので、「ImageListの配置と設定」のところで設定した
    　　　　ImageListコントロールを設定します。

    手順4. TreeViewコントロールのIdentationプロパティを[プロパティ]ウィンドウで設定します。
    　　　　Identationプロパティは、TreeViewコントロールのインデントの長さを決めるプロパティです。
    　　　　TreeViewのデフォルトのインデントが深めに設定してある為、もう少し浅めに設定しておくと
    　　　　見栄えがよくなります。単位は不明です。
    　　　　
    　　　　

    		■ Form_Load()でTreeViewのRootノードを設定する

    		ここからは、ソース上でTreeViewを制御します。
    まずは、一番の親であるRootとなるノードを設定します。

    なお、私は、TreeViewで使用するアイコンとしてImageListで設定した下記のアイコンを使用しています。

    キー名：closed
    キー名：open

    また、配置したTreeViewのオブジェクト名は、TreeView1です。 
    Private Sub Form_Load()

    '*************************************************************
    '   変数定義
    '*************************************************************

    '   TreeViewノードオブジェクト変数
    Dim mainNode        As node

    '   エラーメッセージ内容
    Dim strErrMsg       As String


    '*************************************************************
    ' TreeView の大枠を設定する
    '*************************************************************
    With Me.TreeView1

        '   ノードのソートを認めない
        .Sorted = False

        '   ノードのラベルは編集できない
        .LabelEdit = False

        '   Viewのラインとルート線の種類を定義
        .LineStyle = tvwRootLines

        '   ルートノードを作る
        Set mainNode = .Nodes.Add(, , "R", "root")

        '   ルートノードのアイコン
        mainNode.Image = "closed"

        '   ルートノードのアイコン
        mainNode.SelectedImage = "open"

    End With

End Sub

    		■ TreeViewのイベント関数

    		TreeView用のイベント関数は思っていた以上にいろんなものが用意されています。
    今回ここで全部紹介するのは難しいので良く使用するイベント関数を紹介します。

    No イベント関数名 イベント関数概要
    サンプルコード
    1 BeforeLabelEdit(Cancel As Integer) Treeノードのラベルを編集しようとした時に発生 
    
'*************************************************************
' 現在選択されている TreeViewまたは Nodeオブジェクトのラベルを
' ユーザーが編集しようとした時
'*************************************************************

Private Sub TreeView1_BeforeLabelEdit(Cancel As Integer)
    Exit Sub
End Sub
    2 NodeClick(ByVal node As node) Treeノードのアイコンかラベルがクリックされた時に発生 
    
'*************************************************************
'   TreeViewノードアイコンかラベルがClickされた時
'*************************************************************

Private Sub TreeView1_NodeClick(ByVal node As node)
    ' 自ノードのアイコンをOPEN用に
    node.Image = "open"
End Sub
    3 Expand(ByVal node As node) TreeViewのノードの「+」記号を押した
    (展開された)時に発生    		 
    
'*************************************************************
'   TreeViewのノードが展開された（「+」記号を押した）時
'*************************************************************

Private Sub TreeView1_Expand(ByVal node As node)
    ' 自ノードのアイコンをOPEN用に
    node.Image = "open"
End Sub
    4 Collapse(ByVal node As node) TreeViewのノードの「-」記号を押した時に発生 
    
'*************************************************************
'   TreeViewのノードの「-」記号を押した
'*************************************************************

Private Sub TreeView1_Collapse(ByVal node As node)
    ' 自ノードのアイコンをCLOSE用に 
    node.Image = "closed"
End Sub


    		■ 子ノードを作成する

    		子ノードを作成する場合、以下のようにNodesプロパティのAddメソッドを使い子ノードを作成します。

    [書式]：
    object.Nodes.Add([relative], [relationship], [key], text, [image, [selectedimage]])

    [説明]:
    object TreeViewコントロールのオブジェクト名
    [relative] 親ノードのKey名（親ノードを作成した時につけた名前）
    [relationship] ノードとの関係を定数で指定します。
    ここでは、子ノードを作るので tvwChild を指定する
    [key] 子ノードにつけるKey名を命名する。
    Key名は１つのノードにつき一意でなければならない
    [text] TreeViewのノードに表示する名前を文字列で指定する
    [image] ノードに表示するデフォルト用のアイコンを
    ImageListコントロールのキー名やインデックス番号を使って指定する
    [selectedimage] ノードが、マウスで選択された時に表示するアイコンを、
    ImageListコントロールのキー名やインデックス番号を使って指定する


    [サンプル]：
    (親ノードは、「上記のRootノードを作成する」のところで作成したRootノードを親にします）

    RootノードのKey名は、"R"　です

    '   2代目と3代目の子ノードを作る
With TreeView1

    ' 息子ノードをフォルダアイコンで表す
    .Nodes.Add "R",    tvwChild, "Key2", "息", "closed", "open"

    ’孫ノードをテキストファイルアイコンで表す
    .Nodes.Add "Key2", tvwChild, "Key3", "孫", "leaf",   "leaf"

End With

    		■　サンプルソースのダウンロード(XML+TreeView)

    		XMLの階層データを下にTreeViewにそのまま表示するプログラムを作りました。
    若干バグはありますが、基本的なところは動いています。
    ソースを解析したい方は、下記からサンプルソースをダウンロードして下さい。
    （なお、サンプルソースを引用し発生した問題は一切責任を負いません。
    各自の責任において使用してください。）