Inicio rápido: usar pinceles (XAML)

Applies to Windows and Windows Phone

Los objetos Brush se usan para pintar los interiores o los contornos de formas, texto y partes de los controles, de forma que el objeto pintado esté visible en una interfaz de usuario. Veamos los pinceles disponibles y cómo usarlos.

Guía básica: Relación de este tema con los demás. Consulta:

Introducción a los pinceles

Para pintar un objeto tal como Shape o las partes de un Control que se muestran en el Canvas de la aplicación, usa un objeto Brush. Por ejemplo, puedes establecer la propiedad Fill del Shape o el Background, y las propiedades Foreground de un Control en un valor Brush, y ese objeto Brush determina cómo se pintan o se representan los elementos en la UI. Los distintos tipos de pinceles son SolidColorBrush, LinearGradientBrush, ImageBrush y WebViewBrush.

Pinceles de colores sólidos

Un 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 SolidColorBrush y el color sólido 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 están basados en los nombres de colores X11 de la especificación de hojas de estilos en cascada 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.

Este ejemplo establece la propiedad Fill de un Rectangle en el color predefinido Red.


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

Esta imagen muestra el SolidColorBrush aplicado al Rectangle.

Un SolidColorBrush representado.

Si vas a definir un SolidColorBrush mediante programación en lugar de usar XAML, cada color con nombre está disponible como una propiedad estática de la clase Colors. Por ejemplo, para declarar un valor Color de un SolidColorBrush para representar el color con nombre "Orquídea", 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 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. Por ejemplo, el valor hexadecimal "#FFFF0000" define el rojo completamente opaco (alfa="FF", rojo="FF", verde="00" y azul="00").

Este ejemplo de XAML establece la propiedad Fill de un Rectangle en el valor hexadecimal "#FFFF0000", y produce un resultado idéntico a usar el color con nombre Colors.Red.


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

Sintaxis de los elementos de las propiedades

Puedes usar la sintaxis de los elementos de las propiedades para definir un 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 más información sobre la sintaxis del XAML, incluida la sintaxis de los elementos de propiedad, consulta el tema de introducción a XAML.

En los ejemplos anteriores, la cadena "SolidColorBrush" ni siquiera se vio en la sintaxis. 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 la definición de la interfaz de usuario en los casos más comunes. El ejemplo siguiente crea un Rectangle y crea explícitamente el SolidColorBrush como un valor de elemento para una propiedad Rectangle.Fill. El Color de SolidColorBrush se establece en Blue, y Opacity se establece en 0,5.


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

Pinceles de degradado lineal

Un 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 pintada por el pincel, lo que produce un sombreado en diagonal.

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

La propiedad Color del punto de degradado especifica el color de este. El color se puede establecer usando un nombre de color predefinido o mediante valores ARGB hexadecimales.

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

Este ejemplo crea un degradado lineal con cuatro colores y lo usa para pintar un Rectangle.


<StackPanel>
 <!-- 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>
</StackPanel>

El color de cada punto entre los puntos de degradado se interpolan linealmente como una combinación del color especificado por los dos puntos de degradado limítrofes. La ilustración resalta los puntos de degradado del ejemplo anterior. Los círculos marcan la posición de los puntos de degradado y la línea punteada muestra el eje de degradado.

Puntos de degradado

Para cambiar la línea en la que se sitúan los puntos 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 y/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 color del último GradientStop, debes especificar un StartPoint de (0,0) y un EndPoint de (0.5,0).

Pinceles de imagen

Un 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 para 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 ImageBrush amplia su imagen para rellenar completamente el área pintada, lo que puede distorsionar la imagen si las relaciones de aspecto del área pintada y de la imagen son diferentes. Para cambiar este comportamiento, cambia la propiedad Stretch de su valor predeterminado Fill a None, Uniform o UniformToFill.

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


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

Este es el aspecto del ImageBrush representado.

Un ImageBrush representado.

ImageBrush y Image hacen referencia a un archivo de origen de imagen (en varios formatos de imagen posibles) mediante su Identificador uniforme de recursos (URI). Estos archivos de origen de imagen se especifican como URI. Para obtener más información acerca de la especificación de orígenes de imagen, los formatos de imagen usables y su empaquetado en una aplicación, consulta Inicio rápido: 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 admite un Brush. Puedes aplicar cualquiera de los pinceles aquí descritos a texto. Aunque debes tener cuidado porque el texto puede quedar fácilmente ilegible si utilizas pinceles que puedan sangrar en el fondo usado para representar el texto o que puedan difuminar los contornos de los caracteres de texto. Usa 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.

Incluso cuando 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 WebViewBrush es un tipo especial de pincel 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, WebViewBrush pinta ese contenido en otro elemento que tiene una propiedad de tipo Brush para una superficie de representación. WebViewBrush no es apropiado para todos los escenarios de uso de pincel, pero es útil para transiciones de un WebView. Para obtener más información, consulta WebViewBrush.

Pinceles como recursos de XAML

Puedes declarar cualquier pincel como un recurso con clave de XAML en un diccionario de recursos de XAML. Esto facilita la replicación de los mismos valores de pincel cuando se aplican a varios elementos de una interfaz de usuario. Así, 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 se tiene una plantilla de control XAML que hace referencia al pincel compartido cuando la misma plantilla de control es un recurso de 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, por lo general, se definen como recursos XAML, y porque los valores de pincel suelen ser el resultado de herramientas de diseño, o porque se incluyen como parte de una definición de interfaz de usuario de XAML. Aún 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 SolidColorBrush con código, usa el constructor que toma 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);


Para 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 una BitmapImage (no un URI) cuando defines un ImageBrush con código. Si tu origen es una secuencia, usa el método SetSourceAsync para inicializar el valor. Si tu origen es un URI que incluye contenido que usa los esquemas ms-appx o ms-resource en tu aplicación, usa el constructor BitmapImage que toma un URI. Quizá también debas considerar controlar el evento ImageOpened si hay problemas de temporización con la recuperación o la descodificación del origen de la imagen. Allí, es posible que debas alternar contenido para mostrar hasta que esté disponible el origen de la imagen.
  • Para WebViewBrush, quizá debas llamar a Redraw si restableciste la propiedad SourceName recientemente o si el contenido de WebView cambiará con el código también.
Para ver ejemplos de código, consulta la páginas de referencia de WebViewBrush y ImageBrush.

Muestras de pinceles

Para obtener más ejemplos de cómo usar gráficos y pinceles en aplicaciones, consulta:

Temas relacionados

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++
Inicio rápido: Dibujar formas

 

 

Mostrar:
© 2014 Microsoft