Export (0) Print
Expand All

Walkthrough: Creating a Multipane User Interface with Windows Forms

Visual Studio .NET 2003

The Windows Forms Splitter control provides a simple way to resize an intricate user interface. By setting the Dock property and the z-order (location of controls on the form's z-axis) of the controls, you can craft an easy-to-use and intuitive user interface.

Note   You can also manipulate the z-order of controls by right-clicking and choosing either BringToFront or SendToBack. For more information about the z-order of controls on Windows Forms, see Layering Objects on Windows Forms.
Additionally, it is advisable, when docking controls within a scrollable control, to add a child scrollable control such as the Panel control to contain any other controls that might require scrolling. The child Panel control should be added to the scrollable control, its Dock property set to DockStyle.Fill, and its AutoScroll property set to true. The AutoScroll property of the parent scrollable control should be set to false.

This example creates a multipane user interface that is similar to the one used in Microsoft Outlook. The example concentrates on techniques for arranging the Splitter and the other controls on the form, not on adding functionality to make the application useful for a specific purpose. It features a TreeView control docked to the left side of the form. The right side of the form contains a Panel control with a ListView control above a RichTextBox control. The user interface is managed by two splitter controls, which allow independent resizing of the other controls. The TreeView and ListView controls are for displaying data, while the Panel control maintains the correct resizing behavior. You can adapt the techniques in this procedure to craft custom user interfaces of your own.

To create an Outlook-style user interface at design time

  1. Create a new Windows Application project. For details, see Creating a Windows Application Project.
  2. Drag a TreeView control from the Toolbox to the form. In the Properties window, set the Dock property to Left by clicking the left hand pane in the value editor shown when the down arrow is clicked.
  3. Drag a Splitter control from the Toolbox to the form. It will automatically dock to the right edge of the TreeView control.
  4. Drag a Panel control from the Toolbox to the form. In the Properties window, set the Dock property to Fill by clicking the middle pane in the value editor shown when the down arrow is clicked. The panel will fill the right side of the form entirely.
  5. Drag a ListView control from the Toolbox onto the Panel control you added to your form. Set the Dock property of the ListView control to Top.
  6. Drag a Splitter control from the Toolbox onto the Panel control you added to your form. In the Properties window, set the Dock property to Top by clicking the top pane in the value editor shown when the down arrow is clicked. This will dock it to the bottom of the ListView control.
  7. Drag a RichTextBox control from the Toolbox onto the Panel control. Set the Dock property of the RichTextBox control to Fill.
  8. Press F5 to run the application.

    The form displays a three-part user interface, similar to that of Microsoft Outlook. Note that when you drag the mouse over either of the Splitter controls, you can resize the windows.

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, Panel, Splitter, and RichTextBox controls to mimic the Microsoft Outlook user interface.
    ' Visual Basic
    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 splitter2 As System.Windows.Forms.Splitter
    Private WithEvents splitter1 As System.Windows.Forms.Splitter
    Private WithEvents panel1 As System.Windows.Forms.Panel
    
    // C#
    private System.Windows.Forms.TreeView treeView1;
    private System.Windows.Forms.ListView listView1;
    private System.Windows.Forms.RichTextBox richTextBox1;
    private System.Windows.Forms.Splitter splitter2;
    private System.Windows.Forms.Splitter splitter1;
    private System.Windows.Forms.Panel panel1;
    
    // C++
    private: System::Windows::Forms::TreeView *  treeView1;
    private: System::Windows::Forms::ListView *  listView1;
    private: System::Windows::Forms::RichTextBox *  richTextBox1;
    private: System::Windows::Forms::Splitter *  splitter2;
    private: System::Windows::Forms::Splitter *  splitter1;
    private: System::Windows::Forms::Panel *  panel1;
    
  2. Create a procedure that defines your user interface. The code below sets the properties such 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.
    ' Visual Basic
    Public Sub OutlookUI()
       ' 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.splitter2 = New System.Windows.Forms.Splitter()
       Me.splitter1 = New System.Windows.Forms.Splitter()
       Me.panel1 = New System.Windows.Forms.Panel()
    
       ' 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.Left
          ' Use the relative size to accommodate the possibility of
          ' different units.
          ' Length is irrelevant if you have docked the control to Left.
          .Width = Me.ClientSize.Width \ 3
          .TabIndex = 0
          .Nodes.Add("treeView")
       End With
    
       ' Set properties of ListView control.
       With Me.listView1
          .Dock = System.Windows.Forms.DockStyle.Top
          ' Width is irrelevant when the control is docked to Top.
          .Height = Me.ClientSize.Height * 2 \ 3
          .TabIndex = 0
          .Items.Add("listView")
       End With
    
       ' Set properties of RichTextBox control.
       With Me.richTextBox1
          .Dock = System.Windows.Forms.DockStyle.Fill
          ' The order of the controls in this call is critical.
          ' Width and length are irrelevant when control is docked to Fill.
          .TabIndex = 2
          .Text = "richTextBox1"
       End With
    
       ' Set properties of Panel's Splitter control.
       With Me.splitter2
          .Dock = System.Windows.Forms.DockStyle.Top
          ' Width is irrelevant if splitter is docked to Top.
          .Height = 3
          .TabIndex = 1
          ' Color the splitters to tell them apart.
          .BackColor = Color.Blue
          ' Set TabStop to false for ease of use when negotiating
          ' the user interface.
          .TabStop = False
       End With
    
       ' Set properties of Form's Splitter control.
       With Me.splitter1
          .Location = New System.Drawing.Point(121, 0)
          .Width = 3
          ' Color the splitters to tell them apart.
          .BackColor = Color.Red
          .TabIndex = 1
          ' Set TabStop to false for ease of use when negotiating
          ' the user interface.
          .TabStop = False
       End With
    
       With panel1
          ' Add the appropriate controls to the Panel.
          ' The order of the controls in this call is critical.
          .Controls.AddRange(New System.Windows.Forms.Control() _
             {Me.richTextBox1, Me.splitter2, Me.listView1})
    
          ' Set properties of Panel control.
          .Dock = System.Windows.Forms.DockStyle.Fill
          .TabIndex = 2
       End With
    
       ' Add the rest of the controls to the form.
       ' The order of the controls in this call is critical.
       Me.Controls.AddRange(New System.Windows.Forms.Control() _
          {Me.panel1, Me.splitter1, Me.treeView1})
       Me.Text = "Intricate UI Example"
    End Sub
    
    // C#
    public void OutlookUI()
    {
       // Create an instance of each control being used.
       this.treeView1 = new System.Windows.Forms.TreeView();
       this.listView1 = new System.Windows.Forms.ListView();
       this.richTextBox1 = new System.Windows.Forms.RichTextBox();
       this.splitter2 = new System.Windows.Forms.Splitter();
       this.splitter1 = new System.Windows.Forms.Splitter();
       this.panel1 = new System.Windows.Forms.Panel();
       // Insert code here to hook up event methods.
    
       // Set properties of TreeView control.
       this.treeView1.Dock = System.Windows.Forms.DockStyle.Left;
       this.treeView1.Width = this.ClientSize.Width / 3;
       this.treeView1.TabIndex = 0;
       this.treeView1.Nodes.Add("treeView");
    
       // Set properties of ListView control.
       this.listView1.Dock = System.Windows.Forms.DockStyle.Top;
       this.listView1.Height = this.ClientSize.Height * 2 / 3;
       this.listView1.TabIndex = 0;
       this.listView1.Items.Add("listView");
    
       // Set properties of RichTextBox control.
       this.richTextBox1.Dock = System.Windows.Forms.DockStyle.Fill;
       this.richTextBox1.TabIndex = 2;
       this.richTextBox1.Text = "richTextBox1";
    
       // Set properties of Panel's Splitter control.
       this.splitter2.Dock = System.Windows.Forms.DockStyle.Top;
       // Width is irrelevant if splitter is docked to Top.
       this.splitter2.Height = 3;
       // Use a different color to distinguish the two splitters.
       this.splitter2.BackColor = Color.Blue;
       this.splitter2.TabIndex = 1;
       // Set TabStop to false for ease of use when negotiating
       // the user interface.
       this.splitter2.TabStop = false;
    
       // Set properties of Form's Splitter control.
       this.splitter1.Location = new System.Drawing.Point(121, 0);
       this.splitter1.Size = new System.Drawing.Size(3, 273);
       this.splitter1.BackColor = Color.Red;
       this.splitter1.TabIndex = 1;
       // Set TabStop to false for ease of use when negotiating
       // the user interface.
       this.splitter1.TabStop = false;
    
       // Add the appropriate controls to the Panel.
       // The order of the controls in this call is critical.
       this.panel1.Controls.AddRange(new System.Windows.Forms.Control[]
          {richTextBox1, splitter2, listView1});
    
       // Set properties of Panel control.
       this.panel1.Dock = System.Windows.Forms.DockStyle.Fill;
       this.panel1.TabIndex = 2;
    
       // Add the rest of the controls to the form.
       // The order of the controls in this call is critical.
       this.Controls.AddRange(new System.Windows.Forms.Control[]
          {panel1, splitter1, treeView1});
       this.Text = "Intricate UI Example";
    }
    
    // C++
    public: void OutlookUI()
    {
       // Create an instance of each control being used.
       this->treeView1 = new System::Windows::Forms::TreeView();
       this->splitter1 = new System::Windows::Forms::Splitter();
       this->panel1 = new System::Windows::Forms::Panel();
       this->listView1 = new System::Windows::Forms::ListView();
       this->splitter2 = new System::Windows::Forms::Splitter();
       this->richTextBox1 = new System::Windows::Forms::RichTextBox();
    
       // Set properties of TreeView control.
       this->treeView1->Dock = System::Windows::Forms::DockStyle::Left;
       this->treeView1->Width = this->ClientSize.Width / 3;
       this->treeView1->TabIndex = 0;
       this->treeView1->Nodes->Add("treeView");
    
       // Set properties of ListView control.
       this->listView1->Dock = System::Windows::Forms::DockStyle::Top;
       this->listView1->Height = this->ClientSize.Height * 2 / 3;
       this->listView1->TabIndex = 0;
       this->listView1->Items->Add("listView");
    
       // Set properties of RichTextBox control.
       this->richTextBox1->Dock = System::Windows::Forms::DockStyle::Fill;
       this->richTextBox1->TabIndex = 2;
       this->richTextBox1->Text = S"richTextBox1";
    
       // Set properties of Panel's Splitter control.
       this->splitter2->Dock = System::Windows::Forms::DockStyle::Top;
       // Width is irrelevant if splitter is docked to Top.
       this->splitter2->Height = 3;
       // Use a different color to distinguish the two splitters.
       this->splitter2->BackColor = Color::Blue;
       this->splitter2->TabIndex = 1;
       // Set TabStop to false for ease of use when negotiating
       // the user interface.
       this->splitter2->TabStop = false;
    
       // Set properties of Form's Splitter control.
       this->splitter1->BackColor = Color::Red;
       this->splitter1->TabIndex = 1;
       // Set TabStop to false for ease of use when negotiating
       // the user interface.
       this->splitter1->TabStop = false;
    
       // Add the appropriate controls to the Panel.
       System::Windows::Forms::Control* panelControls[] =
          new System::Windows::Forms::Control*[3];
       panelControls[0] = this->richTextBox1;
       panelControls[1] = this->splitter2;
       panelControls[2] = this->listView1;
       this->panel1->Controls->AddRange(panelControls);
    
       // Set properties of Panel control.
       this->panel1->Dock = System::Windows::Forms::DockStyle::Fill;
       this->panel1->TabIndex = 2;
    
       // Add the rest of the controls to the form.
       System::Windows::Forms::Control* formControls[] =
          new System::Windows::Forms::Control*[3];
       formControls[0] = this->panel1;
       formControls[1] = this->splitter1;
       formControls[2] = this->treeView1;
       this->Controls->AddRange(formControls);
       this->Text = S"Intricate UI Example";
    }
    
  3. In Visual Basic, add a call to the procedure you just created in the New() procedure. In C# or C++, add this line of code to the constructor for the form class.
    ' Visual Basic
    ' Add this to the New procedure.
    OutlookUI()
    
    // C#
    // Add this to the form class's constructor.
    OutlookUI();
    
    // C++
    // Add this to the form class's constructor.
    OutlookUI();
    
  4. Press F5 to run your application.

See Also

Introduction to the Windows Forms Splitter Control

Show:
© 2014 Microsoft