Compartir a través de

Dibujar un control con encabezado

  • Artículo

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). También puede usar este procedimiento con otros controles de contenido con encabezado que se enumeran en el artículo acerca de los tipos HeaderedContentControl (puede estar en inglés) en MSDN. Los controles de elemento con encabezado se enumeran en el artículo sobre tipos HeaderedItemsControl (puede estar en inglés) en MSDN.

Para crear un control de contenidos con encabezado

  1. En el panel Herramientas, situado en el lado izquierdo de la ventana de la aplicación de Microsoft Expression Blend, haga clic en Activos Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(ES-ES,Expression.30).png. En la categoría Controles, seleccione TabControl Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(ES-ES,Expression.30).png en la lista.

    El icono del control TabControl aparece debajo del botón Activos y está seleccionado, listo para que el usuario agregue un control TabControl a la mesa de trabajo.

    Cc295310.alert_tip(ES-ES,Expression.30).gifSugerencia:

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

  2. Para agregar un objeto TabControl a la mesa de trabajo, haga doble clic en el icono del control TabControl. El control TabControl de forma predeterminada contiene dos objetos TabItem.

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(ES-ES,Expression.30).png

    Cc295310.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Puede agregar otros objetos TabItem al control TabControl si lo desea. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto TabControl y elija Agregar TabItem.

  3. En la mesa de trabajo, arrastre el manipulador de tamaño del vértice inferior derecho del control de ficha con la tecla CTRL presionada para agrandarlo. Agrande el objeto TabControl hasta que se muestren tres fichas en la parte superior.

    Cc295310.alert_tip(ES-ES,Expression.30).gifSugerencia:

    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 en la categoría Propiedades comunes del panel Propiedades. Por ejemplo, asigne el nombre Información personal al primer objeto TabItem.

    Cc295310.alert_tip(ES-ES,Expression.30).gifSugerencia:

    También puede usar otro control, como un control Image, como encabezado del objeto TabItem. En el panel Objetos y escala de tiempo, expanda el objeto TabItem y haga clic en el objeto Header para convertirlo en el elemento activado. Puede agregar un control Image desde el panel Herramientas o desde el panel Proyectos.

  5. Para agregar contenido a uno de los objetos TabItem, haga clic en él para activarlo en Objetos y escala de tiempo.

  6. En el panel Herramientas, haga doble clic en StackPanel Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ES-ES,Expression.30).png para agregar un objeto StackPanel al objeto TabItem.

  7. En el panel Objetos y escala de tiempo, haga doble clic en el objeto StackPanel para convertirlo en el objeto activo. Ahora puede agregar tantos objetos al objeto TabItem como desee. Por ejemplo, puede agregar un control TextBlock o ListBox desde el panel Herramientas.

    Objetos secundarios agregados al objeto TabControl

    Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(ES-ES,Expression.30).png

  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 el panel Objetos y escala de tiempo, seleccione el control GroupBox en el panel Activos y use el mouse para dibujar el control en la mesa de trabajo, ligeramente mayor que el objeto TabControl.

  9. Para que el objeto TabControl sea un objeto secundario del objeto GroupBox, arrastre el objeto TabControl hasta el objeto GroupBox en el panel Objetos y escala de tiempo.

    Arrastrar el objeto TabControl al objeto GroupBox

    Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(ES-ES,Expression.30).png

  10. Cambie el título del objeto GroupBox. Para ello, selecciónelo en el panel Objetos y escala de tiempo y 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 un ejemplo completo que incluya código que reaccione a los elementos seleccionados en el objeto ListBox, vea 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).