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:

• Convertir una propiedad (como un color de pincel) en un recurso que puede aplicar a otros controles para crear una apariencia única y coherente para su aplicación.

  Para obtener un ejemplo, vea Crear un recurso.

• Crear una plantilla y un estilo para un control que defina su apariencia y su comportamiento, lo que también proporciona una apariencia única y coherente a la aplicación. Las plantillas y los estilos pueden incluir desencadenadores y usar recursos para establecer propiedades. Para obtener más información, vea la sección "Estilos y plantillas" a continuación.

  Para obtener más información, vea los temas siguientes:

  • Crear un estilo

  • Crear o modificar una plantilla

  • Crear una plantilla reutilizable para aplicar estilo a un control del sistema

  • Crear una máscara para los controles del proyecto

• Agregar animaciones e interactividad al control.

  Para obtener un ejemplo, vea Crear una animación sencilla.

• Programar un comportamiento más complejo para el control en métodos de control de eventos en un archivo de código subyacente.

  Para obtener más información, vea Crear un nuevo método de control de eventos y Inténtelo: cargar una nueva página dinámicamente en la aplicación de Silverlight.

• Diseñar sus propios controles personalizados y usarlos en Expression Blend.

  Para obtener más información, vea los temas siguientes:

  • Crear un nuevo control de usuario en un proyecto

  • Crear un control de usuario vacío

  • Inténtelo: crear un control personalizado con propiedades personalizadas

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  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 Pluma genera un objeto Path. El icono Image aparece en el panel Herramientas después de seleccionar el control Image en el panel Activos.

Del panel Herramientas a la mesa de trabajo

	Un objeto de trazado denominado Path_40, que representa la forma del muestrario de color naranja.		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.
	Un objeto de rectángulo denominado Rectangle_44, que representa uno de los chips de pintura en la muestra de colores.		Un objeto de imagen denominado photo_bathroom, que representa la imagen de fondo de la sala.
	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.	Rectángulo  Elipse  Trazado (generado por las herramientas de dibujo Línea , Pluma  y Lápiz )
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.	‎Lienzo Acoplar  Cuadrícula  Apilar  Ajustar
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  TextBlock  RichTextBox  Etiqueta  PasswordBox
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  ListBox  Menu  RadioButton  CheckBox
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  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 (puede estar en inglés) en la sección de Windows Presentation Foundation 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  ScrollBar
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  RadioButton
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 con 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  ListBox
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  TabItem MenuItem

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.

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.