Compartir a través de

Pinceles de Xamarin.Forms: degradados

  • Artículo

La clase GradientBrush deriva de la clase Brush y es una clase abstracta que describe un degradado, que se compone de delimitadores de degradado. Un pincel de degradado pinta un área con varios colores que se mezclan entre sí a lo largo de un eje. Las clases que derivan de GradientBrush describen diferentes formas de interpretar los delimitadores de degradado y Xamarin.Forms proporciona los siguientes pinceles de degradado:

La clase GradientBrush define la propiedad GradientStops, de tipo GradientStopsCollection, que representa los delimitadores de degradado del pincel, cada uno de los cuales especifica un color y un desplazamiento a lo largo del eje de degradado del pincel. Un GradientStopsCollection es un ObservableCollection de los objetos GradientStop. La propiedad GradientStops está respaldada por un objeto BindableProperty, lo que significa que puede ser el destino de los enlaces de datos y que se le pueden aplicar estilos.

Nota:

La propiedad GradientStops es la ContentProperty de la clase GradientBrush y, por tanto, no es necesario establecerla de forma explícita desde XAML.

Delimitadores de degradado

Los delimitadores de degradado son los bloques de creación de un pincel de degradado y especifican los colores del degradado y su ubicación a lo largo del eje de degradado. Los delimitadores de degradado se especifican mediante objetos GradientStop.

La clase GradientStop define las propiedades siguientes:

  • Color, de tipo Color, que representa el color del delimitador de degradado. El valor predeterminado de esta propiedad es Color.Default.
  • Offset, de tipo float, que representa la ubicación del delimitador de degradado en el vector de degradado. El valor predeterminado de esta propiedad es 0 y los valores válidos están dentro del intervalo comprendido entre 0,0 y 1,0. Cuanto más se acerque a 0 este valor, más cerca del inicio del degradado está el color. Del mismo modo, cuanto más se acerque a 1 este valor, más cerca del final del degradado está el color.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

Importante

El sistema de coordenadas utilizado por los degradados es relativo a un cuadro de límite para el área de salida. 0 indica un 0 por ciento del rectángulo de selección, mientras que 1 indica un 100 por cien del rectángulo de selección. Por lo tanto, (0.5,0.5) describe un punto en medio del cuadro de límite y (1,1) describe un punto en la parte inferior derecha del cuadro de límite.

En el ejemplo XAML siguiente se crea un LinearGradientBrush diagonal con cuatro colores:

<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>

El color de cada punto entre los delimitadores de degradado se interpola como una combinación del color especificado por los dos delimitadores de degradado limítrofes. En el diagrama siguiente, se muestran los delimitadores de degradado del ejemplo anterior.

Marco pintado con un linearGradientBrush diagonal

En este diagrama, los círculos marcan la posición de los delimitadores de degradado y una línea discontinua muestra el eje de degradado. El primer delimitador de degradado especifica el color amarillo con un desplazamiento de 0,0. El segundo delimitador de degradado especifica el color rojo con un desplazamiento de 0,25. Los puntos entre estos dos delimitadores de degradado cambian gradualmente de amarillo a rojo a medida que te mueves de izquierda a derecha a lo largo del eje de degradado. El tercer delimitador de degradado especifica el color azul con un desplazamiento de 0,75. Los puntos entre el segundo y el tercer delimitador de degradado cambian gradualmente de rojo a azul. El cuarto delimitador de degradado especifica el color verde de lima en el desplazamiento de 1,0. Los puntos entre el tercer y el cuarto delimitador de degradado cambian gradualmente de azul a verde lima.