Información general acerca de los controles
- ¿Qué son los controles?
- Categorías de controles
- Crear y modificar controles
- Estilos y plantillas
- Temas y estilos simples
Microsoft® 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 sus 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 (UI) coherente en todas sus aplicaciones. Una de las grandes ventajas del modelo de edición de controles que está presente en Expression Blend es que los diseñadores pueden diseñar la apariencia de una aplicación al mismo tiempo que los programadores están escribiendo 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 UI) 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 cómo personalizarlos, puede hacer que su aplicación tenga la apariencia y el comportamiento que desee.
Expression Blend hace que sea posible trabajar con los controles visualmente en el área de diseño y configurar su apariencia y comportamiento en los paneles Propiedades e Interacción. Por ejemplo, puede agregar un control Button al área de diseño, 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 desencadenador de eventos para el botón en el panel Interacción.
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 en este manual del usuario.
- 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 Estilos y plantillas más adelante. Para obtener ejemplos, vea Crear un recurso de estilo y Editar una plantilla de control en este manual del usuario.
- 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 un ejemplo, vea Crear un nuevo método de control de eventos en este manual del usuario.
- Diseñar sus propios controles personalizados y usarlos en Expression Blend. Para obtener un ejemplo, vea Crear un control personalizado y Crear un control de usuario en este manual del usuario.
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 se encuentran disponibles en el Panel biblioteca al hacer clic en el botón Panel biblioteca 
situado en la parte inferior del Cuadro de herramientas. El cuadro de herramientas se encuentra a lo largo del lateral izquierdo de Expression Blend. Al seleccionar un elemento de la UI en el Panel biblioteca, el icono de ese elemento aparece sobre el botón Panel biblioteca, lo que permite volver a seleccionar fácilmente ese elemento más adelante. Los elementos de la UI más comunes ya aparecen sobre el botón Panel biblioteca para que pueda encontrarlos rápidamente.
En la siguiente ilustración se muestra el área de diseño después de haber agregado algunos elementos de la UI comunes como objetos. La herramienta Pluma 
genera un objeto Path
. El icono de imagen 
apareció en el cuadro de herramientas después de seleccionar el control Image en el Panel biblioteca.
Del cuadro de herramientas al área de diseño
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 Aspectos básicos del dibujo en este manual del usuario. Puede personalizar la apariencia y el comportamiento de estos elementos en Expression Blend con el panel Propiedades o únicamente con los estilos (sin usar plantillas). Para obtener más información, vea Editar un estilo en este manual del usuario. |
|
| Paneles de diseño | Se usan como contenedores de otros elementos de la UI, 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 UI, algunos paneles de diseño (como 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 Sistema de diseño en este manual del usuario. Puede personalizar la apariencia y el comportamiento de estos elementos en Expression Blend con el panel Propiedades o con los estilos (sin usar plantillas). Para obtener más información, vea Editar un estilo en este manual del usuario. |
|
| Documento/texto | Se usan para definir la presentación del documento y el formato del texto. Para obtener más información, vea Información general de texto en este manual del usuario.
Puede personalizar la apariencia y el comportamiento de estos elementos en Expression Blend con el panel Propiedades o con estilos y plantillas. Para obtener más información, vea Editar una plantilla de control y Editar un estilo en este manual del usuario. |
|
| Controles | Se usan para proporcionar al usuario la posibilidad de interactuar con su aplicación. Puede personalizar la apariencia y el comportamiento de estos elementos en Expression Blend con el panel Propiedades o con estilos y plantillas. Para obtener más información, vea Editar una plantilla de control y Editar un estilo en este manual del usuario. |
|
| Decoradores | Se usan para aplicar efectos a otro elemento. Los decoradores 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 propios elementos Decorator con el panel Propiedades o únicamente con los estilos (sin usar plantillas). Para obtener más información, vea Editar un estilo en este manual del usuario. |
|
, Pluma 
)
Para obtener más información acerca de las características de estos tipos de control, vea el tema sobre familias de tipos en la sección acerca de Windows Presentation Foundation de MSDN (puede estar en inglés).
Crear y modificar controles
Puede agregar un control al área de diseño; para ello, haga doble clic en su icono en el Cuadro de herramientas o seleccione su icono en el Cuadro de herramientas y, a continuación, use el mouse para dibujar el elemento en el área de diseño. Para obtener más información, vea los temas de procedimientos enumerados en Controles. Al hacer doble clic en un control del Panel biblioteca, 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 al área de diseño en 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 objetos o los temas de procedimientos que figuran en Trabajar con objetos.
Expression Blend es único en la forma en que permite manipular los controles. Puede colocar cualquier otro elemento de forma, control o panel dentro de un control. Esto es útil al combinar controles. Por ejemplo, si desea crear un botón con una imagen y texto, simplemente coloque un control StackPanel en el botón y, a continuación, agregue un control Image y Text al panel StackPanel.
Los controles siguen ciertas reglas de herencia. Por ejemplo, algunos controles actúan como un elemento principal y pueden tener elementos secundarios (contenido) anidados en ellos. Otros controles no permiten el uso de elementos secundarios. Expression Blend siempre intenta agregar elementos secundarios a la raíz (o primer panel) 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, es necesario activar dicho control haciendo doble clic en su nombre bajo 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. En otras palabras, no pueden tener elementos secundarios dentro de ellos. |
|
| Controles de contenido | Los controles de contenido pueden tomar otro elemento (o pueden mostrar una cadena como texto para situaciones simples). 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 Crear un control de contenido en este manual del usuario. |
|
| 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 bien 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 Crear un control de elementos en este manual del usuario. |
|
| 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 Crear un control con encabezado en este manual del usuario. |
|
Para obtener más información acerca de las características de estos tipos de control, vea el tema sobre modelos de contenido en la sección acerca de Windows Presentation Foundation de MSDN (puede estar en inglés).
Estilos y plantillas
Como ya se mencionó en ¿Qué son los controles?, puede personalizar los controles de muchas formas, incluida la creación de plantillas y estilos para los 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.
En la tabla siguiente, se proporciona una comparación detallada de los estilos y las plantillas para ayudarle a decidir si desea modificar el estilo o la plantilla de un control, o ambos.
| Característica | Estilos | Plantillas | ||||||
|---|---|---|---|---|---|---|---|---|
| Objetivo |
Mediante los estilos, puede modificar los valores predeterminados de las propiedades establecidas en el control al que se aplica el estilo. Por ejemplo, puede especificar colores predeterminados para el fondo, el borde y el primer plano de un control, como un botón. Estas propiedades de estilo pueden reemplazarse por los valores establecidos en el control cuando éste se dibuja en el área de diseño. Por ejemplo, si establece el color del fondo en azul en el estilo de un botón, el botón aparecerá en azul cuando se dibuje en el área de diseño, pero podrá cambiarlo. Sólo puede establecer propiedades ya existentes en el estilo. Por ejemplo, no puede establecer un valor predeterminado para una propiedad que pertenezca a una nueva parte que ha agregado a la plantilla. Por último, puede usar los estilos para especificar el comportamiento predeterminado de un control. Por ejemplo, en un estilo para un botón, puede especificar un desencadenador para que, cuando el usuario mueva el puntero del mouse sobre el botón, el color del fondo cambie. Estos cambios en las propiedades son instantáneos (no pueden animarse gradualmente). |
Mediante las plantillas, puede modificar la estructura del control al que se aplica la plantilla. Puede modificar una plantilla de control para reorganizar, agregar o eliminar los elementos (o partes) del control. Por ejemplo, puede agregar el diseño o la imagen del fondo a un control, como un botón. También puede modificar los valores de las propiedades (como el color del fondo) establecidas en el control al que se aplica la plantilla. Estos valores de plantillas no pueden reemplazarse por los valores establecidos en el control cuando éste se dibuja en el área de diseño. Sin embargo, puede usar el enlace de plantilla para establecer las propiedades de una plantilla de acuerdo con los valores de las propiedades del control cuando se dibuja en el área de diseño. Al modificar una plantilla, tiene acceso a más partes de un control que al modificar un estilo. Por ejemplo, puede cambiar la forma en que aparece una lista emergente en un cuadro combinado, o bien puede cambiar la apariencia del botón que desencadena la lista emergente en el cuadro combinado modificando la plantilla de elementos. Algunas plantillas están formadas por las siguientes partes:
Por último, puede especificar el comportamiento de cualquier parte nueva o existente de una plantilla mediante desencadenadores. Por ejemplo, puede especificar un desencadenador para que, cuando el usuario mueva el puntero del mouse sobre un botón, el color de una de las partes cambie. Estos cambios en las propiedades pueden ser instantáneos o animados para crear una transición suave.
|
||||||
| Modificar | Puede entrar en el modo de edición para un estilo de las siguientes formas:
Mediante el menú
Mediante el panel Recursos (para modificar un estilo existente)
|
Puede entrar en el modo de edición para una plantilla de control de las siguientes formas:
Mediante el menú
Mediante el panel Recursos (para modificar una plantilla existente)
|
||||||
| Aplicar | Puede aplicar un estilo existente a un control en el área de diseño de las siguientes formas:
Mediante el menú
Mediante el Panel biblioteca para dibujar un control con estilo en el área de diseño
|
Puede aplicar una plantilla existente a un control en el área de diseño de las siguientes formas:
Mediante el menú
Mediante el panel Recursos (para modificar una plantilla existente)
|
dos veces, ya que el primer clic le devolverá al modo de edición del estilo.Expression Blend incluye un conjunto de estilos y plantillas simples agrupados en un diccionario de recursos. Los diccionarios de recursos pueden usarse para diseñar un tema para la aplicación. Para obtener más información, vea Temas y estilos simples a continuación.
 |
Al modificar las plantillas y los estilos, hay algunas cosas que es necesario recordar para no romper la funcionalidad del control del sistema al que se aplica el estilo o la plantilla:
|
Temas y estilos simples
Un tema es un conjunto de estilos y plantillas que produce una apariencia coherente para los controles de la interfaz de usuario. Por ejemplo, Windows Presentation Foundation (WPF) usa un tema para las aplicaciones de WPF que se ejecutan en Windows XP® y otro tema distinto para las aplicaciones de WPF que se ejecutan en Windows Vista™. El motivo es que el mismo botón tendrá una apariencia diferente en cada uno de los dos sistemas operativos.
Para determinar la apariencia de un control (como un botón), una aplicación buscará en los siguientes lugares:
- Propiedades que se establecen en un control: por ejemplo, si quiere crear un botón en Expression Blend y después cambiar el color del fondo directamente en el botón. Al establecer una propiedad directamente en un control, se reemplaza cualquier valor que esa propiedad tenga establecido en cualquier otro sitio.
- Propiedades que se establecen en la plantilla o el estilo personalizado usado en un control: por ejemplo, si fuera a crear un botón en Expression Blend y, a continuación, modificar una copia de la plantilla para establecer el color del fondo en la plantilla. Se trata del color del fondo que se usará para el botón si la propiedad Background no se establece directamente en el botón. Puede definir los recursos dentro del documento que contiene el control, o bien puede definirlos en el nivel de la aplicación (con lo que estarán disponibles para todos los documentos de la aplicación). Los recursos del nivel de documento reemplazan a los recursos del nivel de aplicación.
- Propiedades que se establecen en la plantilla del sistema usada por un control: WPF determina la plantilla del sistema en función del tema (en otras palabras, en función del sistema operativo).
Puede crear de forma efectiva un tema mediante la creación de recursos de propiedades, estilos y plantillas en un archivo individual denominado diccionario de recursos. El uso de un diccionario de recursos permite volver a usar un tema en varias aplicaciones. También puede crear temas intercambiables si define varios diccionarios de recursos que proporcionen los mismos tipos de recursos, pero con diferentes valores. Por ejemplo, la aplicación Expression Blend usa distintos diccionarios de recursos para un tema oscuro y un tema claro, entre los que puede alternar haciendo clic en Opciones en el menú Herramientas y, a continuación, cambiando el Tema del Área de trabajo.
Para sus propias aplicaciones, Expression Blend proporciona un diccionario de recursos listo para usar denominado SimpleStyles.xaml que contiene un conjunto de estilos para controles comunes, como botones, cuadros de lista y otros. Puede obtener acceso a estos estilos en Simple Styles, en la ficha Controles del Panel biblioteca. Al usar uno de los estilos simples para dibujar un control en el área de diseño, se crea la versión del sistema del control y, simultáneamente, se aplica el estilo simple. Por ejemplo, si crea un Button del sistema en el área de diseño, el lenguaje de marcado de aplicaciones extensible (XAML) resultante será como el que aparece a continuación:
<Button Content="Button" ... />Si crea un SimpleButton en el área de diseño, el XAML resultante incluirá una referencia al estilo SimpleButton:
<Button Content="Button" Style="{DynamicResource SimpleButton}"... />
Después de agregar un control de estilo simple al área de diseño, se agrega el archivo del diccionario de recursos SimpleStyles.xaml al proyecto y se vincula al archivo app.xaml, de forma que los estilos se definirán en el ámbito de la aplicación. Puede ver todos los estilos en el panel Recursos. Para obtener ejemplos del uso de estilos simples, vea los temas enumerados en Estilos simples en este manual del usuario. Para obtener más información acerca de la administración de recursos, vea Aspectos básicos de los recursos en este manual del usuario.