Skip to content

Commit ec98bc8

Browse files
cxwtoolcxwtool
committed
merge main branch
2 parents 46e0170 + a5e3c44 commit ec98bc8

File tree

24 files changed

+578
-226
lines changed

24 files changed

+578
-226
lines changed

‎dotnet-desktop-guide/framework/winforms/controls/how-to-create-a-multipane-user-interface-with-windows-forms.md‎

Lines changed: 49 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Create a Multipane User Interface
3-
ms.date: "03/30/2017"
3+
description: Describes how to layout Windows Forms controls to mimic a Microsoft Outlook email application.
4+
ms.date: 01/21/2022
45
dev_langs:
56
- "csharp"
67
- "vb"
@@ -14,162 +15,53 @@ helpviewer_keywords:
1415
ms.assetid: e79f6bcc-3740-4d1e-b46a-c5594d9b7327
1516
---
1617
# How to: Create a Multipane User Interface with Windows Forms
17-
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.
18-
19-
When you dock a control, you determine which edge of the parent container a control is fastened to. Thus, if you set the <xref:System.Windows.Forms.SplitContainer.Dock%2A> property to <xref:System.Windows.Forms.DockStyle.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 <xref:System.Windows.Forms.SplitContainer.Dock%2A> property works, see [How to: Dock Controls on Windows Forms](how-to-dock-controls-on-windows-forms.md).
20-
21-
This procedure focuses on arranging the <xref:System.Windows.Forms.SplitContainer> and the other controls on the form, not on adding functionality to make the application mimic Microsoft Outlook.
22-
23-
To create this user interface, you place all the controls within a <xref:System.Windows.Forms.SplitContainer> control, which contains a <xref:System.Windows.Forms.TreeView> control in the left-hand panel. The right-hand panel of the <xref:System.Windows.Forms.SplitContainer> control contains a second <xref:System.Windows.Forms.SplitContainer> control with a <xref:System.Windows.Forms.ListView> control above a <xref:System.Windows.Forms.RichTextBox> control. These <xref:System.Windows.Forms.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.
24-
25-
### To create an Outlook-style user interface programmatically
26-
27-
1. Within a form, declare each control that comprises your user interface. For this example, use the <xref:System.Windows.Forms.TreeView>, <xref:System.Windows.Forms.ListView>, <xref:System.Windows.Forms.SplitContainer>, and <xref:System.Windows.Forms.RichTextBox> controls to mimic the Microsoft Outlook user interface.
28-
29-
```vb
30-
Private WithEvents treeView1 As System.Windows.Forms.TreeView
31-
Private WithEvents listView1 As System.Windows.Forms.ListView
32-
Private WithEvents richTextBox1 As System.Windows.Forms.RichTextBox
33-
Private WithEvents splitContainer1 As _
34-
System.Windows.Forms.SplitContainer
35-
Private WithEvents splitContainer2 As _
36-
System.Windows.Forms.SplitContainer
37-
```
38-
39-
```csharp
40-
private System.Windows.Forms.TreeView treeView1;
41-
private System.Windows.Forms.ListView listView1;
42-
private System.Windows.Forms.RichTextBox richTextBox1;
43-
private System.Windows.Forms. SplitContainer splitContainer2;
44-
private System.Windows.Forms. SplitContainer splitContainer1;
45-
```
46-
47-
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.
48-
49-
```vb
50-
Public Sub CreateOutlookUI()
51-
' Create an instance of each control being used.
52-
Me.components = New System.ComponentModel.Container()
53-
Me.treeView1 = New System.Windows.Forms.TreeView()
54-
Me.listView1 = New System.Windows.Forms.ListView()
55-
Me.richTextBox1 = New System.Windows.Forms.RichTextBox()
56-
Me.splitContainer1 = New System.Windows.Forms.SplitContainer()
57-
Me.splitContainer2= New System.Windows.Forms. SplitContainer()
58-
59-
' Should you develop this into a working application,
60-
' use the AddHandler method to hook up event procedures here.
61-
62-
' Set properties of TreeView control.
63-
' Use the With statement to avoid repetitive code.
64-
With Me.treeView1
65-
.Dock = System.Windows.Forms.DockStyle.Fill
66-
.TabIndex = 0
67-
.Nodes.Add("treeView")
68-
End With
69-
70-
' Set properties of ListView control.
71-
With Me.listView1
72-
.Dock = System.Windows.Forms.DockStyle.Top
73-
.TabIndex = 2
74-
.Items.Add("listView")
75-
End With
76-
77-
' Set properties of RichTextBox control.
78-
With Me.richTextBox1
79-
.Dock = System.Windows.Forms.DockStyle.Fill
80-
.TabIndex = 3
81-
.Text = "richTextBox1"
82-
End With
83-
84-
' Set properties of the first SplitContainer control.
85-
With Me.splitContainer1
86-
.Dock = System.Windows.Forms.DockStyle.Fill
87-
.TabIndex = 1
88-
.SplitterWidth = 4
89-
.SplitterDistance = 150
90-
.Orientation = Orientation.Horizontal
91-
.Panel1.Controls.Add(Me.listView1)
92-
.Panel2.Controls.Add(Me.richTextBox1)
93-
End With
94-
95-
' Set properties of the second SplitContainer control.
96-
With Me.splitContainer2
97-
.Dock = System.Windows.Forms.DockStyle.Fill
98-
.TabIndex = 4
99-
.SplitterWidth = 4
100-
.SplitterDistance = 100
101-
.Panel1.Controls.Add(Me.treeView1)
102-
.Panel2.Controls.Add(Me.SplitContainer1)
103-
End With
104-
105-
' Add the main SplitContainer control to the form.
106-
Me.Controls.Add(Me.splitContainer2)
107-
Me.Text = "Intricate UI Example"
108-
End Sub
109-
```
110-
111-
```csharp
112-
public void createOutlookUI()
113-
{
114-
// Create an instance of each control being used.
115-
treeView1 = new System.Windows.Forms.TreeView();
116-
listView1 = new System.Windows.Forms.ListView();
117-
richTextBox1 = new System.Windows.Forms.RichTextBox();
118-
splitContainer2 = new System.Windows.Forms.SplitContainer();
119-
splitContainer1 = new System.Windows.Forms.SplitContainer();
120-
121-
// Insert code here to hook up event methods.
122-
123-
// Set properties of TreeView control.
124-
treeView1.Dock = System.Windows.Forms.DockStyle.Fill;
125-
treeView1.TabIndex = 0;
126-
treeView1.Nodes.Add("treeView");
127-
128-
// Set properties of ListView control.
129-
listView1.Dock = System.Windows.Forms.DockStyle.Top;
130-
listView1.TabIndex = 2;
131-
listView1.Items.Add("listView");
132-
133-
// Set properties of RichTextBox control.
134-
richTextBox1.Dock = System.Windows.Forms.DockStyle.Fill;
135-
richTextBox1.TabIndex = 3;
136-
richTextBox1.Text = "richTextBox1";
137-
138-
// Set properties of first SplitContainer control.
139-
splitContainer1.Dock = System.Windows.Forms.DockStyle.Fill;
140-
splitContainer2.TabIndex = 1;
141-
splitContainer2.SplitterWidth = 4;
142-
splitContainer2.SplitterDistance = 150;
143-
splitContainer2.Orientation = Orientation.Horizontal;
144-
splitContainer2.Panel1.Controls.Add(this.listView1);
145-
splitContainer2.Panel1.Controls.Add(this.richTextBox1);
146-
147-
// Set properties of second SplitContainer control.
148-
splitContainer2.Dock = System.Windows.Forms.DockStyle.Fill;
149-
splitContainer2.TabIndex = 4;
150-
splitContainer2.SplitterWidth = 4;
151-
splitContainer2.SplitterDistance = 100;
152-
splitContainer2.Panel1.Controls.Add(this.treeView1);
153-
splitContainer2.Panel1.Controls.Add(this.splitContainer1);
154-
155-
// Add the main SplitContainer control to the form.
156-
this.Controls.Add(this.splitContainer2);
157-
this.Text = "Intricate UI Example";
158-
}
159-
```
160-
161-
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.
162-
163-
```vb
164-
' Add this to the New procedure.
165-
CreateOutlookUI()
166-
```
167-
168-
```csharp
169-
// Add this to the form class's constructor.
170-
createOutlookUI();
171-
```
172-
18+
19+
By arranging controls on a form, you can create a multi-pane user interface that's 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.
20+
21+
When you dock a control, you determine which edge of the parent container a control is fastened to. If you set the <xref:System.Windows.Forms.SplitContainer.Dock%2A> property to <xref:System.Windows.Forms.DockStyle.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 <xref:System.Windows.Forms.SplitContainer.Dock%2A> property works, see [How to: Dock Controls on Windows Forms](how-to-dock-controls-on-windows-forms.md).
22+
23+
This procedure focuses on arranging the <xref:System.Windows.Forms.SplitContainer> and the other controls on the form, not on adding functionality to make the application mimic Microsoft Outlook.
24+
25+
:::image type="content" source="media/how-to-create-a-multipane-user-interface-with-windows-forms/form.png" alt-text="A form that's designed to look like an Outlook mail window.":::
26+
27+
To create this user interface, you place all the controls within a <xref:System.Windows.Forms.SplitContainer> control. The `SplitContainer` contains a <xref:System.Windows.Forms.TreeView> control in the left-hand panel and another `SplitContainer` on the right-hand panel. The second `SplitContainer` contains a <xref:System.Windows.Forms.ListView> control on top and a <xref:System.Windows.Forms.RichTextBox> control on the bottom.
28+
29+
These <xref:System.Windows.Forms.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.
30+
31+
## Control layout
32+
33+
The following table describes how the controls are configured to mimic Microsoft Outlook:
34+
35+
| Control | Property | Value |
36+
|----------------|------------------|--------------------------------------------------|
37+
| SplitContainer | Name | `splitContainer1` |
38+
| | Dock | `Fill` |
39+
| | TabIndex | `4` |
40+
| | SplitterWidth | `4` |
41+
| | SplitterDistance | `100` |
42+
| | Panel1.Controls | Add the `treeView1` control to this panel. |
43+
| | Panel2.Controls | Add the `splitContainer2` control to this panel. |
44+
| TreeView | Name | `treeView1` |
45+
| | Dock | `Fill` |
46+
| | TabIndex | `0` |
47+
| | Nodes | Add a new node named `Node0` |
48+
| SplitContainer | Name | `splitContainer2` |
49+
| | Dock | `Fill` |
50+
| | TabIndex | `1` |
51+
| | SplitterWidth | `4` |
52+
| | SplitterDistance | `150` |
53+
| | Orientation | `Horizontal` |
54+
| | Panel1.Controls | Add the `listView1` control to this panel. |
55+
| | Panel2.Controls | Add the `richTextBox1` control to this panel. |
56+
| ListView | Name | `listView1` |
57+
| | Dock | `Fill` |
58+
| | TabIndex | `2` |
59+
| | Items | Add a new item and set the text to `item1`. |
60+
| RichTextBox | Name | `richTextBox1` |
61+
| | Dock | `Fill` |
62+
| | TabIndex | `3` |
63+
| | Text | `richTextBox1` |
64+
17365
## See also
17466

17567
- <xref:System.Windows.Forms.SplitContainer>

‎dotnet-desktop-guide/framework/winforms/controls/media/how-to-create-a-multipane-user-interface-with-windows-forms/form.png‎

5.38 KB
Loading

‎dotnet-desktop-guide/framework/winforms/controls/snippets/how-to-create-a-multipane-user-interface-with-windows-forms/Form1.Designer.cs‎

Lines changed: 147 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dotnet-desktop-guide/framework/winforms/controls/snippets/how-to-create-a-multipane-user-interface-with-windows-forms/Form1.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
using System;
2+
using System.Collections;
3+
using System.Collections.Generic;
4+
using System.Windows.Forms;
5+
6+
namespace project
7+
{
8+
public partial class Form1 : Form
9+
{
10+
//Windows Form application
11+
public Form1()
12+
{
13+
InitializeComponent();
14+
}
15+
}
16+
}

0 commit comments

Comments
 (0)