Establecer colores, pinceles y máscaras en Blend

El cambio de la apariencia visual de un objeto es una tarea fundamental en Blend para Visual Studio. 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 seleccione en el proyecto de Blend, las propiedades de las categorías Apariencia y Pinceles se ajustan dinámicamente al contenido del objeto para reflejar los atributos visuales correspondientes.

Propiedades comunes de apariencia

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

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 Blend. Además, puede usar Sin pincel para quitar todo el color de la propiedad seleccionada. Por ejemplo, para crear un contorno de un rectángulo, puede establecer la propiedad Fill del rectángulo en Sin pincel y establecer la propiedad Stroke 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				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 con dibujo				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				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.

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.

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 en Blend y Modificar la apariencia de un objeto mediante el uso de pinceles en Blend.

Para obtener información acerca de los recursos, vea Crear recursos reutilizables en Blend.

Color y espacios de colores

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.

Herramientas Cuentagotas y Cubo de pintura

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 en Blend.

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.

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 degradado  en Pinceles en el panel Propiedades para crear un degradado. Haga clic en Degradado lineal  y Degradado radial  bajo el Editor de colores para cambiar entre los dos tipos de pinceles de degradado. Puede usar los dos tipos de pinceles de degradado para crear rellenos de degradado, trazos de degradado, texto con un degradado para la propiedad Foreground o fondos de degradado para cualquier objeto que tenga una propiedad Background.

Cuando se selecciona Pincel de degradado, el Cuentagotas de color del Editor de colores se convierte en un Cuentagotas de degradado . Al mantener el mouse sobre un color dentro de Blend o en el escritorio con Cuentagotas de degradado seleccionado, el color aparece como una vista previa en el delimitador de color seleccionado. Al hacer clic en un color con el Cuentagotas de degradado seleccionado, el color se aplica al delimitador de degradado seleccionado. Además, puede arrastrar el Cuentagotas de degradado a un degradado existente, dentro de Blend o en el escritorio, para aplicar el degradado al objeto existente.

Arrastrar el Cuentagotas de degradado por un degradado existente duplica el degradado en Blend

Al aplicar un degradado a un objeto, aparecen los iconos de los delimitadores de degradado . 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 modificar el valor de desplazamiento de un delimitador de degradado seleccionado; para ello, arrastre los delimitadores por la línea de degradado o modifique el valor del campo Desplazamiento del delimitador de degradado seleccionado.

Para invertir un degradado, haga clic en Invertir delimitadores de degradado . Para ir a los delimitadores de degradado anterior y siguiente, use las flechas Seleccionar delimitador de degradado anterior y Seleccionar delimitador de degradado siguiente .

Para aplicar un degradado a varios objetos, seleccione todos los objetos a los que desea aplicar el degradado y, a continuación, aplique el degradado.

Haga clic en Mostrar propiedades avanzadas  para ver las propiedades adicionales que pueden modificarse directamente en el panel Propiedades.

Para el pincel de degradado lineal, puede modificar las siguientes propiedades en el panel Properties:

• StartPoint   Especifica las coordenadas del punto inicial del degradado lineal.

• EndPoint   Especifica las coordenadas del punto final del degradado lineal.

• MappingMode   Especifica si el pincel de degradado tiene una posición absoluta o una posición relativa al rectángulo de selección.

• SpreadMethod   Especifica cómo dibujar un degradado que empieza o acaba dentro del rectángulo de selección. Pad extiende los colores de los delimitadores de degradado más exteriores a los bordes del objeto. Reflect crea un reflejo del relleno de degradado. Repeat repite el relleno de degradado.

• Opacidad   Especifica la opacidad del pincel de degradado.

Para el pincel de degradado radial, puede modificar las siguientes propiedades en el panel Properties:

• GradientOrigin   Especifica las coordenadas del principio de un degradado.

• Center   Especifica el degradado radial más exterior.

• RadiusX   Especifica el radio horizontal del círculo más exterior del degradado radial.

• RadiusY   Especifica el radio vertical del círculo más exterior del degradado radial.

• MappingMode   Especifica si el pincel de degradado tiene una posición absoluta o una posición relativa al rectángulo de selección.

• SpreadMethod   Especifica cómo dibujar un degradado que empieza o acaba dentro del rectángulo de selección. Pad extiende los colores de los delimitadores de degradado más exteriores a los bordes del objeto. Reflect crea un reflejo del relleno de degradado. Repeat repite el relleno de degradado.

• Opacidad   Especifica la opacidad del pincel de degradado.

En ambos tipos de pincel de degradado, también puede modificar la propiedad RelativeTransform del panel Properties si hace clic en las siguientes fichas del cuadro RelativeTransform y modifica los valores asociados:

• Trasladar

• Girar

• Escala

• Sesgar

• Voltear

También puede modificar los pinceles de degradado tanto lineal como radial en la mesa de trabajo por medio de la Herramienta de degradado  o Transformación del pincel . Para obtener más información, vea las secciones "Herramienta de degradado" y "Herramienta Transformación del pincel" siguientes.

Herramienta de degradado

Para modificar el relleno, el trazo o la máscara de opacidad de un pincel de degradado que se aplica a un objeto directamente en la mesa de trabajo, seleccione la propiedad de pincel en el panel Propiedades y, a continuación, seleccione la Herramienta de degradado  en el panel Herramientas.

Aparecerá una flecha en la mesa de trabajo que puede utilizar para modificar el degradado. El punto inicial y final de la flecha se corresponden con los delimitadores de degradado de los extremos de la barra de colores. Los delimitadores de degradado se indican mediante círculos con bordes azules y rellenos interiores iguales que el degradado.

Flecha de degradado lineal

Flecha de degradado radial

Al hacer clic en un delimitador de degradado, éste queda seleccionado, y la selección se indica con un borde azul grueso. Si hace doble clic en el delimitador de degradado, se muestra el selector de color, desde el que puede modificar el color del delimitador de degradado seleccionado.

Para agregar un delimitador de degradado, haga clic en cualquier punto de la flecha. Para quitar un delimitador de degradado, haga clic en el círculo que indica un delimitador de degradado y arrástrelo para alejarlo de la flecha.

También puede modificar las propiedades de degradado de las siguientes maneras:

• Mantenga presionada la tecla MAYÚS al arrastrar el punto inicial o el punto final para limitar el movimiento por la línea recta entre el punto inicial y el punto final.

• 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 punto inicial o final para ajustar cada 15 grados.

• Mantenga presionada la tecla ALT al arrastrar un punto inicial o final para mover ambos puntos al mismo tiempo y mantener la posición del punto central.

Herramienta Transformación del pincel

La herramienta Transformación del pincel  modifica la propiedad RelativeTransform de un recurso de pincel, incluida la propiedad RelativeTransform para degradados lineales y radiales. La herramienta Transformación del pincel modifica el pincel que está seleccionado en el panel Pinceles y se aplica al objeto que está seleccionado en la mesa de trabajo.

Para modificar la transformación de un pincel que se aplica a un objeto directamente en la mesa de trabajo, seleccione la propiedad de pincel en el panel Propiedades y, a continuación, seleccione Transformación del pincel  en el panel Herramientas.

Aparece un control Adorner (borde azul) alrededor del objeto. Con el objeto seleccionado con la herramienta Transformación del pincel, ahora puede modificar el objeto seleccionado de las siguientes maneras:

• Para mover un pincel, arrástrelo a cualquier lugar dentro del objeto. Esto corresponde a la ficha Trasladar del cuadro RelativeTransform del panel Propiedades.

• Para girar un pincel, coloque el puntero fuera de cualquier esquina del contorno de selección que rodea el objeto y arrastre cuando el puntero se convierta en un manipulador de giro . Esto corresponde a la ficha Girar del cuadro RelativeTransform del panel Propiedades.

• Para cambiar la escala de un pincel de diseño en mosaico o un pincel de degradado radial, coloque el puntero en cualquier manipulador del lateral o la esquina del objeto y arrastre. Esto corresponde a la ficha Escalar del cuadro RelativeTransform del panel Propiedades.

• Para sesgar un pincel, coloque el puntero fuera de un manipulador lateral y arrastre cuando el puntero se convierta en un manipulador de sesgo . Esto corresponde a la ficha Sesgar del cuadro RelativeTransform del panel Propiedades.

También puede voltear una transformación. En el panel Propiedades de la categoría Pinceles, haga clic en el botón Mostrar propiedades avanzadas . En el cuadro RelativeTransform, haga clic en la ficha Voltear y, a continuación, en Voltear eje X o Voltear eje Y.

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.

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. Seleccione una de estas opciones:

• 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 comprendido 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 los valores 1 , 2,2 y 4 en StrokeMiterLimit. 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 la propiedad StrokeEndLineCap o StrokeStartLineCap en Apariencia, en el panel Propiedades.

  

• StrokeDashArray   StrokeDashArray es un trazo con un patrón de guiones y espacios. StrokeDashCap y StrokeDashOffset son propiedades que se aplican específicamente a StrokeDashArray.

  La imagen siguiente muestra un único rectángulo con un valor StrokeDashArray de 5 4 (el primer valor especifica la longitud del guión y el segundo valor especifica la longitud del espacio), un valor StrokeDashCap de Round y un valor StrokeDashOffset (la distancia dentro del patrón de guiones en que empieza un guión) de 2.

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
Opacity   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.
Transparency   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.
Visibility   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.

Vea también

Conceptos

Aplicar efectos en Blend