チュートリアル: デザイナーを使用した、ListView コントロールと TreeView コントロールを含むエクスプローラー スタイルのインターフェイスの作成Walkthrough: Creating an Explorer Style Interface with the ListView and TreeView Controls Using the Designer

Visual Studio の利点の1つは、プロフェッショナルな外観の Windows フォームアプリケーションを短時間で作成できることです。One of the benefits of Visual Studio is the ability to create professional-looking Windows Forms applications in a short of amount of time. 一般的なシナリオでは、 ListView TreeView windows オペレーティングシステムの windows エクスプローラー機能に似たコントロールとコントロールを使用して、ユーザーインターフェイス (UI) を作成します。A common scenario is creating a user interface (UI) with ListView and TreeView controls that resembles the Windows Explorer feature of Windows operating systems. エクスプローラーには、ユーザーのコンピューター上のファイルとフォルダーの階層構造が表示されます。Windows Explorer displays a hierarchical structure of the files and folders on a user's computer.

ListView コントロールと TreeView コントロールを含むフォームを作成するにはTo create the form containing a ListView and TreeView control

  1. [ファイル] メニューの [新規作成] をポイントし、 [プロジェクト] をクリックします。On the File menu, point to New, and then click Project.

  2. [新しいプロジェクト] ダイアログ ボックスで、次の操作を行います。In the New Project dialog box, do the following:

    1. [カテゴリ] で、[ Visual Basic ] または [ Visual C#] を選択します。In the categories, choose either Visual Basic or Visual C#.

    2. テンプレートの一覧で、[ Windows フォームアプリケーション] を選択します。In the list of templates, choose Windows Forms Application.

  3. [OK] をクリックします。Click OK. 新しい Windows フォームプロジェクトが作成されます。A new Windows Forms project is created.

  4. SplitContainerフォームにコントロールを追加し、その Dock プロパティをに設定し Fill ます。Add a SplitContainer control to the form and set its Dock property to Fill.

  5. ImageListという名前 imageList1 のをフォームに追加し、プロパティウィンドウを使用して2つのイメージ (フォルダーイメージとドキュメントイメージ) をこの順序で追加します。Add an ImageList named imageList1 to the form and use the Properties window to add two images: a folder image and a document image, in that order.

  6. TreeViewという名前のコントロールを treeview1 フォームに追加し、コントロールの左側に配置し SplitContainer ます。Add a TreeView control named treeview1 to the form, and position it on the left side of the SplitContainer control. のプロパティウィンドウで、 treeView1 次の操作を行います。In the Properties window for treeView1 do the following:

    1. Dock プロパティを Fillに設定します。Set the Dock property to Fill.

    2. ImageList プロパティを imagelist1. に設定します。Set the ImageList property to imagelist1.

  7. ListViewという名前のコントロールを listView1 フォームに追加し、コントロールの右側に配置し SplitContainer ます。Add a ListView control named listView1 to the form, and position it on the right side of the SplitContainer control. のプロパティウィンドウで、 listview1 次の操作を行います。In the Properties window for listview1 do the following:

    1. Dock プロパティを Fill に設定します。Set the Dock property to Fill.

    2. View プロパティを Details に設定します。Set the View property to Details.

    3. [] プロパティの省略記号 (  省略記号ボタン ([...] プロパティウィンドウ) をクリックして、ColumnHeader コレクションエディターを Columns 開きますOpen the ColumnHeader Collection Editor by clicking the ellipses (The Ellipsis button (...) in the Properties window of Visual Studio.) in the Columns property . 3つの列を追加し、 Text それぞれのプロパティを、、およびにそれぞれ設定し Name Type Last Modified ます。Add three columns and set their Text property to Name, Type, and Last Modified, respectively. [OK] をクリックしてダイアログ ボックスを閉じます。Click OK to close the dialog box.

    4. SmallImageList プロパティを imageList1. に設定します。Set the SmallImageList property to imageList1.

  8. ノードとサブノードをに設定するコードを実装し TreeView ます。Implement the code to populate the TreeView with nodes and subnodes. Form1 クラスに次のコードを追加します。Add this code to the Form1 class.

    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
    
    
  9. 前のコードでは System.IO 名前空間を使用しているため、フォームの先頭に適切な using ステートメントまたは import ステートメントを追加します。Since the previous code uses the System.IO namespace, add the appropriate using or import statement at the top of the form.

    using System.IO;
    
    Imports System.IO
    
  10. フォームのコンストラクターまたはイベント処理メソッドで、前の手順の設定メソッドを呼び出し Load ます。Call the set-up method from the previous step in the form's constructor or Load event-handling method. このコードをフォームコンストラクターに追加します。Add this code to the form constructor.

    public Form1()
    {
        InitializeComponent();
        PopulateTreeView();
    }
    
    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub
    
    
  11. NodeMouseClickのイベントを処理 treeview1 し、 listview1 ノードがクリックされたときにノードの内容を設定するコードを実装します。Handle the NodeMouseClick event for treeview1, and implement the code to populate listview1 with a node's contents when a node is clicked. Form1 クラスに次のコードを追加します。Add this code to the Form1 class.

    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 処理メソッドにイベントが関連付けられていることを確認してください。If you are using C#, make sure you have the NodeMouseClick event associated with its event-handling method. このコードをフォームコンストラクターに追加します。Add this code to the form constructor.

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

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

フォームをテストして、期待どおりに動作することを確認します。You can now test the form to make sure it behaves as expected.

フォームをテストするにはTo test the form

  • F5 キーを押してアプリケーションを実行します。Press F5 to run the application.

    TreeView左側にプロジェクトディレクトリを表示するコントロールと、右側に3つの列があるコントロールを含む分割フォームが表示され ListView ます。You will see a split form containing a TreeView control that displays your project directory on the left side, and a ListView control on the right side with three columns. を走査するには、 TreeView ディレクトリノードを選択し ListView ます。には、選択したディレクトリの内容が設定されます。You can traverse the TreeView by selecting directory nodes, and the ListView is populated with the contents of the selected directory.

次の手順Next Steps

このアプリケーションでは、を使用して制御する方法の例を示し TreeViewListView います。This application gives you an example of a way you can use TreeView and ListView controls together. これらのコントロールの詳細については、次のトピックを参照してください。For more information on these controls, see the following topics:

関連項目See also