Поделиться через

Практическое руководство. Создание пользовательского интерфейса с несколькими областями с помощью Windows Forms

  • Статья

Упорядочивая элементы управления в форме, вы можете создать пользовательский интерфейс с несколькими панелями, аналогичный тому, который используется в Microsoft Outlook, со списком папок, областью сообщений и областью предварительного просмотра. Это расположение достигается, главным образом, путем закрепления элементов управления в форме.

При закреплении элемента управления вы определяете, к какому краю родительского контейнера прикрепляется элемент управления. Если задать для свойства Dock значение Right, правый край элемента управления будет закреплен на правом краю родительского элемента управления. Кроме того, размер закрепленного края элемента управления будет меняться в соответствии с размерами контейнерного элемента управления. Дополнительные сведения о том, как работает свойство Dock, см. в разделе Практическое руководство. Закрепление элементов управления в формах Windows Forms.

Эта процедура направлена на упорядочивание SplitContainer и других элементов управления в форме, а не добавление функциональных возможностей для имитации приложения Microsoft Outlook.

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

Чтобы создать этот пользовательский интерфейс, все элементы управления размещаются в элементе управления SplitContainer. SplitContainer содержит элемент управления TreeView на левой панели, а еще один SplitContainer — на правой панели. Второй SplitContainer содержит элемент управления ListView сверху и элемент управления RichTextBox снизу.

Эти элементы управления SplitContainer обеспечивают независимое изменение размера других элементов управления в форме. Вы можете адаптировать методы, описанные в этой процедуре, для создания собственных пользовательских интерфейсов.

Макет элемента управления

В следующей таблице описывается, как элементы управления настраиваются для имитации Microsoft Outlook:

Элемент управления Свойство Значение
SplitContainer Имя splitContainer1
Закрепить Fill
TabIndex 4
SplitterWidth 4
SplitterDistance 100
Panel1.Controls Добавьте элемент управления treeView1 на эту панель.
Panel2.Controls Добавьте элемент управления splitContainer2 на эту панель.
Представление в виде дерева Имя 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
Текст richTextBox1

См. также