Crear un control con encabezado

Los controles con encabezado tienen una propiedad de encabezado que se usa 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 TabItem dentro de un TabControl es un control de contenido con encabezado, y ToolBar y MenuItem son controles de elemento con encabezado.

El siguiente procedimiento muestra cómo crear controles de contenido con encabezado (controles TabItem) dentro de controles de elementos (TabControl). Este procedimiento se puede usar con otros controles de contenido con encabezado que se enumeran en la sección "Tipos" del artículo sobre tipos HeaderedContentControl (puede estar en inglés) en MSDN. Los controles de elementos con encabezado se enumeran en el artículo sobre tipos HeaderedItemsControl (puede estar en inglés) en MSDN.

[!NOTA]

Los controles con encabezado no están disponibles en los proyectos de Microsoft Silverlight 1.0. Sin embargo, se puede disponer en capas los paneles de diseño de lienzo que contienen objetos TextBlock y, a continuación, enlazar un controlador de eventos JavaScript para que los elementos aparezcan o desaparezcan en función de la ficha que el usuario seleccione. Para obtener información acerca de JavaScript, vea el artículo sobre eventos del mouse y scripting de Silverlight (puede estar en inglés).

[!NOTA]

Microsoft Expression Blend 2 con Service Pack 1 no incluye versiones para Silverlight 2 de controles con encabezado. Sin embargo, el SDK de Silverlight 2 (que se incluye con Microsoft Silverlight Tools para Visual Studio) viene con ensamblados que contienen controles con encabezado como TabControl. Para obtener información sobre cómo incluir ensamblados en un proyecto, vea Importar un control personalizado agregando una referencia.

Para crear un control de contenidos con encabezado

1. En el cuadro de herramientas del lado izquierdo de Microsoft Expression Blend, haga clic en el botón Panel de biblioteca . En la ficha Controles, haga clic en Controles del sistema (si aún no está seleccionado) y elija el control TabControl 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 a la mesa de trabajo.

   Sugerencia:
   Los elementos más comunes de la interfaz de usuario (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 a la mesa de trabajo, haga doble clic en el icono del cuadro de herramientas para el control TabControl. El control TabControl de forma predeterminada contiene dos objetos TabItem.

   Un objeto TabControl creado en la mesa de trabajo con su ubicación y tamaño predeterminados (superior izquierda)

   

   Sugerencia:

   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 (active la casilla Mostrar todo). Haga doble clic en el icono del control TabItem para agregarlo como elemento secundario dentro del control TabControl.

3. En la mesa de trabajo, agrande el control de ficha arrastrando el manipulador de tamaño del vértice inferior derecho. El puntero 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.

   Sugerencia:
   Como alternativa, para cambiar el tamaño del control TabControl, establezca las propiedades Height (alto) y Width (ancho) en 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 (encabezado) en la categoría Propiedades comunes del panel Propiedades. Por ejemplo, asigne el nombre Información personal al primer objeto TabItem.

   Sugerencia:
   También puede usar 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, haga doble clic en él para activarlo 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 Content (contenido) del objeto TabItem se cambia del objeto Grid predeterminado al objeto StackPanel.

   Sugerencia:
   Una propiedad Content (contenido) sólo puede contener un elemento. Puede resultar útil usar 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 desde el cuadro de herramientas.

   Objetos secundarios agregados al objeto TabControl

   

8. Si desea agregar un borde y un encabezado para todo el control TabControl, puede usar otro control de contenido 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, dibuje con el mouse el control en la mesa de trabajo, de manera que sea un poco más grande que el control TabControl.

9. Para que TabControl sea un elemento secundario de GroupBox, arrastre el control TabControl al control GroupBox en Objetos y escala de tiempo.

   Arrastrar TabControl al control GroupBox

   

10. Para cambiar el título de GroupBox, selecciónelo en Objetos y escala de tiempo y cambie la propiedad Header (encabezado) en la categoría Propiedades comunes del panel Propiedades.

11. Genere el proyecto (F5) para ver la aplicación resultante.

    [!NOTA]

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