Home > MVA, Tutoriales, WP7 > Brochas

Brochas

Brochas

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Brushes.

En Silverlight para Windows Phone 7, se utilizan los objetos Brush para dibujar los objetos a la pantalla. Este artículo presenta las diferentes brochas en Silverlight y cómo utilizarlas.

Este artículo contiene las siguientes secciones:

  • Introducción a las Brochas
  • Brochas de color sólido
  • Brochas de gradiente linear
  • Brochas de gradiente radial
  • Brochas de imágenes

Nota

Los ejemplos del uso de Silverlight se ejecutan en el navegador para simular su comportamiento para Windows Phone. El comportamiento real puede ser ligeramente diferente en el emulador de Windows Phone o en un dispositivo Windows Phone. 

Introducción a las Brochas

Se utilizan los objetos Brush para dibujar un área con un color sólido, un degradado o una imagen.  Si está familiarizado con la forma de trabajar de las brochas en las aplicaciones de Silverlight en el navegador, entonces te alegrará saber que las brochas funcionan exactamente de la misma manera en Windows Phone.  La única excepción es que VideoBrush no es compatible con Windows Phone.

Para pintar un objeto en la pantalla, como un Shape o un Control, se utiliza un Brush.  Estableces la propiedad Fill del Shape o las propiedades Background y Foreground de un Control a un Brush deseado.

Los diferentes tipos de brochas en Silverlight para Windows Phone son SolidColorBrush, LinearGradientBrush, RadialGradientBrush e ImageBrush. Para obtener más información consulta Brochas en MSDN.

Brochas de color sólido

Un SolidColorBrush pinta un área con un solo Color, como rojo o azul.  Hay tres formas en el XAML para definir un SolidColorBrush y el color que indica.  Puedes usar los nombres predefinidos para los colores,  valores hexadecimales o la sintaxis de elementos para propiedades.

Nombres predefinidos de color

Puedes utilizar un nombre predefinido de color, como Yellow o SlateBlue, ya sea para establecer la propiedad Fill de un Shape o las propiedades Background y Foreground de un Control.  El intérprete de XAML convierte el nombre del color a una estructura Color con los canales de color correctos. 

Nota

Para obtener una tabla con todos los nombres de colores predefinidos y sus valores hexadecimales correspondientes, consulta la estructura Color en MSDN.

En el siguiente ejemplo se establece la propiedad Fill de un rectángulo al color Red predefinido.

XAML

<StackPanel>

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

</ StackPanel>

Valores hexadecimales de color

Puedes utilizar el valor hexadecimal del color para establecer la propiedad Fill de un Shape o las propiedades Background y Foreground de un Control.  La estructura del valor hexadecimal es el canal alfa (opacidad), canal rojo, canal verde y el canal azul.  Por ejemplo, el valor hexadecimal #FFFF0000 define el rojo completamente opaco (alfa = FF, FF = rojo, verde = 00, y azul = 00).

En el siguiente ejemplo se establece la propiedad Fill de un rectángulo al valor hexadecimal #FFFF0000.

XAML

<StackPanel>

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

</ StackPanel>

Sintaxis de elementos para propiedades

Puedes utilizar la sintaxis de elementos para propiedades para definir un SolidColorBrush.  Esta sintaxis es más elaborada que los métodos anteriores, pero te permite especificar opciones adicionales como el Opacity de una brocha.  Para más información sobre la sintaxis de XAML, incluyendo la sintaxis de elementos para propiedades, consulta XAML [Xaml.docx].

En el siguiente ejemplo se crea un rectángulo y explícitamente se crea el SolidColorBrush para la propiedad Fill.  El Color del SolidColorBrush  se establece en azul y su Opacity en 0.5.

clip_image002[4]

 

XAML

 

<Grid>

<Rectangle Width="200" Height="150">

<Rectangle.Fill>

<SolidColorBrush Color="Blue" Opacity="0.5" />

</Rectangle.Fill>

</Rectangle>

</Grid>

 

Brochas de degradado lineal

Un LinearGradientBrush pinta un área con un gradiente que se define a lo largo de una línea, llamado eje del gradiente.  Se especifican los colores del gradiente y su ubicación a lo largo del eje utilizando objetos GradientStop. También puedes modificar el eje del gradiente, lo que te permite crear gradientes horizontales y verticales, así como también invertir la dirección del gradiente. 

El GradientStop es el bloque básico de construcción para una brocha de gradiente. Una parada de gradiente especifica un Color en un Offset a lo largo del eje del gradiente.

La propiedad Color de la parada de gradiente especifica el color para la parada de gradiente.  Puedes establecer el color utilizando el nombre de un color predefinido o especificando los valores hexadecimales ARGB.

La propiedad Offset de la parada de gradiente, especifica la posición del color de la parada de gradiente en el eje.  La propiedad Offset es de tipo Double y puede tener un rango de 0 a 1.  Entre más cercano a 0 esté el valor del Offset en una parada del gradiente, estará más cerca el color al inicio del gradiente.  Entre más cercano a 1 esté el valor del Offset a, estará más cerca el color al final del gradiente.

En el siguiente ejemplo se crea un gradiente lineal con cuatro colores y es utilizado para pintar un rectángulo. 

XAML

 

<StackPanel>

<!– Este rectángulo se pinta con un gradiente lineal diagonal. –>

<Rectangle Width="400" Height="200">

<Rectangle.Fill>

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

<GradientStop Color="Yellow" Offset="0.0" />

<GradientStop Color="Red" Offset="0.25" />

<GradientStop Color="Blue" Offset="0.75" />

<GradientStop Color="LimeGreen" Offset="1.0" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

 

La siguiente imagen muestra cómo se ve el gradiente en un Windows Phone.

 

clip_image004[4]

 

El color de cada punto entre las paradas del gradiente es interpolado linealmente como una combinación del color especificado por las dos paradas de gradiente que lo limitan. En la siguiente ilustración se destacan las paradas del gradiente del ejemplo anterior.  Los círculos marcan la posición de las paradas del gradiente, y la línea discontinua muestra el eje del gradiente.

clip_image006[4]

Puedes cambiar la línea en la que las paradas del gradiente se colocan estableciendo las propiedades StartPoint y EndPoint de las brochas.  Mediante la manipulación de las propiedades StartPoint y EndPoint, puedes crear y gradientes verticales y horizontales, invertir la dirección del gradiente, condensar su propagación y mucho más. 

En el siguiente ejemplo se crea un rectángulo que tiene un LinearGradientBrush como relleno. El LinearGradientBrush crea dos GradientStops, uno rojo y uno azul. El GradientStop rojo se establece a un Offset de 0 y el GradientStop azul se establece a un Offset de 0.75.  La propiedad StartPoint se establece en (0,0) y EndPoint se establece en (1,1), los cuales son los valores por defecto.  La propiedad SpreadMethod especifica diferentes maneras en que el gradiente puede ser dibujado.  Utiliza los controles deslizables en este ejemplo para experimentar con diferentes valores para las propiedades.

Get Microsoft Silverlight

Brochas de gradiente radial

Como un LinearGradientBrush, un RadialGradientBrush pinta un área con colores que se mezclan a lo largo de un eje.  El eje de una brocha de gradiente radial se define por un círculo, sus colores irradian hacia fuera desde su origen.  Utiliza las propiedades GradientOrigin, Center, RadiusX y RadiusY para definir el gradiente radial.  En el siguiente ejemplo se crea un gradiente radial con cuatro GradientStops.

XAML

 

<StackPanel>

<!– Este rectángulo se pinta con un degradado radial. –>

<Rectangle Width="400" Height="200">

<Rectangle.Fill>

<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

RadiusX="0.5" RadiusY="0.5">

<GradientStop Color="Yellow" Offset="0" />

<GradientStop Color="Red" Offset="0.25" />

<GradientStop Color="Blue" Offset="0.75" />

<GradientStop Color="LimeGreen" Offset="1" />

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

La siguiente imagen muestra cómo se ve el gradiente en un Windows Phone.

clip_image010[4]

La siguiente ilustración muestra el gradiente creado en el ejemplo anterior.  Las paradas de gradiente de la brocha se han destacado.  Ten en cuenta que aunque los resultados son diferentes, las paradas de gradiente en este ejemplo son idénticas a las paradas de gradiente  en los ejemplos de la brocha de gradiente linear.

clip_image012[4]

En la siguiente imagen se muestran varios gradientes radiales con diferentes configuraciones para GradientOrigin, Center, RadiusX y RadiusY.

clip_image014[4]

En el siguiente ejemplo se crea un rectángulo que tiene un RadialGradientBrush como relleno. El RadialGradientBrush crea dos GradientStops, uno rojo y uno azul. El GradientStop rojo se establece con un Offset de 0 y el GradientStop azul se establece con un Offset de 0.75.  Las propiedades GradientOrigin y Center se establecen a (0.5, 0.5) y las propiedades RadiusX y RadiusY se establecen en 0.5, que es su valor por defecto.  Utiliza los controles deslizables en este ejemplo para experimentar con diferentes valores de las propiedades.

Get Microsoft Silverlight

Brochas de imágenes

Un ImageBrush pinta un área con una imagen.  Pinta el área con una imagen JPEG o PNG especificada a través de su propiedad ImageSource.  La propiedad ImageSource indica la ruta de la imagen a cargar.  

De forma predeterminada, un ImageBrush expande su imagen hasta rellenar completamente el área que se está pintando, posiblemente distorsionando la imagen si el área pintada tiene una relación de aspecto diferente a la imagen.  Puedes cambiar este comportamiento cambiando la propiedad Stretch a Fill, None, Uniform o UniformToFill.

En el siguiente ejemplo se crea un ImageBrush y se establece la propiedad ImageSource a una imagen con el nombre flower.jpg, que se incluye como recurso en la aplicación.  Utiliza las listas desplegables para cambiar las propiedades.

Get Microsoft Silverlight

La siguiente imagen muestra cómo se ve la brocha en un Windows Phone.

clip_image020[4]

  1. Luis
    May 13th, 2012 at 20:31 | #1

    Me gustan mucho los controles que estan en la pagina donde puedes mover las propiedades a tu gusto

  2. Eduardo Hernandez
    May 31st, 2012 at 02:51 | #2

    Hola,
    Me gustaria saber como trabajar con las imagenes guardadas en el Telefono.

  3. Arismendy
    June 2nd, 2012 at 17:07 | #3

    No solo se pueden mover los controles sino tambien que puedes ver los valores que va adquiriendo.

  4. Armel Peña
    April 22nd, 2013 at 00:24 | #4

    Bastante sencillo…esta parte…