Procedimiento para crear una interfaz de usuario de varios paneles con formularios Windows Forms

  • Artículo

Al organizar los controles de un formulario, puede crear una interfaz de usuario de varios panel similar a la que se usa en Microsoft Outlook, con una lista de carpetas, un panel de mensajes y un panel de vista previa. Esta organización se consigue principalmente mediante el acoplamiento de controles con el formulario.

Cuando se acopla un control, se determina a qué borde del contenedor primario se fija. Si establece la propiedad Dock en Right, el borde derecho del control se acoplará al borde derecho de su control primario. Además, se cambia el tamaño del borde acoplado del control para que coincida con el de su control contenedor. Para obtener más información sobre cómo funciona la propiedad Dock, consulte Procedimiento para acoplar controles en Windows Forms.

Este procedimiento se centra en organizar el control SplitContainer y otros controles en el formulario, no en agregar funcionalidad para que la aplicación imite Microsoft Outlook.

Formulario diseñado para parecerse a una ventana de correo de Outlook.

Para crear esta interfaz de usuario, debe colocar todos los controles dentro de un control SplitContainer. SplitContainer contiene un control TreeView en el panel izquierdo y otro SplitContainer en el panel derecho. El segundo SplitContainer contiene un control ListView en la parte superior y un control RichTextBox en la parte inferior.

Estos controles SplitContainer permiten cambiar de forma independiente el tamaño de los demás controles del formulario. Puede adaptar las técnicas de este procedimiento para crear sus propias interfaces de usuario personalizadas.

Diseño de los controles

En la tabla siguiente se describe cómo se configuran los controles para imitar Microsoft Outlook:

Control Propiedad Value
SplitContainer Name splitContainer1
Acoplar Fill
TabIndex 4
SplitterWidth 4
SplitterDistance 100
Panel1.Controls Agregue el control treeView1 a este panel.
Panel2.Controls Agregue el control splitContainer2 a este panel.
TreeView Name treeView1
Acoplar Fill
TabIndex 0
Nodos Agregue un nuevo nodo denominado Node0.
SplitContainer Name splitContainer2
Acoplar Fill
TabIndex 1
SplitterWidth 4
SplitterDistance 150
Orientación Horizontal
Panel1.Controls Agregue el control listView1 a este panel.
Panel2.Controls Agregue el control richTextBox1 a este panel.
ListView Name listView1
Acoplar Fill
TabIndex 2
Elementos Agregue un nuevo elemento y establezca el texto en item1.
RichTextBox Name richTextBox1
Acoplar Fill
TabIndex 3
Texto richTextBox1

Consulte también