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

[アーティクル]
08/09/2011

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

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

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 にノードとサブノードを設定するコードを実装します。 Form1 クラスに次のコードを追加します。

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("../..")
    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(@"../..");
            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 に設定するコードを実装します。 Form1 クラスに次のコードを追加します。

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 キーを押してアプリケーションを実行します。

プロジェクトディレクトリを表示する TreeView コントロールが左側にあり、3 つの列が含まれた ListView コントロールが右側にある分割フォームが表示されます。ディレクトリノードを選択して TreeView を走査すると、選択したディレクトリの内容が ListView に表示されます。

次の手順

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

参照

次の方法で共有

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

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

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

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

次の手順

参照

処理手順

参照

その他の技術情報

その他のリソース

次の方法で共有

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

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

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

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

次の手順

参照

処理手順

参照

その他の技術情報

その他のリソース

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