Crear un control de contenido

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 elementos secundarios, con lo que se resuelve la limitación de un único elemento 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). También puede usar este procedimiento con otros controles de contenido que se enumeran en "Tipos" en el tema acerca de Tipos ContentControl (puede estar en inglés) en MSDN.

[!NOTA]

Los controles de contenido no están disponibles para proyectos de Microsoft Silverlight 1.0. Sin embargo, puede colocar en capas los objetos en un panel de diseño Lienzo, con un objeto TextBlock en la parte superior y, a continuación, enlazar un controlador de eventos JavaScript para que el elemento Canvas se comporte como un botón u otro control de contenido. Para obtener un ejemplo, vea Crear un botón que controle un guión gráfico en una aplicación de Silverlight.

Para crear un control de contenido

1. En el cuadro de herramientas situado en el lado izquierdo de Microsoft Expression Blend, haga clic en el Panel biblioteca . En la ficha Controles, haga clic en Controles del sistema (si aún no está seleccionado) y elija Button  en la lista.

   El icono del control Button aparecerá encima del botón Panel biblioteca y estará seleccionado, listo para que el usuario agregue un control Button a la mesa de trabajo.

   Sugerencia:
   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 a la mesa de trabajo, haga doble clic en el icono del cuadro de 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

   

   Sugerencia:
   También puede agregar un control a la mesa de trabajo si selecciona el control en el cuadro de 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.

   Sugerencia:
   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 Objetos y escala de tiempo, haga doble clic en el objeto Button para convertirlo en el elemento activado. Observe que el elemento aparece resaltado en amarillo. Activar un objeto permite agregar un elemento secundario.

   Sugerencia:
   También puede activar un objeto de la mesa de trabajo si selecciona primero la herramienta Selección  en el cuadro de herramientas y, a continuación, hace doble clic en el objeto en la mesa de trabajo.

4. En el cuadro de herramientas, seleccione el control StackPanel, ya sea del Panel biblioteca o de una de las listas desplegables de controles comunes. Haga doble clic en el icono del control StackPanel para agregarlo como elemento secundario en el botón.

   StackPanel reemplaza la cadena de contenido del objeto Button. Para comprobarlo, seleccione [Button] en Objetos y escala de tiempo y consulte la propiedad Content (contenido) en la categoría Propiedadescomunes del panel Propiedades.

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

   

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 Objetos y escala de tiempo y cambie el valor de Width (ancho) a 150 píxeles (o unidades independientes del dispositivo, que son aproximadamente 1/96 de pulgada) y el valor de Height (alto) a 75 píxeles en la categoría Diseño del panel Propiedades. Observe que el botón cambia de tamaño automáticamente al cambiar el tamaño del elemento secundario (StackPanel).

   Sugerencia:
   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. Con [StackPanel] aún seleccionado en Objetos y escala de tiempo, establezca la propiedad Orientation (orientación) en la categoría Diseño del panel Propiedades en Horizontal, de modo que los elementos secundarios del objeto StackPanel se apilen horizontalmente. Este cambio de propiedad no afecta al objeto StackPanel porque se muestra en la mesa de trabajo hasta que se agreguen elementos al mismo.

7. En Objetosy escala de tiempo, haga doble clic en el objeto [StackPanel] para activarlo de modo que pueda agregar elementos secundarios.

   Sugerencia:
   A diferencia de la mayoría de los elementos de la UI, algunos paneles de diseño (como StackPanel y Grid) pueden contener más de un elemento secundario. Esto es útil para organizar y disponer el diseño de la aplicación. Para obtener más información, vea Información general acerca del diseño.

8. En el cuadro de herramientas, seleccione la herramienta Elipse y dibuje un círculo dentro del objeto StackPanel en la mesa de trabajo. A continuación, seleccione el control TextBox del cuadro de herramientas y dibújelo dentro del objeto StackPanel. Los elementos secundarios se apilan unos al lado de otros de izquierda a derecha debido a la orientación horizontal del objeto StackPanel contenedor. Si desea agregar espacio entre los elementos secundarios, puede ajustar las propiedades Margin (margen) de los elementos en la categoría Diseño del panel Propiedades.

   Objetos secundarios agregados al objeto StackPanel

   

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