Compartir a través de


Elegir y usar controles interactivos

Microsoft Expression Blend proporciona una amplia lista de controles que permiten diseñar una interfaz de usuario versátil para aplicaciones de Windows Presentation Foundation (WPF) y Microsoft Silverlight.

Expression Blend permite ir más allá del simple trabajo con controles del sistema o predeterminados. En lugar de ello, puede personalizar y dar estilo a los controles para adaptarlos a su gusto y hacer que se comporten como desee. Mediante el uso de los recursos de Expression Blend, también puede proporcionar a los controles personalizados una apariencia atractiva y única para diferenciar su aplicación de otras y, de esta forma, crear una marca muy personalizada o una interfaz de usuario coherente en todas las aplicaciones. Una de las grandes ventajas del modelo de edición de controles de Expression Blend es que los diseñadores pueden diseñar la apariencia de una aplicación al mismo tiempo que los programadores escriben la lógica de programación. Puesto que un diseñador puede crear un diseño directamente, el diseño no se perderá en la conversión desde el boceto a la implementación.

¿Qué son los controles?

Los controles (o elementos de diseño de la interfaz de usuario) son los componentes visibles de una aplicación. Los controles (como botones o listas de elementos que se pueden seleccionar) hacen que los usuarios puedan interactuar con la aplicación. Si conoce los controles que están disponibles en Expression Blend y sabe cómo personalizarlos, puede hacer que su aplicación tenga la apariencia y el comportamiento que desee.

Expression Blend permite trabajar con controles visualmente en la mesa de trabajo y configurar su apariencia y comportamiento en el panel Propiedades y en el panel Objetos y escala de tiempo. Por ejemplo, puede agregar un control Button a la mesa de trabajo, cambiar su apariencia modificando sus valores en el panel Propiedades y, a continuación, iniciar una escala de tiempo de animación cuando se hace clic en el botón agregando un control de comportamiento del panel Activos.

Para obtener más información, vea Panel Propiedades y Panel Objetos y escala de tiempo.

Además de estas acciones simples, también puede realizar lo siguiente en un control:

Categorías de controles

En Expression Blend, puede usar muchos tipos distintos de controles para diseñar rápidamente una aplicación visualmente única.

Todos los controles están disponibles en el panel Activos haciendo clic en Activos Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(es-es,Expression.40).png en la parte inferior del panel Herramientas. El panel Herramientas está situado a lo largo del lateral izquierdo de Expression Blend. Al seleccionar un elemento de interfaz de usuario en el panel Activos, el icono de ese elemento aparece debajo del botón Activos, lo que permite volver a seleccionar fácilmente dicho elemento más adelante. Los elementos de interfaz de usuario más comunes aparecen debajo del botón Activos para que pueda encontrarlos rápidamente.

Para obtener más información, vea Panel Activos y Panel Herramientas.

En la siguiente ilustración se muestra la mesa de trabajo después de haber agregado algunos elementos comunes de la interfaz de usuario, como objetos. La herramienta PlumaCc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(es-es,Expression.40).png genera un objeto PathCc294749.e1882d38-c773-4abe-a2b9-10abd293e119(es-es,Expression.40).png. El icono ImageCc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(es-es,Expression.40).png apareció en el panel Herramientas después de seleccionar el control Image en el panel Activos.

Del panel Herramientas a la mesa de trabajo

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(es-es,Expression.40).png

Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(es-es,Expression.40).png

Un objeto de trazado denominado Path_40, que representa la forma del muestrario de color naranja.

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(es-es,Expression.40).png

Un objeto de botón sin nombre, que representa el botón de la aplicación que tiene la etiqueta "Restablecer imagen". En el panel Objetos y escala de tiempo, el carácter de subrayado (_) se usa para identificar la tecla de acceso del botón.

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(es-es,Expression.40).png

Un objeto de rectángulo denominado Rectangle_44, que representa uno de los chips de pintura en la muestra de colores.

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(es-es,Expression.40).png

Un objeto de imagen denominado photo_bathroom, que representa la imagen de fondo de la sala.

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(es-es,Expression.40).png

Un bloque de texto sin nombre identificado por el texto que lo contiene, que representa el título de la aplicación, "Color Swatch Sample Pack 1".

Para ayudarle a decidir qué control usar, piense en los controles según las siguientes categorías:

Categoría Uso Ejemplos

Formas

Se usan para crear elementos visuales sofisticados mediante elipses, líneas y rectángulos, cuya apariencia puede hacer tan compleja o simple como desee.

Para obtener más información, vea Dibujar formas y trazados.

Puede personalizar la apariencia y el comportamiento de estos elementos de Expression Blend mediante el panel Propiedades o únicamente con los estilos (sin usar plantillas).

Para obtener más información, vea Editar un estilo.

Rectangle  Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(es-es,Expression.40).png

Ellipse  Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(es-es,Expression.40).png

Path (generado por las herramientas de dibujo Línea Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(es-es,Expression.40).png, Pluma Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(es-es,Expression.40).png y Lápiz Cc294749.509dc167-734f-46c9-b012-987ee63450cd(es-es,Expression.40).png)

Paneles de diseño

Se usan como contenedores de otros elementos de la interfaz de usuario para especificar su posición y su comportamiento de ajuste del tamaño de la ventana.

A diferencia de la mayoría de los elementos de la interfaz de usuario, algunos paneles de diseño (como Cuadrícula) 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 Organizar objetos.

Puede personalizar la apariencia y el comportamiento de estos elementos de Expression Blend mediante el panel Propiedades o los estilos (sin usar plantillas).

Para obtener más información, vea Editar un estilo.

Canvas  Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(es-es,Expression.40).png

Dock  Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(es-es,Expression.40).png

Grid  Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(es-es,Expression.40).png

Stack  Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(es-es,Expression.40).png

Wrap  Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(es-es,Expression.40).png

Documento/texto

Se usan para definir la presentación del documento y el formato del texto.

Para obtener más información, vea Dibujar texto.

Puede personalizar la apariencia y el comportamiento de estos elementos de Expression Blend mediante el panel Propiedades o los estilos y plantillas.

Para obtener más información, vea Crear o modificar una plantilla y Editar un estilo.

TextBox  Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(es-es,Expression.40).png

TextBlock  Cc294749.42165963-00f7-4a33-abcd-b0849edebada(es-es,Expression.40).png

RichTextBox  Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(es-es,Expression.40).png

Label  Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(es-es,Expression.40).png

PasswordBox  Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(es-es,Expression.40).png

Controles

Se usan para ofrecer al usuario la posibilidad de interactuar con su aplicación.

Puede personalizar la apariencia y el comportamiento de estos elementos de Expression Blend mediante el panel Propiedades o los estilos y plantillas.

Para obtener más información, vea Crear o modificar una plantilla y Editar un estilo.

Button  Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(es-es,Expression.40).png

ListBox  Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(es-es,Expression.40).png

Menu  Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(es-es,Expression.40).png

RadioButton  Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(es-es,Expression.40).png

CheckBox  Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(es-es,Expression.40).png

Elementos Decorator

Se usan para aplicar efectos a otro elemento. Los elementos Decorator pueden incluir un solo elemento secundario, normalmente el elemento a cuya apariencia afectan.

Normalmente estos elementos se usan en plantillas que se aplican a otros controles, como por ejemplo, el elemento ButtonChrome en la plantilla de un botón. Puede personalizar la apariencia y el comportamiento de los elementos Decorator con el panel Propiedades o únicamente con los estilos (sin usar plantillas).

Para obtener más información, vea Editar un estilo.

Border  Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(es-es,Expression.40).png

ButtonChrome

Viewbox

Para obtener más información acerca de las características de estos tipos de control, vea el artículo acerca de las familias de tipos Cc294749.xtlink_newWindow(es-es,Expression.40).png (puede estar en inglés) en la sección de Windows Presentation Foundation Cc294749.xtlink_newWindow(es-es,Expression.40).png de MSDN.

Crear y modificar controles

Para agregar un control a la mesa de trabajo, haga doble clic en su icono en el panel Herramientas, o bien, selecciónelo en el panel Herramientas y use el mouse para dibujar el elemento en la mesa de trabajo.

Para obtener más información, vea los temas de procedimientos enumerados en Elegir y usar controles interactivos.

Al hacer doble clic en un control del panel Activos, se inserta el control en el elemento activo actual con un tamaño predeterminado. Esto es útil porque en muchos casos el tamaño predeterminado se establecerá en Auto para que el control adapte su tamaño correctamente a medida que se le agrega contenido.

Después de agregar un control a la mesa de trabajo de Expression Blend, se convierte en un objeto en la aplicación. Puede modificar objetos de muchas formas distintas mediante el uso de los manipuladores de objeto para cambiar su tamaño, moverlos, girarlos, voltearlos o sesgarlos, o mediante el panel Propiedades, en el que puede especificar valores precisos de tamaño, posición y giro.

Para obtener más información, vea Agregar o modificar un objeto o los temas de procedimientos enumerados en Trabajar con objetos y propiedades.

Expression Blend le permite manipular los controles de formas que no ofrecen otras aplicaciones. Puede colocar cualquier otro control, panel o elemento de forma dentro de un control. Esto es útil al combinar controles. Por ejemplo, si desea crear un botón con una imagen y texto, solo tiene que arrastrar un panel de diseño StackPanel hasta el botón y agregar un control de imagen y texto al panel de diseño StackPanel .

Los controles siguen ciertas reglas de herencia. Por ejemplo, algunos controles actúan como un elemento primario y pueden tener elementos secundarios (contenido) anidados en ellos. Otros controles no admiten elementos secundarios. Expression Blend siempre intenta agregar elementos secundarios a la raíz (o panel de nivel superior) dentro de un documento. Esto significa que el elemento LayoutRoot se considera la raíz cuando se empieza a trabajar en Expression Blend y, de forma predeterminada, será el destino de todos los elementos secundarios que inserte en el documento. Si desea agregar elementos secundarios a otro control dentro del documento, debe activar dicho control haciendo doble clic en su nombre en el panel Objetos y escala de tiempo. Un resaltado amarillo identifica el elemento activado para que sepa dónde se agregará un control nuevo.

Expression Blend permite el uso de diferentes tipos de controles, que se clasifican según el tipo de herencia que permiten:

Categoría Descripción Ejemplos

Controles simples

Los controles simples están formados por los controles y por las propiedades que se pueden establecer en ellos. Los controles simples no tienen contenido. Es decir, no pueden tener elementos secundarios dentro de ellos.

Image  Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(es-es,Expression.40).png

ScrollBar  Cc294749.6513a026-499e-4296-8a67-7558b466bd33(es-es,Expression.40).png

Controles de contenido

Los controles de contenido pueden usar otro elemento (o pueden mostrar una cadena como texto para escenarios sencillos). Los controles de contenido tienen una propiedad Content . Esto significa que pueden incluir contenido singular, como una cadena. Además, los controles de contenido pueden contener otro elemento, como un panel de diseño.

Para obtener un ejemplo, vea el tema Dibujar un control de contenido.

CheckBox  Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(es-es,Expression.40).png

RadioButton  Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(es-es,Expression.40).png

Controles de elementos

Los controles de elementos incluyen una colección de elementos secundarios. Puede agregar manualmente elementos a la propiedad de la colección Items o puede enlazar una colección de datos a la propiedad ItemsSource . Los controles de elementos exponen colecciones de elementos y no tienen ninguna propiedad Content ni Header .

Para obtener un ejemplo, vea el tema Dibujar un control de elementos.

ComboBox  Cc294749.b174a511-dd12-4a45-a986-034de7693de9(es-es,Expression.40).png

ListBox  Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(es-es,Expression.40).png

Controles con encabezado

Los controles con encabezado incluyen un elemento secundario de encabezado que etiqueta el control. Los controles con encabezado pueden incluir contenido (control de contenido con encabezado) o una colección de elementos (control de elementos con encabezado).

Para obtener un ejemplo, vea el tema Dibujar un control con encabezado.

TabControl  Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(es-es,Expression.40).png

TabItem

MenuItem  Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(es-es,Expression.40).png

Para obtener más información acerca de las características de estos tipos de control, vea el tema sobre los modelos de contenido en la sección relativa a Windows Presentation Foundation de MSDN Cc294749.xtlink_newWindow(es-es,Expression.40).png.

Estilos y plantillas

Como hemos mencionado anteriormente, puede personalizar los controles de muchas formas, incluida la creación de plantillas y estilos para controles, lo que proporciona una apariencia única y coherente a la aplicación. Las plantillas y los estilos definen, respectivamente, las partes que componen un control y el comportamiento predeterminado del mismo. Las plantillas y los estilos se crean mediante copias de los estilos y plantillas predeterminados del sistema para un control (no se pueden modificar los estilos ni las plantillas del sistema). La modificación de las plantillas y los estilos es una forma sencilla de crear controles nuevos en la vista Diseño de Expression Blend sin tener que usar código.

Para obtener más información, vea Aplicar estilos a un control que admite plantillas.

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