Aracılığıyla paylaş

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

  • Makale

Visual Studio'nun avantajlarından biri, kısa bir süre içinde profesyonel görünümlü Windows Forms uygulamaları oluşturabilmektir. Yaygın bir senaryo, windows işletim sistemlerinin Windows Gezgini özelliğine benzeyen ve TreeView denetimleriyle ListView bir kullanıcı arabirimi (UI) 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 Proje'ye tıklayın.

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

    1. Kategorilerde Visual Basic veya Visual C# öğesini seçin.

    2. Şablon listesinde Windows Forms Uygulaması'nı seçin.

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

  4. Forma bir SplitContainer denetim ekleyin ve özelliğini olarak FillayarlayınDock.

  5. Forma adlı bir ImageList ad imageList1 ekleyin ve Özellikler penceresi kullanarak iki resim ekleyin: bir klasör görüntüsü ve bir belge görüntüsü, bu sırayla.

  6. Forma adlı treeview1 bir TreeView denetim ekleyin ve denetimin sol tarafına SplitContainer yerleştirin. Özellikler penceresi treeView1 aşağıdakileri yapın:

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

    2. özelliğini şu şekilde ayarlayın:ImageListimagelist1.

  7. Forma adlı listView1 bir ListView denetim ekleyin ve denetimin sağ tarafına SplitContainer yerleştirin. Özellikler penceresi listview1 aşağıdakileri yapın:

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

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

    3. Özelliğindeki üç noktaya (The Ellipsis button (...) in the Properties window of Visual Studio.) tıklayarak ColumnHeader Koleksiyon Düzenleyicisi'ni Columns açın**.** Üç sütun ekleyin ve bunların Text özelliğini Namesırasıyla , Typeve Last Modifiedolarak ayarlayın. Tamam’a tıklayarak iletişim kutusunu kapatın.

    4. özelliğini şu şekilde ayarlayın:SmallImageListimageList1.

  8. düğümleri ve alt düğümleri ile doldurmak TreeView için kodu uygulayın. Bu kodu sınıfına Form1 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 en üstüne uygun using veya import deyimini ekleyin.

    using System.IO;

    Imports System.IO

  10. Formun oluşturucusunda veya Load olay işleme yönteminde önceki adımda yer alan set-up yöntemini çağırın. Bu kodu form oluşturucusunun içine ekleyin.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. olayınıtreeview1işleyin NodeMouseClick ve bir düğüme tıklandığında düğümün içeriğiyle doldurulacak listview1 kodu uygulayın. Bu kodu sınıfına Form1 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ı olay işleme yöntemiyle ilişkilendirdiğinizden NodeMouseClick emin olun. Bu kodu form oluşturucusunun içine ekleyin.

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

Uygulamayı Test Etme

Artık formu test edebilir ve beklendiği gibi davrandığından emin olabilirsiniz.

Formu test etmek için

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

    Proje dizininizi sol tarafta görüntüleyen bir TreeView denetim ve sağ tarafta üç sütunlu bir denetim içeren bölünmüş bir ListView form görürsünüz. dizin düğümlerini TreeView seçerek arasında geçiş yapabilirsiniz ve ListView içindekiler seçili dizinin içeriğiyle doldurulur.

Sonraki Adımlar

Bu uygulama, birlikte kullanabileceğiniz TreeView ve ListView denetleyebileceğiniz bir yol örneği sunar. Bu denetimler hakkında daha fazla bilgi için aşağıdaki konulara bakın:

Ayrıca bkz.