Share via


逐步解說:利用 Windows Form 建立多窗格使用者介面

藉由排列表單上的控制項,您可以建立類似于 Microsoft Outlook 中使用的多窗格使用者介面,其中包含 [資料夾 ] 清單、[ 訊息 ] 窗格和 [預覽 ] 窗格。 這種安排主要透過與表單的對接控制來實現。

當您停駐控制項時,您可以判斷控制項所系結的父容器邊緣。 如果您將 Dock 屬性設定為 Right ,控制項的右邊緣將會停駐在其父控制項的右邊緣。 此外,控制項的停駐邊緣會調整大小,使其符合其容器控制項的邊緣。 如需屬性運作方式 Dock 的詳細資訊,請參閱 How to: Dock Controls on Windows Forms

此程式著重于排列 SplitContainer 表單上的 和其他控制項,而不是新增功能,讓應用程式模擬 Microsoft Outlook。

A form that's designed to look like an Outlook mail window.

若要建立這個使用者介面,您可以將所有控制項放在 控制項內 SplitContainerSplitContainer包含 TreeView 左側面板中的控制項,以及右側面板上的另一個 SplitContainer 控制項。 第二 SplitContainerListView 包含上方的 控制項和 RichTextBox 底部的 控制項。

這些 SplitContainer 控制項可讓表單上的其他控制項獨立調整大小。 您可以調整此程式中的技術,以自行製作自訂使用者介面。

控制項配置

下表描述控制項如何設定為模擬 Microsoft Outlook:

控制 屬性
SplitContainer 名稱 splitContainer1
固定 Fill
TabIndex 4
SplitterWidth 4
SplitterDistance 100
Panel1.Controls treeView1 控制項新增至此面板。
Panel2.Controls splitContainer2 控制項新增至此面板。
TreeView 名稱 treeView1
固定 Fill
TabIndex 0
節點 新增名為 的新節點 Node0
SplitContainer 名稱 splitContainer2
固定 Fill
TabIndex 1
SplitterWidth 4
SplitterDistance 150
方向 Horizontal
Panel1.Controls listView1 控制項新增至此面板。
Panel2.Controls richTextBox1 控制項新增至此面板。
ListView 名稱 listView1
固定 Fill
TabIndex 2
項目 新增專案,並將文字設定為 item1
RichTextBox 名稱 richTextBox1
固定 Fill
TabIndex 3
Text richTextBox1

另請參閱