次の方法で共有

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

  • [アーティクル]

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

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

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

  2. [新しいプロジェクト] ダイアログ ボックスで、次の操作を行います。

    1. カテゴリで、 [Visual Basic] または [Visual C#] のいずれかを選択します。

    2. テンプレートの一覧で、 [Windows フォーム アプリケーション] を選択します。

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

  4. フォームに SplitContainer コントロールを追加し、その Dock プロパティを Fill に設定します。

  5. imageList1 という名前の ImageList をフォームに追加し、プロパティ ウィンドウを使用して、フォルダー画像とドキュメント画像の順に 2 つの画像を追加します。

  6. treeview1 という名前の TreeView コントロールをフォームに追加し、SplitContainer コントロールの左側に配置します。 treeView1 のプロパティ ウィンドウで、次の操作を行います。

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

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

  7. listView1 という名前の ListView コントロールをフォームに追加し、SplitContainer コントロールの右側に配置します。 listview1 のプロパティ ウィンドウで、次の操作を行います。

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

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

    3. Columns プロパティの省略記号 (The Ellipsis button (...) in the Properties window of Visual Studio.) をクリックして、ColumnHeader コレクション エディターを開きます**。** 3 つの列を追加し、それらの Text プロパティをそれぞれ Name、Type、および Last Modified に設定します。 [OK] をクリックしてダイアログ ボックスを閉じます。

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

  8. 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

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

    using System.IO;

    Imports System.IO

  10. フォームのコンストラクターの前の手順にある設定メソッド、または Load イベント処理メソッドを呼び出します。 このコードをフォーム コンストラクターに追加します。

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. 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 コントロールを一緒に使用する方法の例を示しています。 これらのコントロールの詳細については、次のトピックを参照してください。

関連項目