Sdílet prostřednictvím

Návod: Vytvoření rozhraní stylu průzkumníka pomocí ovládacích prvků ListView a TreeView pomocí Návrháře

  • Článek

Jednou z výhod sady Visual Studio je možnost vytvářet profesionálně vypadající aplikace Modelu Windows Forms za krátkou dobu. Běžným scénářem je vytvoření uživatelského rozhraní s ovládacími prvky ListView a TreeView, které se podobají funkci Průzkumníka Windows operačních systémů Windows. Průzkumník Windows zobrazuje hierarchickou strukturu souborů a složek na počítači uživatele.

Vytvoření formuláře obsahujícího ovládací prvek ListView a TreeView

  1. V nabídce Soubor přejděte na Novýa potom klikněte na Projekt.

  2. V dialogovém okně Nový projekt postupujte takto:

    1. V kategoriích zvolte buď Visual Basic nebo Visual C#.

    2. V seznamu šablon zvolte aplikace Windows Forms .

  3. Klepněte na tlačítko OK. Vytvoří se nový projekt Windows Forms.

  4. Přidejte do formuláře ovládací prvek SplitContainer a nastavte jeho vlastnost Dock na Fill.

  5. Do formuláře přidejte ImageList pojmenovanou imageList1 a pomocí okna Vlastnosti přidejte dva obrázky: obrázek složky a obrázek dokumentu v daném pořadí.

  6. Přidejte do formuláře TreeView ovládací prvek s názvem treeview1 a umístěte ho na levou stranu ovládacího prvku SplitContainer. V okně Vlastnosti pro treeView1 postupujte takto:

    1. Nastavte vlastnost Dock na Fill.

    2. Nastavte vlastnost ImageList na imagelist1.

  7. Přidejte do formuláře ListView ovládací prvek s názvem listView1 a umístěte ho na pravou stranu ovládacího prvku SplitContainer. V okně Vlastnosti pro listview1 postupujte takto:

    1. Nastavte vlastnost Dock na Fill.

    2. Nastavte vlastnost View na Details.

    3. Otevřete Editor kolekce ColumnHeader kliknutím na tři tečky (tlačítko se třemi tečkami (...) v okně Vlastnosti sady Visual Studio.) ve vlastnosti Columns*.** Přidejte tři sloupce a nastavte jejich Text vlastnost na Name, Typea Last Modified. Kliknutím na tlačítko OK dialogové okno zavřete.

    4. Nastavte vlastnost SmallImageList na imageList1.

  8. Implementujte kód pro naplnění TreeView uzly a poduzly. Přidejte tento kód do třídy 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. Vzhledem k tomu, že předchozí kód používá obor názvů System.IO, přidejte odpovídající příkaz using nebo import v horní části formuláře.

    using System.IO;

    Imports System.IO

  10. Zavolejte metodu nastavení z předchozího kroku v konstruktoru formuláře nebo v metodě pro zpracování událostí Load. Přidejte tento kód do konstruktoru formuláře.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. Zpracujte NodeMouseClick událost pro treeview1, a implementujte kód pro naplnění listview1 obsahem uzlu při kliknutí na uzel. Přidejte tento kód do třídy 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

    Pokud používáte jazyk C#, ujistěte se, že máte událost NodeMouseClick přidruženou k metodě zpracování událostí. Přidejte tento kód do konstruktoru formuláře.

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

Testování aplikace

Formulář teď můžete otestovat a ujistit se, že se chová podle očekávání.

Otestování formuláře

  • Stisknutím klávesy F5 spusťte aplikaci.

    Zobrazí se rozdělený formulář obsahující ovládací prvek TreeView, který zobrazuje adresář projektu na levé straně a ListView ovládací prvek na pravé straně se třemi sloupci. Můžete procházet TreeView výběrem uzlů adresáře a ListView se naplní obsahem vybraného adresáře.

Další kroky

Tato aplikace poskytuje příklad způsobu, jak společně používat ovládací prvky TreeView a ListView. Další informace o těchto ovládacích prvcích najdete v následujících tématech:

Viz také