独自のエクスプローラの提供 : TreeView コントロールを使用する

  • [アーティクル]

更新 : 2007 年 11 月

TreeView コントロールを使用することによって、Windows エクスプローラのように機能するアプリケーション インターフェイスをデザインできます。インターフェイスの左側にノードの階層構造 (親フォルダから子フォルダに分岐する Windows ディレクトリに似た構造) を表示し、ノードに関連付けられたアイテムを右側に表示できます。たとえば、Visual Basic フォーラムの各 Web ページのノードを表示する TreeView コントロールを追加できます。ユーザーがノードを選択すると、対応する Web ページを WebBrowser コントロールに表示できます。

ノードには、親ノード、子ノード、ルート ノードの 3 種類があります。階層構造の最上位のノードをルート ノードといいます。階層構造で直下に 1 つ以上のノードを持つノードが親ノードです。階層構造でノードの直下に現れる別のノードが子ノードです。子ノードを追加すると、親ノードは自動的に折りたたみ可能および展開可能になります。

やってみよう

エクスプローラを作成するには

  1. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  2. [Windows フォーム アプリケーション] をクリックし、[OK] をクリックします。

  3. フォームをクリックし、[プロパティ] ウィンドウで次のプロパティを変更します。

    プロパティ

    値

    Text

    Forum Explorer

    Size

    764, 564

  4. フォームに TreeView コントロールを追加し、[プロパティ] ウィンドウで次のプロパティを変更します。

    プロパティ

    値

    Dock

    Left

    Size

    190, 530

  5. Nodes プロパティをクリックし、その横の省略記号ボタン (...) をクリックして TreeNode エディタを開きます。

  6. TreeNode エディタで [ルートの追加] をクリックし、ルート ノードの Text プロパティを「Visual Basic Forums」に変更します。

  7. [子の追加] を 3 回クリックしてルート ノードに子ノードを 3 つ追加します。次に、各ノードの Text プロパティを次の表のように変更します。

    ノード

    値

    ノード 1

    Visual Basic Express Edition

    ノード 2

    Visual Basic IDE

    ノード 3

    Visual Basic Language

  8. [OK] をクリックします。

  9. フォームに WebBrowser コントロールを追加します。

    既定では、フォームの残りのスペースが WebBrowser コントロールで埋められます。

  10. TreeView コントロールをダブルクリックして、コード エディタで既定のイベント ハンドラを入力します。

  11. TreeView1_AfterSelect イベント ハンドラに次のコードを追加します。このコードは、選択されたノードのテキストを判断し、対応する Web ページを WebBrowser コントロールに表示します。

    Bb384477.alert_note(ja-jp,VS.90).gifメモ :

    この例は、転送リンクを使用しています。つまり、Microsoft が古いリンクを回避するために使用している URL リダイレクト システムを利用するリンクを使用していますが、表示する Web ページの URL を使用することもできます。

    		 
    Select Case e.Node.Text
    Case "Visual Basic Forums"
        WebBrowser1.Navigate("https://go.microsoft.com/" _
            & "fwlink/?LinkID=82999")
    Case "Visual Basic Express Edition"
        WebBrowser1.Navigate("https://go.microsoft.com/" _
            & "fwlink/?LinkID=82994")
    Case "Visual Basic IDE"
        WebBrowser1.Navigate("https://go.microsoft.com/" _
            & "fwlink/?LinkID=82996")
    Case "Visual Basic Language"
        WebBrowser1.Navigate("https://go.microsoft.com/" _
            & "fwlink/?LinkID=82997")
End Select

  12. F5 キーを押してプログラムを実行します。

    フォームが表示されると、Visual Basic フォーラムのメイン Web ページが表示されます。

  13. ルート ノードの横の正符号 (+) をクリックし、子ノードをクリックすると、対応する Web ページが表示されます。

次の手順

このレッスンでは、TreeView コントロールを使用して、Windows エクスプローラのように機能するアプリケーションを作成する方法を説明しました。

次のセクションでは、Windows Presentation Foundation (WPF) アプリケーションの外観を作成する別の方法について説明します。このセクションを省略して、「問題の確認 : デバッグを行ってエラーを検出し、修正する」に進んでもかまいません。ここでは、Visual Basic のツールを使用して、プログラム内のエラー (一般にバグと呼ばれるもの) を見つけて修正する方法を説明します。

次のレッスン : 「プログラムの外観の作成 : Windows Presentation Foundation の概要」

参照

参照

TreeView コントロールの概要 (Windows フォーム)

その他の技術情報

プログラムの外観の作成 : Windows フォームの概要