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 ambos controles de elementos 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 "Types" (Tipos) en el artículo HeaderedContentControl Types Cc295310.xtlink_newWindow(es-es,Expression.40).png (Tipos HeaderedContentControl) en MSDN. Los controles de elementos con encabezado se enumeran en el artículo HeaderedItemsControl Types Cc295310.xtlink_newWindow(es-es,Expression.40).png (Tipos HeaderedItemsControl) 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.40).png. En la categoría Controles, seleccione TabControlCc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(es-es,Expression.40).png en la lista.

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

    tip noteSugerencia:

    Los elementos más comunes de la interfaz de usuario (como el control Button ) se muestran ya en listas desplegables debajo 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 . De forma predeterminada, TabControl 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.40).png

    tip noteSugerencia:

    Si lo desea, puede agregar otros objetos TabItem al objeto TabControl . En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto TabControl y, a continuación, haga clic en 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.

    tip noteSugerencia:

    Como alternativa, puede cambiar el tamaño de TabControl estableciendo las propiedades Height y Width en la categoría Diseño del panel Propiedades.

  4. Para asignar un nombre a uno de los objetos TabItem , selecciónelo en el panel 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 .

    tip noteSugerencia:

    También puede usar otro control, como un control Image , como encabezado de TabItem . En el panel Objetos y escala de tiempo, expanda el objeto TabItem y haga clic en el objeto Header para convertirlo en el objeto 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 el panel Objetos y escala de tiempo.

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

  7. En el panel Objetos y escala de tiempo, haga 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.

  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 convertir el objeto TabControl en un objeto secundario del objeto GroupBox , arrastre el objeto TabControl al objeto GroupBox en el panel Objetos y escala de tiempo.

  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 Cc295310.xtlink_newWindow(es-es,Expression.40).png 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 Cc295310.xtlink_newWindow(es-es,Expression.40).png (puede estar en inglés).

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.