Dibujar un control de contenido

  • Artículo

Los controles de contenido tienen una única propiedad de contenido que define lo que mostrará el control. La propiedad de contenido puede ser tan simple como una cadena de texto o tan compleja como un objeto de Microsoft .NET Framework. Si agrega un control de panel de diseño a un control de contenido, el control de panel se convierte en el contenido al que puede agregar diversos objetos secundarios, con lo que se resuelve la limitación de un único objeto de contenido.

El procedimiento siguiente muestra cómo crear un control de contenido (Button) y establecer su propiedad de contenido en un panel de diseño (StackPanel). Este procedimiento se puede usar con otros controles de contenido que se enumeran en la sección "Tipos" del tema acerca de los tipos ItemsControl (puede estar en inglés) en MSDN.

Para crear un control de contenido

  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 Cc295336.0d8b8d29-1af9-418f-8741-be3097d76eab(ES-ES,Expression.30).png. En la categoría Controles, haga clic en el panel Activos, seleccione Button Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(ES-ES,Expression.30).png en la lista.

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

    Cc295336.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 botón a la mesa de trabajo, haga doble clic en el icono del panel Herramientas para el control Button. El contenido predeterminado de un control Button es la cadena "Button".

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

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(ES-ES,Expression.30).png

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

    También puede agregar un control a la mesa de trabajo si selecciona el control en el panel Herramientas y, a continuación, hace clic en la mesa de trabajo y arrastra el mouse para especificar el rectángulo de selección del control.
    Cc295336.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Después de agregar un elemento de diseño de la UI, como un control Button, a la mesa de trabajo, se convierte en un objeto en la aplicación.

  3. En el panel Activos, en la ficha Paneles de la categoría Controles, seleccione StackPanel Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ES-ES,Expression.30).png. Haga doble clic en el icono del control StackPanel para agregarlo a la mesa de trabajo.

  4. En el panel Objetos y escala de tiempo, arrastre el objeto StackPanel al objeto Button.

    StackPanel reemplaza la cadena de contenido del objeto Button. Para comprobarlo, seleccione [Button] en el panel Objetos y escala de tiempo y, a continuación, examine la propiedad Content en la categoría Propiedadescomunes del panel Propiedades.

    Objeto StackPanel agregado como objeto secundario en un objeto Button de la mesa de trabajo

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(ES-ES,Expression.30).png

  5. StackPanel tiene un alto y un ancho de 100, y un alto y ancho mínimos de 0, establecidos como tamaño predeterminado. Para que resulte más fácil trabajar con el objeto StackPanel, seleccione [StackPanel] en el panel Objetos y escala de tiempo y cambie el valor de Width a 150 píxeles (o unidades independientes del dispositivo, que son aproximadamente 1/96 de pulgada) y el valor de Height a 75 píxeles en la categoría Diseño del panel Propiedades.

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

    También puede cambiar el tamaño de un objeto en la mesa de trabajo si arrastra los controles Adorner de los vértices del rectángulo de selección.

  6. Para que el objeto Button cambie de tamaño automáticamente cuando el usuario cambie el objeto secundario (el objeto StackPanel), seleccione el objeto Button y, a continuación, en la categoría Diseño del panel Propiedades, establezca las propiedades Width y Height en Automático.

  7. Con [StackPanel] seleccionado en el panel Objetos y escala de tiempo, establezca la propiedad Orientation en la categoría Diseño del panel Propiedades en Horizontal para que los objetos secundarios de StackPanel se apilen horizontalmente.

  8. En el panel Objetos y escala de tiempo, haga clic en el objeto [StackPanel] para activarlo de modo que pueda agregar objetos secundarios.

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

    A diferencia de la mayoría de los elementos de la interfaz de usuario, algunos paneles de diseño (por ejemplo, StackPanel y Grid) pueden contener más de un objeto secundario. Esto es útil para organizar y disponer el diseño de la aplicación. Para obtener más información, vea Organizar objetos.

  9. En el panel Herramientas, seleccione ElipseCc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(ES-ES,Expression.30).png y, a continuación, dibuje un círculo alrededor de StackPanel en la mesa de trabajo. A continuación, seleccione el control TextBoxCc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(ES-ES,Expression.30).png en el panel Herramientas y dibújelo dentro de StackPanel. Los objetos secundarios se apilan uno al lado de otro, de izquierda a derecha, debido a la orientación horizontal del objeto StackPanel que los contiene. Si desea agregar espacio entre los objetos secundarios, puede ajustar las propiedades Margin de los objetos en la categoría Diseño del panel Propiedades.

    Objetos secundarios agregados al objeto StackPanel

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(ES-ES,Expression.30).png

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