Usar pinceles para pintar fondos, primeros planos y esquemas

  • Artículo

Usa los objetos Brush para pintar los interiores y los contornos del texto, los controles y las formas XAML, de modo que estén visibles en la interfaz de usuario de la aplicación.

API importantes: Clase Brush

Introducción a los pinceles

Para pintar un objeto Shape, texto o partes de un objeto Control que se muestra en el lienzo de la aplicación, establece la propiedad Fill del objeto Shape o Background y las propiedades Foreground de un objeto Control en el valor Brush.

Los diferentes tipos de pinceles son:

Pinceles de color sólido

Un objeto SolidColorBrush pinta un área con un único Color, como rojo o azul. Este es el pincel más básico. En XAML hay tres maneras de definir un objeto SolidColorBrush y el color que especifica: nombres de color predefinidos, valores de color hexadecimales o la sintaxis de los elementos de las propiedades.

Nombres de color predefinidos

Puedes usar un nombre de color predefinido, como Yellow o Magenta. Hay 256 colores con nombre disponibles. El analizador XAML convierte el nombre del color en una estructura Color con los canales de color correctos. Los 256 colores con nombre se basan en los nombres de colores X11 de la especificación de hojas de estilo CSS de nivel 3 (CSS3), por lo que es posible que ya conozcas esta lista de colores con nombre si tienes experiencia en desarrollo o diseño web.

El ejemplo siguiente establece la propiedad Fill de un objeto Rectangle en el color predefinido Red.

<Rectangle Width="100" Height="100" Fill="Red" />

Objeto SolidColorBrush representado

SolidColorBrush aplicado a un rectángulo

Si defines un objeto SolidColorBrush mediante programación en lugar de usar XAML, cada color con nombre está disponible como un valor de propiedad estático de la clase Colors. Por ejemplo, para declarar un valor Color de un objeto SolidColorBrush para representar el color con nombre "Orchid", establece el valor de Color en el valor estático Colors.Orchid.

Valores de color hexadecimales

Puedes usar una cadena de formato hexadecimal para declarar valores precisos de color de 24 bits con un canal alfa de 8 bits para un objeto SolidColorBrush. Dos caracteres del intervalo 0 a F definen cada valor de componente y el orden de los valores de componente de la cadena hexadecimal es: canal alfa (opacidad), canal rojo, canal verde y canal azul (ARGB). Por ejemplo, el valor hexadecimal "#FFFF0000" define rojo totalmente opaco (alpha="FF", red="FF", green="00" y blue="00").

En este ejemplo xaml se establece la propiedad Fill de un rectángulo en el valor hexadecimal "#FFFF0000" y se proporciona un resultado idéntico al uso del color Colors.Red con nombre.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Sintaxis de elemento de propiedad

Puedes usar la sintaxis de los elementos de las propiedades para definir un objeto SolidColorBrush. Esta sintaxis es más detallada que los métodos anteriores, pero puedes especificar valores de propiedades adicionales en un elemento, como el valor de Opacity. Para obtener más información sobre la sintaxis XAML, incluida la sintaxis de los elementos de las propiedades, consulta Introducción a XAML y Guía de sintaxis XAML.

En los ejemplos anteriores, el pincel se crea de forma implícita y automática, como parte de un método abreviado deliberado del lenguaje XAML que ayuda a simplificar las definiciones de la interfaz de usuario en los casos más comunes. El ejemplo siguiente crea un objeto Rectangle y crea explícitamente el objeto SolidColorBrush como un valor de elemento para una propiedad Rectangle.Fill. El objeto Color de SolidColorBrush se establece en Blue y el objeto Opacity se establece en 0,5.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

Pinceles de degradado lineal

Un objeto LinearGradientBrush pinta un área con un degradado que se define a lo largo de una línea. Esta línea se denomina eje de degradado. Los colores del degradado y su ubicación en el eje de degradado se especifican con objetos GradientStop. De manera predeterminada, el eje de degradado va de la esquina superior izquierda a la esquina inferior derecha de la superficie que pinta el pincel, lo que produce un sombreado en diagonal.

El objeto GradientStop es el bloque de creación básico de un pincel de degradado. Un delimitador de degradado especifica que el objeto Color del pincel se encuentra en un objeto Offset a lo largo del eje de degradado, cuando el pincel se aplica a la superficie que se está pintando.

El color del delimitador de degradado se especifica por medio de su propiedad Color. El color se puede establecer usando un nombre de color predefinido o mediante valores ARGB hexadecimales.

La propiedad Offset de un objeto GradientStop especifica la posición de cada objeto GradientStop en el eje de degradado. Un objeto Offset es de tipo double con valores entre 0 y 1. Un objeto Offset con un valor de 0 sitúa el objeto GradientStop al principio del eje de degradado; es decir, junto a su StartPoint. Un objeto Offset con un valor de 1 sitúa el objeto GradientStop en su EndPoint. Como mínimo, un objeto LinearGradientBrush debe tener dos valores de GradientStop, en los que cada objeto GradientStop debe especificar un valor de Color distinto y tener un valor de Offset entre 0 y 1.

En este ejemplo se crea un degradado lineal con cuatro colores y se usa para pintar un objeto Rectangle.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

El color de cada punto entre los delimitadores de degradado se interpola linealmente como una combinación del color especificado por los dos delimitadores de degradado limítrofes. En la imagen siguiente, se resaltan los delimitadores de degradado del ejemplo anterior. Los círculos marcan la posición de los delimitadores de degradado y la línea punteada muestra el eje de degradado.

Diagrama que representa los delimitadores de degradado del 1 al 4 a partir de la esquina superior izquierda del diagrama y hacia abajo y hacia la derecha hasta que llega a la esquina inferior derecha del diagrama.

Combinación de colores especificada por los dos delimitadores de degradado

Para cambiar la línea en la que se sitúan los delimitadores de degradado, establece las propiedades StartPoint y EndPoint en valores distintos a los valores de inicio predeterminados, (0,0) y (1,1). Si cambias los valores de coordenadas de StartPoint y EndPoint, puedes crear degradados horizontales o verticales, invertir el sentido de degradado o condensar la extensión del degradado para aplicarlo en un área más reducida que la superficie pintada completa. Para condensar el degradado, debes establecer los valores de StartPoint o EndPoint en un valor entre 0 y 1. Por ejemplo, si deseas un degradado horizontal en el que toda la atenuación se produzca en la mitad izquierda del pincel y el lado derecho sea sólido con el último color de GradientStop, debes especificar un valor de StartPoint de (0,0) y un valor de EndPoint de (0.5,0).

Usar herramientas para hacer degradados

Ahora que ya sabes cómo funcionan los degradados lineales, puedes usar Visual Studio o Blend para crear estos degradados con facilidad. Para crear un degradado, selecciona el objeto al que deseas aplicar un degradado en la superficie de diseño o en la vista XAML. Expande la opción Pincel y selecciona la pestaña Degradado lineal.

Creación de un degradado lineal con Visual Studio

Creación de un degradado lineal con Visual Studio

Ahora puedes cambiar los colores de los delimitadores de degradado y deslizar sus posiciones con la barra situada en la parte inferior. Para agregar nuevos delimitadores de degradado, haz clic en la barra. Para quitar delimitadores, arrástralos fuera de la barra (consulta la siguiente captura de pantalla).

Barra situada en la parte inferior de la ventana de propiedades que controla los delimitadores de degradado

Control deslizante de configuración del degradado

Pinceles del degradado radial

Se dibuja un objeto RadialGradientBrush en una elipse definida por las propiedades Center, RadiusX y RadiusY. Los colores del degradado se inician en el centro de la elipse y terminan en el radio.

Los colores del degradado radial se definen según los delimitadores de color agregados a la propiedad de colección GradientStops. Cada delimitador de degradado especifica un color y un desplazamiento a lo largo del degradado.

El origen del degradado se establece de manera predeterminada en el centro y se puede desplazar con la propiedad GradientOrigin.

MappingMode define si las propiedades Center, RadiusX, RadiusY y GradientOrigin representan coordenadas relativas o absolutas.

Cuando MappingMode se establece en RelativeToBoundingBox, los valores X e Y de las tres propiedades se tratan como relativos en los límites del elemento, en que (0,0) representa la parte superior izquierda, (1,1) representa la parte inferior derecha de los límites del elemento para las propiedades Center, RadiusX y RadiusY, y (0,0) representa el centro de la propiedad GradientOrigin.

Cuando MappingMode se establece en Absolute, los valores X e Y de las tres propiedades se tratan como coordenadas absolutas dentro de los límites del elemento.

En este ejemplo se crea un degradado lineal con cuatro colores y se usa para pintar un objeto Rectangle.

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

El color de cada punto entre los delimitadores de degradado se interpola de forma radial como una combinación del color especificado por los dos delimitadores de degradado. En la imagen siguiente, se resaltan los delimitadores de degradado del ejemplo anterior.

Captura de pantalla de un degradado radial.

Delimitadores de degradado

Pinceles de imagen

Un objeto ImageBrush pinta una superficie con una imagen que proviene de un origen de archivo de imagen. La propiedad ImageSource se establece con la ruta de acceso de la imagen que se va a cargar. Normalmente, el origen de imagen proviene de un elemento Content que forma parte de los recursos de la aplicación.

De manera predeterminada, un objeto ImageBrush amplía su imagen para rellenar completamente la superficie pintada, lo que puede distorsionar la imagen si las relaciones de aspecto de dicha superficie y de la imagen son diferentes. Para cambiar este comportamiento puedes cambiar la propiedad Stretch de su valor predeterminado Fill a None, Uniform o UniformToFill.

El ejemplo siguiente crea un objeto ImageBrush y establece el objeto ImageSource en una imagen llamada licorice.jpg que debes incluir como un recurso en la aplicación. A continuación, el objeto ImageBrush pinta la superficie definida por una forma Ellipse.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Objeto ImageBrush representado.

Objeto ImageBrush representado

Tanto ImageBrush como Image hacen referencia a un archivo de origen de imagen mediante un identificador de recursos uniforme (URI); el archivo de origen de imagen utiliza varios formatos de archivo posibles. Estos archivos de origen de imagen se especifican como URI. Para más información sobre la especificación de orígenes de imagen, así como sobre los formatos de imagen que puedes usar y su empaquetado en una aplicación, consulta Image e ImageBrush.

Pinceles y texto

También puedes usar pinceles para aplicar características de representación a elementos de texto. Por ejemplo, la propiedad Foreground de TextBlock utiliza un objeto Brush. Puedes aplicar al texto cualquiera de los pinceles aquí descritos. Sin embargo, ten cuidado con los que apliques al texto, ya que este podría ser ilegible encima de cualquier fondo si usas pinceles con sangrado de fondo. Usa el objeto SolidColorBrush para mejorar la legibilidad de los elementos de texto en la mayoría de los casos, a menos que la finalidad del elemento de texto sea principalmente decorativa.

Aunque utilices un color sólido, asegúrate de que el color de texto que elijas tenga suficiente contraste con respecto al color de fondo del contenedor de diseño del texto. El nivel de contraste entre el primer plano del texto y el fondo del contenedor de texto debe tenerse en cuenta para la accesibilidad.

WebViewBrush

Un objeto WebViewBrush es un tipo de pincel especial que puede acceder al contenido que se ve normalmente en un control WebView. En lugar de representar el contenido en el área rectangular del control WebView, el objeto WebViewBrush pinta ese contenido en otro elemento que tiene una propiedad de tipo Brush para una superficie de representación. El objeto WebViewBrush no es apropiado para todos los escenarios de uso de pincel, pero es útil para las transiciones de un objeto WebView. Para obtener más información, consulta WebViewBrush.

XamlCompositionBrushBase

XamlCompositionBrushBase es una clase base usada para crear pinceles personalizados que usan CompositionBrush para pintar los elementos de la interfaz de usuario XAML.

Esto permite la interoperación de "lista desplegable" entre las capas Windows.UI.Xaml y Windows.UI.Composition, tal y como se describe en la información general de la capa Visual.

Para crear un pincel personalizado, crea una clase que se herede de XamlCompositionBrushBase e implemente los métodos necesarios.

Por ejemplo, esto se puede usar para aplicar efectos a propiedades UIElement de XAML con un CompositionEffectBrush, como un GaussianBlurEffect o un SceneLightingEffect, que controla las propiedades reflectantes de una propiedad UIElement de XAML cuando está iluminada por un XamlLight.

Para obtener ejemplos de código, consulta XamlCompositionBrushBase.

Pinceles como recursos XAML

Puedes declarar cualquier pincel como un recurso XAML con clave en un diccionario de recursos XAML. Esto facilita la replicación de los mismos valores de pincel cuando se aplican a varios elementos de una interfaz de usuario. A continuación, los valores de pincel se comparten y aplican a cualquier caso en el que se haga referencia al recurso de pincel como un uso {StaticResource} en el código XAML. Esto incluye los casos en los que tienes una plantilla de control XAML que hace referencia al pincel compartido y dicha plantilla de control es un recurso XAML con clave.

Pinceles en código

Es mucho más frecuente especificar pinceles con XAML que usar código para definirlos. Esto es así porque los pinceles se suelen definir como recursos XAML y porque los valores de pincel suelen ser el resultado de herramientas de diseño, o bien, porque forman parte de una definición de interfaz de usuario XAML. Aun así, si alguna vez quieres definir un pincel con código, todos los tipos Brush están disponibles para la creación de una instancia de código.

Para crear un objeto SolidColorBrush en código, usa el constructor que utiliza un parámetro Color. Pasa un valor que sea una propiedad estática de la clase Colors, como este:

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

Para los objetos WebViewBrush y ImageBrush, usa el constructor predeterminado y después llama a otras API antes de tratar de usar ese pincel para una propiedad de interfaz de usuario.

  • ImageSource requiere un BitmapImage (no un URI) cuando se define un ImageBrush con código. Si el origen es una secuencia, usa el método SetSourceAsync para inicializar el valor. Si el origen es un identificador URI, que incluye contenido en la aplicación que usa los esquemas ms-appx o ms-resource, utiliza el constructor BitmapImage que toma un URI. También puedes considerar la posibilidad de controlar el evento ImageOpened si hay problemas de temporización al recuperar o descodificar el origen de la imagen, ya que es posible que necesites que aparezca otro contenido hasta que el origen de la imagen esté disponible.
  • Para el objeto WebViewBrush, quizá tengas que llamar a Redraw si restableciste la propiedad SourceName recientemente o si el contenido del objeto WebView también cambia con el código.

Para obtener ejemplos de código, consulta WebViewBrush, ImageBrush y XamlCompositionBrushBase.