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:
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:
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 .png "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 Pluma.png "Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(es-es,Expression.40).png")
genera un objeto Path.png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(es-es,Expression.40).png")
. El icono Image.png "Cc294749.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
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(es-es,Expression.40).png")
.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. |
.png "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. |
.png "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. |
.png "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. |
.png "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 Ellipse Path (generado por las herramientas de dibujo Línea |
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 Dock Grid Stack Wrap |
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 Label 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 |
.png "Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(es-es,Expression.40).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(es-es,Expression.40).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(es-es,Expression.40).png")
, Pluma .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(es-es,Expression.40).png")
).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(es-es,Expression.40).png")
.png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(es-es,Expression.40).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(es-es,Expression.40).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(es-es,Expression.40).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(es-es,Expression.40).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(es-es,Expression.40).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(es-es,Expression.40).png")
.png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(es-es,Expression.40).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(es-es,Expression.40).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(es-es,Expression.40).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(es-es,Expression.40).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(es-es,Expression.40).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(es-es,Expression.40).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(es-es,Expression.40).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(es-es,Expression.40).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(es-es,Expression.40).png")
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 .png "Cc294749.xtlink_newWindow(es-es,Expression.40).png")
(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 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 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 |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(es-es,Expression.40).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(es-es,Expression.40).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(es-es,Expression.40).png")
.png "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 .
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.