İzlenecek yol: Tasarımcıyı Kullanarak ListView ve TreeView Denetimleri ile Gezgin Stilinde bir Arabirim Oluşturma

Visual Studio avantajlarından biri, profesyonel görünümlü Windows Forms uygulamalarını kısa bir süre içinde oluşturma olanağıdır. yaygın bir senaryo, ile bir kullanıcı arabirimi (uı) ListView ve TreeView Windows işletim sistemlerinin Windows Explorer özelliğine benzer denetimler oluşturmaktır. Windows gezgini, bir kullanıcının bilgisayarındaki dosya ve klasörlerin hiyerarşik yapısını görüntüler.

ListView ve TreeView denetimi içeren formu oluşturmak için

  1. Dosya menüsünde, Yeni' nin üzerine gelin ve Project' ye tıklayın.

  2. Yeni Proje iletişim kutusunda aşağıdakileri yapın:

    1. kategoriler ' de Visual Basic veya Visual C#' yi seçin.

    2. şablon listesinde Windows Forms uygulama' yı seçin.

  3. Tamam'a tıklayın. yeni bir Windows Forms projesi oluşturulur.

  4. Forma bir SplitContainer denetim ekleyin ve Dock özelliğini olarak ayarlayın Fill .

  5. ImageListForma adlandırılmış bir ad ekleyin imageList1 ve iki resim eklemek için Özellikler penceresi kullanın: bir klasör görüntüsü ve bir belge görüntüsü, bu sırada.

  6. TreeViewForma adlı bir denetim ekleyin treeview1 ve denetimin sol tarafında konumlandırın SplitContainer . Özellikler penceresi için treeView1 aşağıdakileri yapın:

    1. DockÖzelliğini olarak ayarlayın Fill .

    2. ImageListÖzelliğini olarak ayarlayınimagelist1.

  7. ListViewForma adlı bir denetim ekleyin listView1 ve denetimin sağ tarafına konumlandırın SplitContainer . Özellikler penceresi için listview1 aşağıdakileri yapın:

    1. DockÖzelliğini olarak ayarlayın Fill .

    2. ViewÖzelliğini olarak ayarlayın Details .

    3. * * Özelliğindeki üç nokta () işaretine tıklayarak ColumnHeader koleksiyon düzenleyicisini açın. * The Ellipsis button (...) in the Properties window of Visual Studio.The Ellipsis button (...) in the Properties window of Visual Studio. * üç sütun ekleyin ve Text özelliğini Name sırasıyla, ve olarak ayarlayın TypeLast Modified . Tamam’a tıklayarak iletişim kutusunu kapatın.

    4. SmallImageListÖzelliğini olarak ayarlayınimageList1.

  8. Node ve alt düğümlere doldurmak için kodu uygulayın TreeView . Bu kodu Form1 sınıfına ekleyin.

    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. Önceki kod System.IO ad alanını kullandığından, formun üst kısmına uygun using veya import ifadesini ekleyin.

    using System.IO;
    
    Imports System.IO
    
  10. Formun Oluşturucusu veya olay işleme yönteminde, önceki adımda bulunan kurulum yöntemini çağırın Load . Form oluşturucusuna bu kodu ekleyin.

    public Form1()
    {
        InitializeComponent();
        PopulateTreeView();
    }
    
    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub
    
    
  11. NodeMouseClickİçin olayını işleyin treeview1NodeMouseClick ve listview1 bir düğüm tıklandığında bir düğümün içeriğiyle doldurmak için kodu uygulayın. Bu kodu Form1 sınıfına ekleyin.

    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# kullanıyorsanız, olay NodeMouseClick işleme yöntemiyle ilişkili olayın bulunduğundan emin olun. Form oluşturucusuna bu kodu ekleyin.

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

Uygulamayı Test Etme

Artık, beklenen şekilde davrandığından emin olmak için formu test edebilirsiniz.

Formu test etmek için

  • Uygulamayı çalıştırmak için F5'e basın.

    TreeViewSol tarafta proje dizininizi görüntüleyen bir denetim içeren bir bölünmüş form ve ListView sağ tarafta üç sütunlu bir denetim görürsünüz. TreeViewDizin düğümlerini seçerek ve ListView Seçilen dizinin içeriğiyle doldurulmuş olarak gezinerek çapraz geçiş yapabilirsiniz.

Sonraki Adımlar

Bu uygulama, size birlikte kullanabileceğiniz ve denetimleri kullanabileceğiniz bir yönteme örnek TreeView verir ListView . Bu denetimler hakkında daha fazla bilgi için aşağıdaki konulara bakın:

Ayrıca bkz.