Nasıl yapılır: Windows Forms'da Çok Bölmeli Kullanıcı Arabirimi Oluşturma

Aşağıdaki yordamda, Klasör listesi, İletiler bölmesi ve Önizleme bölmesi ile Microsoft Outlook'da kullanılana benzer çok bölmeli bir kullanıcı arabirimi oluşturabilirsiniz. Bu düzenleme, formla denetimler yerleştirerek elde edilir.

Bir denetimi sabitlerken, bir denetimin hangi uçta olduğunu belirlersiniz. Bu nedenle, özelliğini olarak ayarsanız denetimin sağ kenarı, üst denetimin Dock Right sağ kenarına yerleştirildi. Buna ek olarak, denetimin bağlı kenarı kapsayıcı denetimine göre yeniden boyutlandırılır. Özelliğin nasıl çalıştığını hakkında daha Dock fazla bilgi için bkz. Nasıl 2014' Windows.

Bu yordam, uygulamayı Microsoft Outlook'a taklit etmek için işlevsellik eklemeye değil, formda ve diğer SplitContainer denetimlerin düzenlenmesine Outlook.

Bu kullanıcı arabirimini oluşturmak için tüm denetimleri sol panelde bir denetim içeren SplitContainer TreeView bir denetime eklersiniz. Denetimin sağ paneli, SplitContainer denetimin üzerinde denetimi SplitContainer olan ikinci bir denetim ListView RichTextBox içerir. Bu SplitContainer denetimler, formda diğer denetimlerin bağımsız olarak yeniden boyutlandırmaya olanak sağlar. Kendi özel kullanıcı arabirimlerinizi oluşturmak için bu yordamda yer alan teknikleri uyarabilirsiniz.

Program aracılığıyla Outlook stilinde bir kullanıcı arabirimi oluşturmak için

  1. Bir formda, kullanıcı arabiriminizi oluşturan her denetimi bildirebilirsiniz. Bu örnekte, Microsoft Outlook kullanıcı arabirimini taklit TreeView etmek için , , ve ListView SplitContainer RichTextBox denetimlerini kullanın.

    Private WithEvents treeView1 As System.Windows.Forms.TreeView  
    Private WithEvents listView1 As System.Windows.Forms.ListView  
    Private WithEvents richTextBox1 As System.Windows.Forms.RichTextBox  
    Private WithEvents splitContainer1 As _  
        System.Windows.Forms.SplitContainer  
    Private WithEvents splitContainer2 As _  
        System.Windows.Forms.SplitContainer  
    
    private System.Windows.Forms.TreeView treeView1;  
    private System.Windows.Forms.ListView listView1;  
    private System.Windows.Forms.RichTextBox richTextBox1;  
    private System.Windows.Forms. SplitContainer splitContainer2;  
    private System.Windows.Forms. SplitContainer splitContainer1;  
    
  2. Kullanıcı arabiriminizi tanımlayan bir yordam oluşturun. Aşağıdaki kod, formun Microsoft Outlook'daki kullanıcı arabirimine benzeyecek şekilde Outlook. Ancak, diğer denetimleri kullanarak veya farklı yerleştirerek, aynı derecede esnek olan diğer kullanıcı arabirimlerini oluşturmak da aynı derecede kolaydır.

    Public Sub CreateOutlookUI()  
        ' Create an instance of each control being used.  
        Me.components = New System.ComponentModel.Container()  
        Me.treeView1 = New System.Windows.Forms.TreeView()  
        Me.listView1 = New System.Windows.Forms.ListView()  
        Me.richTextBox1 = New System.Windows.Forms.RichTextBox()  
        Me.splitContainer1 = New System.Windows.Forms.SplitContainer()  
        Me.splitContainer2= New System.Windows.Forms. SplitContainer()  
    
        ' Should you develop this into a working application,  
        ' use the AddHandler method to hook up event procedures here.  
    
        ' Set properties of TreeView control.  
        ' Use the With statement to avoid repetitive code.  
        With Me.treeView1  
            .Dock = System.Windows.Forms.DockStyle.Fill  
            .TabIndex = 0  
            .Nodes.Add("treeView")  
        End With  
    
    ' Set properties of ListView control.  
       With Me.listView1  
          .Dock = System.Windows.Forms.DockStyle.Top  
          .TabIndex = 2  
          .Items.Add("listView")  
       End With  
    
    ' Set properties of RichTextBox control.  
       With Me.richTextBox1  
          .Dock = System.Windows.Forms.DockStyle.Fill  
          .TabIndex = 3  
          .Text = "richTextBox1"  
       End With  
    
        ' Set properties of the first SplitContainer control.  
        With Me.splitContainer1  
            .Dock = System.Windows.Forms.DockStyle.Fill  
            .TabIndex = 1  
            .SplitterWidth = 4  
            .SplitterDistance = 150  
            .Orientation = Orientation.Horizontal  
            .Panel1.Controls.Add(Me.listView1)  
            .Panel2.Controls.Add(Me.richTextBox1)  
    End With  
    
        ' Set properties of the second SplitContainer control.  
        With Me.splitContainer2  
            .Dock = System.Windows.Forms.DockStyle.Fill  
            .TabIndex = 4  
            .SplitterWidth = 4  
            .SplitterDistance = 100  
            .Panel1.Controls.Add(Me.treeView1)  
            .Panel2.Controls.Add(Me.SplitContainer1)  
    End With  
    
    ' Add the main SplitContainer control to the form.  
        Me.Controls.Add(Me.splitContainer2)  
        Me.Text = "Intricate UI Example"  
    End Sub  
    
    public void createOutlookUI()  
    {  
        // Create an instance of each control being used.  
        treeView1 = new System.Windows.Forms.TreeView();  
        listView1 = new System.Windows.Forms.ListView();  
        richTextBox1 = new System.Windows.Forms.RichTextBox();  
        splitContainer2 = new System.Windows.Forms.SplitContainer();  
        splitContainer1 = new System.Windows.Forms.SplitContainer();  
    
        // Insert code here to hook up event methods.  
    
        // Set properties of TreeView control.  
        treeView1.Dock = System.Windows.Forms.DockStyle.Fill;  
        treeView1.TabIndex = 0;  
        treeView1.Nodes.Add("treeView");  
    
        // Set properties of ListView control.  
        listView1.Dock = System.Windows.Forms.DockStyle.Top;  
        listView1.TabIndex = 2;  
        listView1.Items.Add("listView");  
    
        // Set properties of RichTextBox control.  
        richTextBox1.Dock = System.Windows.Forms.DockStyle.Fill;  
        richTextBox1.TabIndex = 3;  
        richTextBox1.Text = "richTextBox1";  
    
        // Set properties of first SplitContainer control.  
        splitContainer1.Dock = System.Windows.Forms.DockStyle.Fill;  
        splitContainer2.TabIndex = 1;  
        splitContainer2.SplitterWidth = 4;  
        splitContainer2.SplitterDistance = 150;  
        splitContainer2.Orientation = Orientation.Horizontal;  
        splitContainer2.Panel1.Controls.Add(this.listView1);  
        splitContainer2.Panel1.Controls.Add(this.richTextBox1);  
    
        // Set properties of second SplitContainer control.  
        splitContainer2.Dock = System.Windows.Forms.DockStyle.Fill;  
        splitContainer2.TabIndex = 4;  
        splitContainer2.SplitterWidth = 4;  
        splitContainer2.SplitterDistance = 100;  
        splitContainer2.Panel1.Controls.Add(this.treeView1);  
        splitContainer2.Panel1.Controls.Add(this.splitContainer1);  
    
        // Add the main SplitContainer control to the form.  
        this.Controls.Add(this.splitContainer2);  
        this.Text = "Intricate UI Example";  
    }  
    
  3. Bu Visual Basic, yordamda yeni oluşturduğunuz yordama bir çağrı New() ekleyin. Visual C# içinde, bu kod satırı form sınıfının oluşturucusu ekleyin.

    ' Add this to the New procedure.  
    CreateOutlookUI()  
    
    // Add this to the form class's constructor.  
    createOutlookUI();  
    

Ayrıca bkz.