Información general acerca de los controles

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

[!NOTA]

Para obtener una lista de los controles disponibles en los proyectos de Microsoft Silverlight 1.0, vea la sección acerca de los controles de Información general de Silverlight 1.0.

Expression Blend permite ir más allá del simple trabajo con controles WPF 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 le permite trabajar con controles visualmente en la mesa de trabajo y configurar su apariencia y comportamiento en el Panel Propiedades y en el Panel Interacción. Por ejemplo, puede agregar un control de botón 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 al hacer clic en el botón para agregar 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.

• 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 de WPF, vea Crear un recurso de estilo y Crear o editar una plantilla de control. Para obtener ejemplos de Silverlight 2, vea Crear una plantilla reutilizable para un control del sistema y Crear una máscara para un control en un proyecto Silverlight 2.

• 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 de WPF, vea Crear un nuevo método de control de eventos. Para obtener un ejemplo de Silverlight 2, vea Cargar una nueva página dinámicamente en la aplicación Silverlight 2.

• Diseñar sus propios controles personalizados y usarlos en Expression Blend. Para obtener ejemplos de WPF, vea Inténtelo: crear un control WPF personalizado y Inténtelo: Crear un control de usuario de WPF. Para obtener un ejemplo de Silverlight 2, vea Crear un nuevo control de usuario en un proyecto Silverlight 2.

Volver al principio

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 biblioteca, al que se obtiene acceso al hacer clic en el botón Panel biblioteca , situado en la parte inferior del Cuadro de herramientas. El cuadro de herramientas se encuentra en el lateral izquierdo de Expression Blend. Al seleccionar un elemento de la interfaz de usuario en el Panel biblioteca, el icono de ese elemento aparece sobre el botón Panel biblioteca, lo que permite volver a seleccionar fácilmente dicho elemento más adelante. Los elementos de la interfaz de usuario comunes aparecen sobre el botón Panel biblioteca para que pueda encontrarlos rápidamente.

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 de trazado . El icono de imagen  aparece en el Cuadro de herramientas después de seleccionar el control de imagen en el Panel biblioteca.

Del cuadro de 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 Objetos y escala de tiempo, el subrayado (_) se usa para identificar la tecla de acceso para el 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 (disponibles en proyectos de Silverlight 1.0)	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 Diseño. 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  (disponible en proyectos de Silverlight 1.0) 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 Información general sobre texto y tipografía. 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 editar una plantilla de control y Editar un estilo.	TextBox  TextBlock  (disponible en proyectos de Silverlight 1.0) 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 editar una plantilla de control 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 tema acerca de las familias de tipos (puede estar en inglés) en la sección de Windows Presentation Foundation (puede estar en inglés) de MSDN.

Volver al principio

Crear y modificar controles

Puede agregar un control a la mesa de trabajo; 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 la mesa de trabajo. 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 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, 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 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, es necesario activar dicho control haciendo doble clic en su nombre en 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  (disponible en proyectos de Silverlight 1.0) 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 Crear 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 Crear 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 Crear 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.

Volver al principio

Estilos y plantillas

Como ya se mencionó en Información general acerca de 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. Para obtener más información, vea Información general sobre estilos y plantillas.

Volver al principio