Udostępnij za pośrednictwem

Wskazówki: tworzenie interfejsu w stylu Eksploratora Windows z formantami ListView i TreeView za pomocą narzędzia Projektant

  • Artykuł

Jedną z zalet programu Visual Studio jest możliwość tworzenia profesjonalnych aplikacji Windows Forms w krótkim czasie. Typowym scenariuszem jest utworzenie interfejsu użytkownika z kontrolkami ListView i TreeView przypominającymi funkcję Eksploratora Windows systemów operacyjnych Windows. Eksplorator Windows wyświetla hierarchiczną strukturę plików i folderów na komputerze użytkownika.

Aby utworzyć formularz zawierający kontrolkę ListView i TreeView

  1. W menu Plik wskaż polecenie Nowy, a następnie kliknij pozycję Projekt.

  2. W oknie dialogowym Nowy projekt wykonaj następujące czynności:

    1. W kategoriach wybierz pozycję Visual Basic lub Visual C#.

    2. Na liście szablonów wybierz pozycję Aplikacja formularzy systemu Windows.

  3. Kliknij przycisk OK. Zostanie utworzony nowy projekt Windows Forms.

  4. Dodaj kontrolkę SplitContainer do formularza i ustaw jej Dock właściwość na Fill.

  5. ImageList Dodaj nazwę do imageList1 formularza i użyj okno Właściwości, aby dodać dwa obrazy: obraz folderu i obraz dokumentu w tej kolejności.

  6. Dodaj kontrolkę TreeView o nazwie treeview1 do formularza i umieść ją po lewej stronie kontrolki SplitContainer . W okno Właściwości wykonaj treeView1 następujące czynności:

    1. Ustaw właściwość Dock na Fill.

    2. ImageList Ustaw właściwość naimagelist1.

  7. Dodaj kontrolkę ListView o nazwie listView1 do formularza i umieść ją po prawej stronie kontrolki SplitContainer . W okno Właściwości wykonaj listview1 następujące czynności:

    1. Ustaw właściwość Dock na Fill.

    2. Ustaw właściwość View na Details.

    3. Otwórz Edytor kolekcji ColumnHeader, klikając wielokropek (The Ellipsis button (...) in the Properties window of Visual Studio.) we Columns właściwości**.** Dodaj trzy kolumny i ustaw ich Text właściwość odpowiednio na Name, Typei Last Modified. Kliknij przycisk OK, aby zamknąć okno dialogowe.

    4. SmallImageList Ustaw właściwość naimageList1.

  8. Zaimplementuj kod, aby wypełnić element TreeView węzłami i podwęzłami. Dodaj ten kod do Form1 klasy .

    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. Ponieważ poprzedni kod używa System.IO przestrzeni nazw, dodaj odpowiednią instrukcję using lub import w górnej części formularza.

    using System.IO;

    Imports System.IO

  10. Wywołaj metodę konfiguracji z poprzedniego kroku w konstruktorze formularza lub Load metodzie obsługi zdarzeń. Dodaj ten kod do konstruktora formularza.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. Obsłuż zdarzenie dlatreeview1elementu i zaimplementuj NodeMouseClick kod w celu wypełnienia listview1 zawartością węzła po kliknięciu węzła. Dodaj ten kod do Form1 klasy .

    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

    Jeśli używasz języka C#, upewnij się, że zdarzenie NodeMouseClick jest skojarzone z metodą obsługi zdarzeń. Dodaj ten kod do konstruktora formularza.

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

Testowanie aplikacji

Teraz możesz przetestować formularz, aby upewnić się, że działa zgodnie z oczekiwaniami.

Aby przetestować formularz

  • Naciśnij klawisz F5, aby uruchomić aplikację.

    Zobaczysz formularz podzielony zawierający kontrolkę TreeView , która wyświetla katalog projektu po lewej stronie, oraz kontrolkę po prawej stronie z trzema ListView kolumnami. Możesz przejść przez TreeView wybranie węzłów katalogu i ListView wypełnienie zawartością wybranego katalogu.

Następne kroki

Ta aplikacja przedstawia przykład sposobu, w jaki można używać TreeView i ListView kontrolować razem. Aby uzyskać więcej informacji na temat tych kontrolek, zobacz następujące tematy:

Zobacz też