Información general sobre la apariencia

El cambio de la apariencia visual de un objeto es una tarea fundamental en Microsoft Expression Blend. Mediante las propiedades de Apariencia y Pinceles del panel Propiedades puede cambiar el color del trazo, el color del relleno, la opacidad y la visibilidad de un objeto seleccionado. Según el tipo de objeto que haya seleccionado en el proyecto de Expression Blend, las propiedades de las categorías Apariencia y Pinceles ajustan dinámicamente el contenido del objeto para reflejar los atributos visuales correspondientes.

Propiedades comunes de apariencia

Una gran parte de los cambios en la apariencia de un objeto tiene que ver con la aplicación de pinceles a propiedades concretas. En la siguiente tabla se describen estas propiedades.

Propiedad	Descripción
Fill	Establece el pincel que se aplica al interior de una forma o trazado.
Stroke	Establece el pincel que se aplica al contorno (borde) de una forma o trazado.
Background	Establece el pincel que se aplica al fondo de un objeto. Esta propiedad se suele aplicar al fondo de los controles que muestran texto, como el control Button o TextBlock.
Foreground	Establece el pincel que se aplica al primer plano de un objeto. Esta propiedad se suele aplicar al texto que se muestra en controles como Button o TextBlock.
BorderBrush	Establece el pincel que se aplica al borde de determinados controles.
Opacity	Establece la opacidad de todo el objeto.
Visibility	Determina si un objeto está visible u oculto en tiempo de ejecución. Los objetos secundarios también pueden verse afectados por la visibilidad del elemento primario.
OpacityMask	Establece un pincel cuyo color se omite y cuya opacidad se transfiere al objeto con máscara. Donde la máscara de opacidad sea opaca, el objeto con máscara será opaco; donde la máscara de opacidad sea transparente, el objeto con máscara será transparente.

Volver al principio

Pinceles

Los pinceles se usan para establecer la apariencia visual de un objeto en la mesa de trabajo. Por ejemplo, puede usar un pincel azul sólido para el relleno de un rectángulo (como en la primera imagen a continuación). Los pinceles se incluyen con diversas formas, desde pinceles de color sólido simple o pinceles de degradado hasta pinceles de diseño en mosaico más complejos. En la tabla siguiente se describen los pinceles disponibles en Expression Blend. Además, puede usar la ficha Sin pincel para quitar todo el color de la propiedad seleccionada. Por ejemplo, para crear un contorno de un rectángulo, puede establecer el Relleno del rectángulo en Sin pincel y establecer el Trazo en un Pincel de color sólido.

Pincel	Apariencia			Descripción
Pincel de color sólido				Compuesto por un solo color.
Pincel de degradado lineal				Compuesto por una degradación de color lineal.
Pincel de degradado radial				Compuesto por una degradación de color radial.
Pincel de imagen (sólo WPF y Silverlight 2)				Creado a partir de una imagen. De izquierda a derecha, como se muestra aquí: el pincel de imagen inicial, el pincel de imagen en mosaico y el pincel de imagen volteado.
Pincel de dibujo (sólo WPF y Silverlight 2)				Creado a partir de un dibujo vectorial. De izquierda a derecha, como se muestra aquí: el pincel con dibujo inicial, el pincel con dibujo en mosaico y el pincel con dibujo volteado.
Pincel visual (sólo WPF y Silverlight 2)				Creado a partir de un control, por ejemplo, un botón. De izquierda a derecha, como se muestra aquí: el botón inicial y el pincel con el Modo de mosaico establecido en Mosaico. Tenga en cuenta que los pinceles visuales pueden reducir el rendimiento de la aplicación que se está ejecutando debido a la complejidad del control que se usa para crear dichos pinceles.

Volver al principio

Recursos del pincel

Después de crear un pincel en un objeto, puede convertir el pincel en un recurso que puede aplicar más tarde a otros objetos.

[!NOTA]

Los recursos no son compatibles con Microsoft Silverlight 1.0.

Los recursos del pincel no se restringen a las propiedades de color o de un solo pincel. Puede crear un recurso del pincel mediante el uso de varios objetos en la mesa de trabajo. Puede incluso crear un pincel denominado VisualBrush, que actualiza su apariencia en tiempo de ejecución si los objetos a partir de los cuales se creó cambian en tiempo de ejecución.

Puede crear diccionarios de recursos para los pinceles para poder volver a usarlos en el proyecto o incluso en otros proyectos.

Para obtener más información, vea Crear un recurso de pincel o de color y Crear o modificar un recurso de pincel de dibujo. Para obtener información acerca de los recursos, vea Información general de recursos.

Volver al principio

Color y espacios de colores

Expression Blend incluye un editor de colores en Pinceles, en el panel Propiedades. El editor de colores también aparece si modifica un recurso del pincel en el panel Recursos. El editor de colores tiene los cuatro espacios de colores siguientes, así como un modo hexadecimal (#AARRGGBB):

• RGB   rojo (0-255), verde (0-255), azul (0-255)

• HLS   matiz (rueda de colores de 360 grados), claridad (del 0 al 100 por ciento), saturación (del 0 al 100 por ciento)

• HSB   matiz (rueda de colores de 360 grados), saturación (del 0 al 100 por ciento), luminosidad (del 0 al 100 por ciento)

• CMYK   cian (del 0 al 100 por ciento), magenta (del 0 al 100 por ciento), amarillo (del 0 al 100 por ciento), negro (del 0 al 100 por ciento)

Para cambiar entre los espacios de colores, haga clic en una de las letras subrayadas en el espacio de colores actual para ver un menú emergente de los espacios de colores alternativos.

Volver al principio

Herramientas Cuentagotas y Cubo de pintura

Expression Blend proporciona dos herramientas diseñadas especialmente para copiar y aplicar atributos entre los objetos. Las siguientes propiedades se copian o aplican durante las acciones Cuentagotas y Cubo de pintura:

• Pinceles   Foreground, Background, Border Brush, Fill, Stroke y Opacity Mask

• Apariencia   Opacity, Stroke Thickness, Stroke Miter Limit, Stroke Start Line Cap, Stroke End Line Cap, Stroke Line Join y Stroke Dash Cap

• Texto   Font Family, Font Size, Font Weight, Font Style, Text Decorations, Line Height, Text Indent y Text Alignment

	Herramienta Cuentagotas	Copia la apariencia de otro objeto en el objeto u objetos seleccionados actualmente.
	Herramienta Cubo de pintura	Copia la apariencia del objeto u objetos seleccionados actualmente en otro objeto.

Para obtener más información acerca las herramientas Cuentagotas y Cubo de pintura, vea Copiar o aplicar atributos a un objeto.

Un Cuentagotas de color  aparece también en la esquina inferior derecha del Editor de colores cuando se modifica un Pincel de color sólido  o un delimitador de degradado en un Pincel de degradado . Con este cuentagotas seleccionado, puede seleccionar una muestra de color de cualquier parte del escritorio y aplicarla al pincel seleccionado. Puede presionar la tecla ESC en cualquier momento para cancelar el cuentagotas.

Volver al principio

Degradados

Los degradados permiten aplicar una combinación graduada de colores a un objeto para crear una degradación de color suave y proporcionar al objeto mayor profundidad. Quizás desee usar ese objeto como un fondo en el que la parte izquierda del objeto contenga un color sólido que se atenúe de forma gradual hasta el blanco en la parte derecha. Esto permite crear dos áreas distintas en un objeto que, de lo contrario, sería plano.

Haga clic en Pincel de degradadolineal y Degradado radial en Pinceles en el panel Propiedades, para cambiar entre los dos tipos de pinceles de degradado.

Puede usar los dos tipos de pinceles de degradado para crear rellenos degradados, trazos degradados, texto con un degradado para la propiedad Foreground o fondos degradados para cualquier elemento que tenga una propiedad Background. Al aplicar un degradado a una propiedad de apariencia, verá que en el control deslizante de degradado aparecen pequeños iconos , denominados delimitadores. Puede cambiar el color de cada delimitador de degradado y agregar tantos delimitadores como desee al control deslizante de degradado si hace clic en dicho control deslizante. También puede quitar fácilmente delimitadores que ya no necesite. Para ello, debe arrastrarlos fuera de la parte inferior del control deslizante de degradado (arrastrar los delimitadores fuera de los laterales o del borde superior del control deslizante no los quita).

También puede establecer algunas opciones cuando use un pincel de degradado. Haga clic en el botón Opciones situado en la parte inferior del editor de colores para establecer el modo de degradado en Relleno, Reflejar (crea un reflejo del relleno degradado) o Repetir (repite el relleno degradado). Estas opciones funcionan para degradados lineales y radiales cuando se usa la herramienta Transformación del pincel para modificar el pincel. Para obtener más información, vea la sección Herramienta Transformación del pincel a continuación.

Volver al principio

Herramienta Transformación del pincel

Para transformar el relleno, el trazo, la máscara de opacidad u otro pincel que se aplique a un objeto, seleccione la propiedad de pincel en el panel Propiedades y, a continuación, seleccione la herramienta Transformación del pincel en el cuadro de herramientas. De este modo aparecerá una flecha de transformación del pincel en la mesa de trabajo que puede modificar con el puntero del mouse. Si está usando un pincel de degradado, los puntos finales de la flecha de transformación se corresponden con los delimitadores de degradado de cualquier extremo de la barra cromática. Puede cambiar el comportamiento de la herramienta Transformación del pincel de las maneras siguientes:

• Mantenga presionada la tecla MAYÚS al arrastrar un extremo para restringir el movimiento a lo largo de la línea recta entre los extremos.

• Mantenga presionada la tecla MAYÚS al mover la flecha completa para restringir el movimiento al plano X o Y.

• Mantenga presionada la tecla MAYÚS al girar un extremo para ajustar cada 15 grados.

• Mantenga presionada la tecla ALT al arrastrar un extremo para mover ambos extremos al mismo tiempo manteniendo la posición del punto central.

Las siguientes imágenes muestran la apariencia de un objeto rectángulo después de aplicar diversas transformaciones al pincel de degradado de la propiedad Fill.

Transformaciones aplicadas al pincel de degradado lineal de un rectángulo

Transformaciones aplicadas al pincel de degradado radial de un rectángulo

Si lo desea, puede establecer las propiedades que aparecen al hacer clic en el botón Opciones situado en Pinceles, en el panel Propiedades. En la imagen anterior aparece seleccionada la opción Relleno. Si seleccionó la opción Reflejar o Repetir y, a continuación, hizo que la flecha de transformación fuese más corta que el objeto, verá un efecto ondulado.

Puede transformar tipos de pincel distintos de los pinceles de degradado. Para obtener más información acerca de las transformaciones del pincel, vea Transformar un pincel de degradado o de diseño en mosaico.

Volver al principio

Recorte

Cuando transforme un pincel, a veces se recortarán partes del objeto (es decir, desaparecerán partes fuera del rectángulo de selección). Puede corregir problemas de recortes de las siguientes maneras:

• Desactive la casilla de la propiedad ClipToBounds en Apariencia, en el panel Propiedades.

• Use las propiedades de la categoría LayoutTransform en lugar de RenderTransform en Transformación, en el panel Propiedades. Esto resulta especialmente útil al transformar un pincel visual.

Volver al principio

Trazos

Los trazos son los bordes de los objetos. Puede cambiar el pincel aplicado (sólido, de degradado o de diseño en mosaico), la opacidad, el ancho y el límite angular del trazo de un objeto, así como los estilos de unión de esquina y extremo. El trazo de un objeto siempre se aplica sobre un relleno, incluso aunque no se haya aplicado ningún relleno a ese objeto. Para realizar cualquier cambio en el trazo de un objeto, es necesario que Trazo esté seleccionado en la lista de Pinceles, en el panel Propiedades.

• **Ancho del trazo  ** El ancho de un trazo de un objeto se mide en píxeles (o en unidades independientes del dispositivo, que son aproximadamente 1/96 de pulgada) y puede tener un valor entre 0 y la mitad del ancho o del alto de la forma. En general, una vez que el grosor del trazo alcanza la mitad del ancho y del alto de la forma, el trazo cubre todo el relleno. Puede establecer el valor del ancho del trazo mediante la propiedad StrokeThickness en Apariencia, en el panel Propiedades.

• **Uniones de esquina  ** En objetos que tienen esquinas en ángulo, como los rectángulos, puede cambiar la apariencia del trazo en cada vértice mediante la aplicación de uno de los tres estilos de unión de esquina: Unión angular, Unión redondeada y Unión biselada. Puede establecer el estilo de unión de esquina mediante la propiedad StrokeLineJoin en Apariencia, en el panel Propiedades.

  

• **Límite angular  ** El límite angular controla la longitud máxima que puede alcanzar el vértice de una unión angular antes de que se cuadre automáticamente en una unión biselada. Puede establecer el límite angular mediante la propiedad StrokeMiterLimit en Apariencia, en el panel Propiedades. En la siguiente imagen se muestran tres ángulos con el valor 40 en StrokeThickness y con el valor 1 en StrokeMiterLimit, 2,2 y 4 . El tamaño del ángulo y el grosor del trazo determinan el efecto visual del límite angular.

  

• **Extremos  ** Para trazados que contienen extremos no conectados, como las líneas, puede cambiar la apariencia del trazo en cada extremo mediante la aplicación de uno de los cuatro estilos de extremo: Extremo plano , Extremo redondeado , Extremo cuadrado y Extremo triangular . Puede establecer el estilo de extremo mediante las propiedades StrokeEndLineCap o StrokeStartLineCap en Apariencia, en el panel Propiedades.

  

Volver al principio

Opacidad y visibilidad

Cuando se reduce la opacidad de un objeto, se aumenta su transparencia para poder ver otros objetos situados detrás. La opacidad se controla mediante un canal alfa que almacena toda la información de transparencia de un objeto, degradado o máscara de opacidad. En la siguiente tabla se describen tres posibles métodos que se pueden seleccionar para cambiar la opacidad del objeto.

Método	Resultados
Opacidad   Cambia la transparencia del objeto completo, incluidos todos los atributos visuales del objeto. En la imagen situada a la derecha se muestra el valor de opacidad establecido en el 60 por ciento.
Transparencia   Establece el valor alfa (A) de un atributo de pincel individual de un objeto, como el relleno o el trazo, en ligeramente transparente sin tener que cambiar todos los atributos de un solo objeto. En la imagen situada a la derecha se muestra que sólo el relleno de la elipse es más transparente, ya que el valor alfa del relleno está establecido en el 50 por ciento. El trazo de la elipse permanece en el 100 por ciento.
Visibilidad   Permite ocultar o mostrar un objeto en diferentes momentos. Esto es especialmente eficaz en la animación, cuando no se desea quitar un objeto completamente de la mesa de trabajo. En la imagen situada a la derecha, el objeto izquierdo que tiene un relleno azul y un trazo negro grueso y que forma parte de las dos imágenes precedentes de esta tabla ahora está establecido como Hidden.

Volver al principio

Efectos de imagen

Los efectos de imagen son operaciones de procesamiento de píxeles simples.

[!NOTA]

Los efectos de imagen no son compatibles con Silverlight 1.0 o Silverlight 2.

[!NOTA]

En aplicaciones de Windows Presentation Foundation (WPF) (como las creadas con Expression Blend), por píxeles se entiende píxeles independientes del dispositivo o unidades independientes del dispositivo, que son equivalentes al tamaño de un píxel en un monitor configurado con una resolución de pantalla de 96 puntos por pulgada. Cada unidad mide aproximadamente 1/96 de pulgada con independencia del tamaño del monitor o de la resolución de pantalla.

En la tabla siguiente se describe cada efecto de imagen que se encuentra disponible en Expression Blend. Los efectos de imagen están disponibles en Apariencia, en el panel Propiedades, cuando se selecciona un objeto, como un rectángulo o un botón. Cada efecto de imagen contiene subpropiedades; por ejemplo, la subpropiedad Radio del efecto de imagen Desenfoque. El procesamiento de píxeles que se requiere para representar efectos de imagen (y el objeto al que se aplican los efectos) se produce en tiempo de ejecución. Por este motivo, no se deben aplicar efectos de imagen a animaciones o elementos visuales grandes, ya que esto puede reducir el rendimiento de la aplicación. Para obtener información acerca de cómo establecer efectos de imagen, vea Agregar un efecto de imagen a un objeto.

Efecto	Apariencia	Descripción
Ninguno		Botón sin ningún efecto de imagen aplicado.
Desenfoque		Simula un objeto que se mira a través de una lente desenfocada.
Iluminado exterior		Crea un halo de color alrededor del perímetro de un objeto.
Sombra paralela		Crea una sombra detrás de un objeto.
Bisel		Crea un bisel que eleva la superficie de una imagen según una curva especificada.
Relieve		Crea un mapa de rugosidad de un elemento visual para dar la impresión de profundidad y textura derivadas de una fuente de luz artificial.

Volver al principio