Share via


如何:使用設計工具,以 Windows Form 建立多窗格使用者介面

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

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

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

若要建立此使用者介面,您可以將所有控制項放在控制項內 SplitContainer ,其中包含 TreeView 左側面板中的控制項。 控制項的 SplitContainer 右面板包含第二 SplitContainer 個控制項,且 ListView 控制項上方 RichTextBox 有控制項。 這些 SplitContainer 控制項可讓表單上的其他控制項獨立調整大小。 您可以調整此程式中的技術,以自行製作自訂使用者介面。

在設計階段建立 Outlook 樣式的使用者介面

  1. 建立新的 Windows 應用程式專案( 檔案 >> 專案 > Visual C# Visual Basic > 傳統型 > Windows Forms 應用程式)。

  2. 將控制項從 [工具箱] SplitContainer 拖曳至表單。 在 [屬性] 視窗中,將 Dock 屬性設定為 Fill

  3. 將控制項從 [工具箱 ] TreeView 拖曳至控制項的 SplitContainer 左側面板。 在 [ 屬性 ] 視窗中,按一下按一下向下箭號時所顯示之值編輯器中的左側面板,將 屬性 Left 設定 Dock 為 。

  4. [工具箱 ] 拖曳另一個 SplitContainer 控制項;將它放在您新增至表單之 SplitContainer 控制項的右側面板中。 在 [ 屬性] 視窗中,將 Dock 屬性設定為 Fill ,並將 Orientation 屬性設定為 Horizontal

  5. 將控制項從 [工具箱 ] ListView 拖曳至您新增至表單之第二個 SplitContainer 控制項的上方面板。 將 Dock 控制項的 ListView 屬性設為 Fill

  6. 將控制項從 [工具箱 ] RichTextBox 拖曳至第二 SplitContainer 個控制項的下方面板。 將 Dock 控制項的 RichTextBox 屬性設為 Fill

    此時,如果您按 F5 來執行應用程式,表單會顯示與 Microsoft Outlook 類似的三部分使用者介面。

    注意

    當您將滑鼠指標放在控制項內的 SplitContainer 任一個分隔器上方時,您可以調整內部維度的大小。

在應用程式開發時,您已製作複雜的使用者介面。 下一個步驟是繼續進行應用程式本身的程式設計,或許是將控制項和 ListView 控制項連接到 TreeView 某種資料來源。 如需將控制項連接到資料的詳細資訊,請參閱 資料系結和 Windows Forms

另請參閱