Inicio > Controles > Crear un control con encabezado

Crear un control con encabezado

Los controles con encabezado tienen una propiedad de encabezado que se utiliza para etiquetar el control. La propiedad de encabezado puede ser tan simple como una cadena de texto o tan compleja como un objeto de Microsoft® .NET Framework. Los controles con encabezado también pueden mostrar contenidos o una colección de elementos, según el tipo de control con encabezado con el que esté trabajando. Por ejemplo, un control TabItem dentro de un control TabControl es un control de contenidos con encabezado y los controles ToolBar y MenuItem son controles de elementos con encabezado.

El siguiente procedimiento muestra cómo crear controles de contenidos con encabezado (controles TabItem ) dentro de controles de elementos (TabControl). Este procedimiento también se puede usar con otros controles de contenido con encabezado enumerados en la sección de tipos del tema sobre tipos HeaderedContentControl en MSDN (en inglés). Los controles de elementos con encabezado se enumeran en la sección de tipos HeaderedItemsControl en MSDN.

Para crear un control de contenidos con encabezado

1. En el cuadro de herramientas situado en el lado izquierdo de Microsoft Expression® Blend, haga clic en el botón Panel biblioteca . En la ficha Controles, haga clic en Controles del sistema (si no aparece seleccionado ya) y seleccioneTabControl en la lista.
   El icono del control TabControl aparece encima del botón Panel biblioteca y está seleccionado, listo para que el usuario agregue un control TabControl al área de diseño.

   Los elementos más comunes de la UI (como el control Button) se muestran ya en listas desplegables encima del botón Panel biblioteca para que pueda agregarlos rápidamente.

2. Para agregar un botón al área de diseño, haga doble clic en el icono del cuadro de herramientas para el control TabControl.
   El control TabControl contiene dos objetos TabItem de manera predeterminada.

   

   Un objeto TabControl creado en el área de diseño con su ubicación y tamaño predeterminados (superior izquierda)

   Puede agregar otros objetos TabItem al control TabControl si lo desea. En Objetos y escala de tiempo, haga doble clic en el objeto TabControl para convertirlo en el elemento activado. En el Cuadro de herramientas, seleccione el control TabItem en el Panel biblioteca (seleccione la casilla de verificación Mostrar todo). Haga doble clic en el icono del control TabItem para agregarlo como elemento secundario dentro del control TabControl.

3. En el área de diseño, agrande el control de ficha arrastrando el manipulador de tamaño del vértice inferior derecho. El cursor cambiará a una flecha de dos puntas para indicar la operación de cambio de tamaño. Agrande el control TabControl hasta que se muestren tres fichas en la parte superior.

   Como alternativa, para cambiar el tamaño del control TabControl, establezca las propiedades de alto y ancho de la categoría Diseño del panel Propiedades.

4. Para asignar un nombre a uno de los objetos TabItem, selecciónelo en Objetos y escala de tiempo y escriba un nombre para la propiedad Header en la categoría Propiedades comunes del panel Propiedades. Por ejemplo, asigne el nombre Información personal al primer objeto TabItem.

   Como alternativa, puede utilizar otro control, como un control Image, como encabezado del objeto TabItem. En Objetos y escala de tiempo, expanda el objeto TabItem y haga doble clic en el objeto Header para convertirlo en el elemento activado. Puede agregar un control Image desde el Cuadro de herramientas o desde el panel Archivos.

5. Para agregar contenido a uno de los objetos TabItem, actívelo haciendo doble clic en el mismo en Objetos y escala de tiempo.
6. En el cuadro de herramientas, haga doble clic en StackPanel para agregar un objeto StackPanel al objeto TabItem.
   La propiedad de contenidos del objeto TabItem se cambia del objeto Grid predeterminado al objeto StackPanel.

   Una propiedad de contenidos sólo puede contener un elemento. Resulta útil utilizar un control de panel como StackPanel o Grid como dicho elemento y luego agregar varios elementos al control de panel.

7. En Objetos y escala de tiempo, haga doble clic en el objeto StackPanel para convertirlo en el elemento activo.
   Ahora puede agregar tantos elementos al objeto TabItem como desee. Por ejemplo, puede agregar un control TextBlock o ListBox del Cuadro de herramientas.

   

   Objetos secundarios agregados al objeto TabControl

8. Si desea agregar un borde y un encabezado para todo el control TabControl, puede utilizar otro control de contenidos con encabezado: el control GroupBox. Con el objeto LayoutRoot activado en Objetos y escala de tiempo, seleccione el control GroupBox del Panel biblioteca y, a continuación, utilice el mouse para dibujar el control en el área de diseño; hágalo un poco más grande que el control TabControl.
9. Para que TabControl sea un elemento secundario de GroupBox, haga clic y arrastre el control TabControl al control GroupBox en Objetos y escala de tiempo.

   

   Arrastrar TabControl al control GroupBox

10. Para cambiar el título del control GroupBox, selecciónelo en Objetos y escala de tiempo y, a continuación, cambie la propiedad Header en la categoría Propiedades comunes del panel Propiedades.
11. Genere el proyecto (F5) para ver la aplicación resultante.

Para ver una muestra completa con código incluido que reaccione a los elementos seleccionados en el control ListBox, vea el ejemplo de GroupBox en MSDN (en inglés). El código de muestra se incluye en el paquete "WPFSamples.exe" disponible en la página de ejemplos para Windows SDK .NET Framework 3.0 (en inglés).