How to: Create a Multipane User Interface with Windows Forms

In the following procedure, you will create a multipane user interface that is similar to the one used in Microsoft Outlook, with a Folder list, a Messages pane, and a Preview pane. This arrangement is achieved chiefly through docking controls with the form.

When you dock a control, you determine which edge of the parent container a control is fastened to. Thus, if you set the Dock property to Right, the right edge of the control will be docked to the right edge of its parent control. Additionally, the docked edge of the control is resized to match that of its container control. For more information about how the Dock property works, see How to: Dock Controls on Windows Forms.

This procedure focuses on arranging the SplitContainer and the other controls on the form, not on adding functionality to make the application mimic Microsoft Outlook.

To create this user interface, you place all the controls within a SplitContainer control, which contains a TreeView control in the left-hand panel. The right-hand panel of the SplitContainer control contains a second SplitContainer control with a ListView control above a RichTextBox control. These SplitContainer controls enable independent resizing of the other controls on the form. You can adapt the techniques in this procedure to craft custom user interfaces of your own.

To create an Outlook-style user interface programmatically

1. Within a form, declare each control that comprises your user interface. For this example, use the TreeView, ListView, SplitContainer, and RichTextBox controls to mimic the Microsoft Outlook user interface.

   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;
   

   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. Create a procedure that defines your user interface. The following code sets the properties so that the form will resemble the user interface in Microsoft Outlook. However, by using other controls or docking them differently, it is just as easy to create other user interfaces that are equally flexible.

   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.Fil1;
       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.Fil1;
       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";
   }
   

   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.set_Dock(System.Windows.Forms.DockStyle.Fill);
   treeView1.set_TabIndex(0);
   treeView1.get_Nodes().Add("treeView");
   
   // Set properties of ListView control.
   listView1.set_Dock(System.Windows.Forms.DockStyle.Top);
   listView1.set_TabIndex(2);
   listView1.get_Items().Add("listView");
   
   // Set properties of RichTextBox control.
   richTextBox1.set_Dock(System.Windows.Forms.DockStyle.Fill);
   richTextBox1.set_TabIndex(3);
   richTextBox1.set_Text("richTextBox1");
   
   // Set properties of first SplitContainer control.
   splitContainer1.set_Dock(System.Windows.Forms.DockStyle.Fill);
   splitContainer2.set_TabIndex(1);
   splitContainer2.set_SplitterWidth(4);
   splitContainer2.set_SplitterDistance(150);
   splitContainer2.set_Orientation(Orientation.Horizontal);
   splitContainer2.get_Panel1().get_Controls().Add(this.listView1);
   splitContainer2.get_Panel1().get_Controls().Add(this.richTextBox1);
   
   // Set properties of second SplitContainer control.
   splitContainer2.set_Dock(System.Windows.Forms.DockStyle.Fill);
   splitContainer2.set_TabIndex(4);
   splitContainer2.set_SplitterWidth(4);
   splitContainer2.set_SplitterDistance(100);
   splitContainer2.get_Panel1().get_Controls().Add(this.treeView1);
   splitContainer2.get_Panel1().get_Controls().Add(this.splitContainer1);
   
   // Add the main SplitContainer control to the form.
   this.get_Controls().Add(this.splitContainer2);
   this.set_Text("Intricate UI Example");
   }
   

3. In Visual Basic, add a call to the procedure you just created in the New() procedure. In Visual C#, add this line of code to the constructor for the form class.

   ' Add this to the New procedure.
   CreateOutlookUI()
   

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

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

See Also

Tasks

SplitContainer Control Sample

Reference

SplitContainer

Other Resources

SplitContainer Control (Windows Forms)