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

[アーティクル]
01/24/2025

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 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);
    }
}

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

前のコードでは System.IO 名前空間を使用しているため、フォームの先頭に適切な using ステートメントまたは import ステートメントを追加します。
```
using System.IO;
```
```
Imports System.IO
```
前のステップからセットアップメソッドを、フォームのコンストラクターまたはイベント処理メソッドLoadで呼び出します。このコードをフォームコンストラクターに追加します。
```
public Form1()
{
    InitializeComponent();
    PopulateTreeView();
}
```
```
Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub
```

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

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);
}

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

C# を使用している場合は、NodeMouseClick イベントがイベント処理メソッドに関連付けられていることを確認します。このコードをフォームコンストラクターに追加します。

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

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

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

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

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

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

次の手順

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

方法: TreeView コントロールまたは ListView コントロール (Windows フォーム) にカスタム情報を追加する
方法: ListView コントロールに検索機能を追加する
方法: TreeView ノードにショートカットメニューをアタッチする

次の方法で共有

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

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

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

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

次の手順

関連項目

その他のリソース

次の方法で共有

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

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

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

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

次の手順

関連項目

その他のリソース

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