Compartir a través de


Crear un control de elementos

Esta página es específica de WPF y Silverlight 2

Los controles de elementos tienen una propiedad Items (elementos) que puede contener una colección de elementos secundarios. Puede agregar elementos secundarios de cualquier tipo a la colección de elementos o también puede mostrar una matriz de elementos de un origen de datos mediante el enlace de datos. Los controles de elementos no tienen ninguna propiedad Content (contenido) ni ninguna propiedad Header (encabezado). Los elementos secundarios se agregan al host de elementos del control de elementos que, para un objeto ListBox, es un Panel StackPanel que organiza los elementos en una pila vertical. Sólo podrá ver el host de elementos en Objetos y escala de tiempo en Microsoft Expression Blend cuando esté editando la plantilla del control de elementos.

El procedimiento siguiente muestra cómo crear un control de elementos (ListBox) y agregar elementos a la colección de elementos. Este procedimiento se puede usar con otros controles de elementos que se enumeran en "Tipos" en el tema Tipos ItemsControl en MSDN. Si desea mostrar una matriz de elementos de un origen de datos, vea el tema Inténtelo: Crear un lector de noticias RSS.

[!NOTA]

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

Para crear un control de elementos

  1. En el cuadro de herramientas del lado izquierdo de Expression Blend, haga clic en el botón Panel de biblioteca Cc294882.0224cabd-5da1-4e01-bddd-4a647401a098(es-es,Expression.10).png. En la ficha Controles, haga clic en Controles del sistema (si aún no está seleccionado) y elija ListBoxCc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(es-es,Expression.10).png en la lista. El icono del control ListBox aparece encima del botón Panel biblioteca y está seleccionado, listo para que el usuario agregue un control ListBox a la mesa de trabajo.

    Cc294882.alert_tip(es-es,Expression.10).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 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 ListBox.

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

    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(es-es,Expression.10).png

    Cc294882.alert_tip(es-es,Expression.10).gifSugerencia:

    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.

    Cc294882.alert_tip(es-es,Expression.10).gifSugerencia:

    Después de agregar un elemento de diseño de la UI, como un control ListBox, 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 ListBox para convertirlo en el elemento activado. Observe que el elemento aparece resaltado en amarillo. Activar un objeto permite agregar un elemento secundario.

    Cc294882.alert_tip(es-es,Expression.10).gifSugerencia:

    También puede activar un objeto de la mesa de trabajo si selecciona primero la herramienta Selección Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(es-es,Expression.10).png en el cuadro de herramientas y, a continuación, hace doble clic en el objeto en la mesa de trabajo.

  4. Dibuje varias formas en el objeto ListBox con elementos del cuadro de herramientas como TextBlock Cc294882.42165963-00f7-4a33-abcd-b0849edebada(es-es,Expression.10).png, Button Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(es-es,Expression.10).png o Rectangle Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(es-es,Expression.10).png. Observe cómo la lista organiza estos elementos secundarios en una pila vertical.

    Objetos secundarios agregados al objeto ListBox

    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(es-es,Expression.10).png

    [!NOTA]

    Si agrega más elementos de los que caben en el control de elementos, aparecerá una barra de desplazamiento al ejecutar la aplicación. Esto le permite ver los elementos adicionales.

    Cc294882.alert_tip(es-es,Expression.10).gifSugerencia:

    Para reorganizar los elementos de la lista, arrastre y coloque los objetos en Objetos y escala de tiempo o seleccione la herramienta Selección Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(es-es,Expression.10).png para arrastrarlos y colocarlos a la mesa de trabajo.

  5. Puede ver los elementos de ListBox y agregar otros en la ventana Editor de la colección. Para abrir el Editor de la colección, haga clic en el botón Editar elementos de esta colección Cc294882.180d50dc-77e2-4d23-a353-1822e9056f2f(es-es,Expression.10).png situado junto a la propiedad Items (Collection) [elementos (colección)] en el panel Propiedades.

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