チュートリアル : デザイナを使用した、ListView コントロールと TreeView コントロールを含むエクスプローラスタイルのインターフェイスの作成

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

Visual Studio 2005 の利点の 1 つは、プロフェッショナルな外観を備えた Windows フォームアプリケーションを短時間で作成できることです。一般的なシナリオは、Windows オペレーティングシステムの Windows エクスプローラによく似た、ListView コントロールと TreeView コントロールを持つユーザーインターフェイス (UI) を作成することです。Windows エクスプローラは、ユーザーのコンピュータに格納されているファイルとフォルダを階層構造で表示します。

メモ :
使用している設定またはエディションによっては、表示されるダイアログボックスやメニューコマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

使用している設定またはエディションによっては、表示されるダイアログボックスやメニューコマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

ListView コントロールと TreeView コントロールを含むフォームを作成するには

[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[新しいプロジェクト] ダイアログボックスで以下の作業を行います。
1. プロジェクトの種類ペインの [Visual Basic プロジェクト] または [Visual C# プロジェクト] をクリックします。
2. テンプレートペインの [Windows アプリケーション] をクリックします。
[OK] をクリックします。新しい Windows フォームプロジェクトが作成されます。
フォームに SplitContainer コントロールを追加し、Dock プロパティを Fill に設定します。
imageList1 という名前の ImageList をフォームに追加し、プロパティブラウザを使用して、フォルダイメージとドキュメントイメージの 2 つのイメージをこの順に追加します。
treeview1 という名前の TreeView をフォームに追加し、SplitContainer コントロールの左側に配置します。treeView1 のプロパティブラウザで、次の手順を実行します。
1. Dock プロパティを Fill に設定します。
2. ImageList プロパティを imagelist1 に設定します。
listView1 という名前の ListView をフォームに追加し、SplitContainer コントロールの右側に配置します。listview1 のプロパティブラウザで、次の手順を実行します。
1. Dock プロパティを Fill に設定します。
2. View プロパティを Details に設定します。
3. Columns プロパティの省略記号ボタン () をクリックして、ColumnHeader コレクションエディタを開きます。3 つの列を追加し、Text プロパティをそれぞれ Name、Type、Last Modified に設定します。[OK] をクリックし、ダイアログボックスを閉じます。
4. SmallImageList プロパティを imagelist1 に設定します。

TreeView にノードとサブノードを設定するコードを実装します。次のコード例は、ファイルシステムから読み取りを行います。このコードでは、前の手順で imageList1 に追加した folder.ico と doc.ico の 2 つのアイコンが存在している必要があります。

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("C:\Documents and Settings")
    If info.Exists Then
        rootNode = New TreeNode(info.Name)
        rootNode.Tag = info
        GetDirectories(info.GetDirectories(), rootNode)
        treeView1.Nodes.Add(rootNode)
    End If

End Sub

Private Sub GetDirectories(ByVal subDirs() As DirectoryInfo, _
    ByVal nodeToAddTo As TreeNode)

    Dim aNode As TreeNode
    Dim subSubDirs() As DirectoryInfo
    Dim subDir As DirectoryInfo
    For Each subDir In subDirs
        aNode = New TreeNode(subDir.Name, 0, 0)
        aNode.Tag = subDir
        aNode.ImageKey = "folder"
        subSubDirs = subDir.GetDirectories()
        If subSubDirs.Length <> 0 Then
            GetDirectories(subSubDirs, aNode)
        End If
        nodeToAddTo.Nodes.Add(aNode)
    Next subDir

End Sub

        private void PopulateTreeView()
        {
            TreeNode rootNode;

            DirectoryInfo info = new DirectoryInfo(@"C:\Documents and Settings");
            if (info.Exists)
            {
                rootNode = new TreeNode(info.Name);
                rootNode.Tag = info;
                GetDirectories(info.GetDirectories(), rootNode);
                treeView1.Nodes.Add(rootNode);
            }
        }

        private void GetDirectories(DirectoryInfo[] subDirs, 
            TreeNode nodeToAddTo)
        {
            TreeNode aNode;
            DirectoryInfo[] subSubDirs;
            foreach (DirectoryInfo subDir in subDirs)
            {
                aNode = new TreeNode(subDir.Name, 0, 0);
                aNode.Tag = subDir;
                aNode.ImageKey = "folder";
                subSubDirs = subDir.GetDirectories();
                if (subSubDirs.Length != 0)
                {
                    GetDirectories(subSubDirs, aNode);
                }
                nodeToAddTo.Nodes.Add(aNode);
            }
        }

このコードでは System.IO 名前空間を使用しているため、フォームの先頭に適切な using ステートメントまたはインポートステートメントを追加します。
```
Imports System.IO
```
```
using System.IO;
```

フォームのコンストラクタまたは Load イベント処理メソッドから、前の手順で作成したセットアップメソッドを呼び出します。

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

     public Form1()
        {
            InitializeComponent();
            PopulateTreeView();
        }

treeview1 の NodeMouseClick イベントを処理し、ノードがクリックされたときにノードの内容を listview1 に設定するコードを実装します。

Private Sub treeView1_NodeMouseClick(ByVal sender As Object, _
    ByVal e As TreeNodeMouseClickEventArgs) _
        Handles treeView1.NodeMouseClick

    Dim newSelected As TreeNode = e.Node
    listView1.Items.Clear()
    Dim nodeDirInfo As DirectoryInfo = _
    CType(newSelected.Tag, DirectoryInfo)
    Dim subItems() As ListViewItem.ListViewSubItem
    Dim item As ListViewItem = Nothing

    Dim dir As DirectoryInfo
    For Each dir In nodeDirInfo.GetDirectories()
        item = New ListViewItem(dir.Name, 0)
        subItems = New ListViewItem.ListViewSubItem() _
            {New ListViewItem.ListViewSubItem(item, "Directory"), _
            New ListViewItem.ListViewSubItem(item, _
            dir.LastAccessTime.ToShortDateString())}

        item.SubItems.AddRange(subItems)
        listView1.Items.Add(item)
    Next dir
    Dim file As FileInfo
    For Each file In nodeDirInfo.GetFiles()
        item = New ListViewItem(file.Name, 1)
        subItems = New ListViewItem.ListViewSubItem() _
            {New ListViewItem.ListViewSubItem(item, "File"), _
            New ListViewItem.ListViewSubItem(item, _
            file.LastAccessTime.ToShortDateString())}

        item.SubItems.AddRange(subItems)
        listView1.Items.Add(item)
    Next file

    listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize)

End Sub

     void treeView1_NodeMouseClick(object sender,
            TreeNodeMouseClickEventArgs e) 
        {
            TreeNode newSelected = e.Node;
            listView1.Items.Clear();
            DirectoryInfo nodeDirInfo = (DirectoryInfo)newSelected.Tag;
            ListViewItem.ListViewSubItem[] subItems;
            ListViewItem item = null;

            foreach (DirectoryInfo dir in nodeDirInfo.GetDirectories())
            {
                item = new ListViewItem(dir.Name, 0);
                subItems = new ListViewItem.ListViewSubItem[]
                    {new ListViewItem.ListViewSubItem(item, "Directory"), 
                     new ListViewItem.ListViewSubItem(item, 
                        dir.LastAccessTime.ToShortDateString())};
                item.SubItems.AddRange(subItems);
                listView1.Items.Add(item);
            }
            foreach (FileInfo file in nodeDirInfo.GetFiles())
            {
                item = new ListViewItem(file.Name, 1);
                subItems = new ListViewItem.ListViewSubItem[]
                    { new ListViewItem.ListViewSubItem(item, "File"), 
                     new ListViewItem.ListViewSubItem(item, 
                        file.LastAccessTime.ToShortDateString())};

                item.SubItems.AddRange(subItems);
                listView1.Items.Add(item);
            }

            listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);
        }

C# を使用している場合は、NodeMouseClick イベントをそのイベント処理メソッドに関連付けてください。

          this.treeView1.NodeMouseClick += 
                new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);

アプリケーションのテスト

フォームをテストして、期待どおりに動作することを確認します。

フォームをテストするには

F5 キーを押してアプリケーションを実行します。

c:\Documents and Settings というラベルの付いたディレクトリを表示する TreeView コントロールが左側にあり、3 つの列を持つ ListView コントロールが右側にある分割フォームが表示されます。ディレクトリノードを選択して TreeView を走査すると、選択したディレクトリの内容がListView に表示されます。

次の手順

このアプリケーションは、TreeView コントロールと ListView コントロールを一緒に使用する方法の一例です。これらのコントロールの詳細については、次のトピックを参照してください。

参照

次の方法で共有

チュートリアル : デザイナを使用した、ListView コントロールと TreeView コントロールを含むエクスプローラスタイルのインターフェイスの作成

ListView コントロールと TreeView コントロールを含むフォームを作成するには

アプリケーションのテスト

フォームをテストするには

次の手順

参照

処理手順

参照

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル : デザイナを使用した、ListView コントロールと TreeView コントロールを含むエクスプローラ スタイルのインターフェイスの作成

ListView コントロールと TreeView コントロールを含むフォームを作成するには

アプリケーションのテスト

フォームをテストするには

次の手順

参照

処理手順

参照

その他の技術情報

その他のリソース

チュートリアル : デザイナを使用した、ListView コントロールと TreeView コントロールを含むエクスプローラスタイルのインターフェイスの作成