Colores en Xamarin.Forms

  • Artículo

Download SampleDescargar el ejemplo

La estructura Color le permite especificar colores como valores rojo-verde-azul (RGB), valores tono-saturación-luminosidad (HSL), valores tono-saturación-valor (HSV) o con el nombre de un color. También hay disponible un canal alfa para indicar la transparencia.

Los objetos Color se pueden crear con los constructores Color, que se pueden usar para especificar una sombra gris, un valor RGBo un valor RGB con transparencia. En todos los casos, los argumentos son valores double que van de 0 a 1.

También puede usar métodos estáticos para crear objetos Color:

  • Color.FromRgb para valores RGB double de 0 a 1.
  • Color.FromRgb para valores RGB enteros de 0 a 255.
  • Color.FromRgba para valores RGB double con transparencia.
  • Color.FromRgba para valores RGB enteros con transparencia.
  • Color.FromHsla para valores HSL double con transparencia.
  • Color.FromHsv para los valores de HSV double de 0 a 1.
  • Color.FromHsv para los valores enteros de HSV de 0 a 255.
  • Color.FromHsva para valores de HSV double con transparencia.
  • Color.FromHsva para valores HSV enteros con transparencia.
  • Color.FromUint para un valor uint calculado como (B + 256 * (G + 256 * (R + 256 * A))).
  • Color.FromHex para un formato string de dígitos hexadecimales con el formato "#AARRGGBB" o "#RRGGBB" o "#ARGB" o "#RGB", donde cada letra corresponde a un dígito hexadecimal para los canales alfa, rojo, verde y azul.

Una vez creado, un objeto Color es inmutable. Las características del color se pueden obtener a partir de las siguientes propiedades:

  • R, que representa el canal rojo del color.
  • G, que representa el canal verde del color.
  • B, que representa el canal azul del color.
  • A, que representa el canal alfa del color.
  • Hue, que representa el canal de tono del color.
  • Saturation, que representa el canal de saturación del color.
  • Luminosity, que representa el canal de luminosidad del color.

Estas propiedades son todos los valores double comprendidos entre 0 y 1.

Colores con nombre

La estructura Color también define 240 campos de solo lectura estáticos públicos para colores comunes, como AliceBlue.

Color.Accent

El valor de Color.Accent da como resultado un color específico de la plataforma (y a veces seleccionable por el usuario) que es visible en un fondo oscuro o claro.

Color.Default

El valor Color.Default define un Color con todos los canales establecidos en -1 y está pensado para aplicar la combinación de colores de la plataforma. Por lo tanto, tiene un significado diferente en diferentes contextos en distintas plataformas. De forma predeterminada, las combinaciones de colores de la plataforma son:

  • iOS: texto oscuro sobre un fondo claro.
  • Android: texto oscuro sobre un fondo claro.
  • Windows: texto oscuro sobre un fondo claro.

Color.Transparent

El valor Color.Transparent define un Color con todos los canales establecidos en cero.

Modificación de un color

Varios métodos de instancia permiten modificar un color existente para crear un nuevo color:

  • AddLuminosity devuelve un Color modificando la luminosidad por el delta proporcionado.
  • MultiplyAlpha devuelve un Color modificando el alfa, multiplicándolo por el valor alfa proporcionado.
  • ToHex devuelve una representación de string hexadecimal de Color.
  • WithHue devuelve un Color, reemplazando el tono por el valor proporcionado.
  • WithLuminosity devuelve un Color, reemplazando la luminosidad por el valor proporcionado.
  • WithSaturation devuelve un Color, reemplazando la saturación por el valor proporcionado.

Conversiones implícitas

Se puede realizar la conversión implícita entre los tipos Xamarin.Forms.Color y System.Drawing.Color:

Xamarin.Forms.Color xfColor = Xamarin.Forms.Color.FromRgb(0, 72, 255);
System.Drawing.Color sdColor = System.Drawing.Color.FromArgb(38, 127, 0);

// Implicity convert from a Xamarin.Forms.Color to a System.Drawing.Color
System.Drawing.Color sdColor2 = xfColor;

// Implicitly convert from a System.Drawing.Color to a Xamarin.Forms.Color
Xamarin.Forms.Color xfColor2 = sdColor;

Ejemplos

En XAML, normalmente se hace referencia a los colores con sus valores con nombre o con sus representaciones hexadecimales:

<Label Text="Sea color"
       TextColor="Aqua" />
<Label Text="RGB"
       TextColor="#00FF00" />
<Label Text="Alpha plus RGB"
       TextColor="#CC00FF00" />
<Label Text="Tiny RGB"
       TextColor="#0F0" />
<Label Text="Tiny Alpha plus RGB"
       TextColor="#C0F0" />

Nota:

Al usar la compilación XAML, los nombres de color no distinguen mayúsculas de minúsculas y, por tanto, se pueden escribir en minúsculas. Para obtener más información acerca de la compilación XAML, consulte XAML Compilation (Compilación XAML).

En C#, normalmente se hace referencia a los colores mediante sus valores con nombre o con sus métodos estáticos:

Label red    = new Label { Text = "Red",    TextColor = Color.Red };
Label orange = new Label { Text = "Orange", TextColor = Color.FromHex("FF6A00") };
Label yellow = new Label { Text = "Yellow", TextColor = Color.FromHsla(0.167, 1.0, 0.5, 1.0) };
Label green  = new Label { Text = "Green",  TextColor = Color.FromRgb (38, 127, 0) };
Label blue   = new Label { Text = "Blue",   TextColor = Color.FromRgba(0, 38, 255, 255) };
Label indigo = new Label { Text = "Indigo", TextColor = Color.FromRgb (0, 72, 255) };
Label violet = new Label { Text = "Violet", TextColor = Color.FromHsla(0.82, 1, 0.25, 1) };

En el ejemplo siguiente se usa la extensión de marcado OnPlatform para establecer de forma selectiva el color de un ActivityIndicator:

<ActivityIndicator Color="{OnPlatform iOS=Black, Default=Default}"
                   IsRunning="True" />

El código de C# equivalente es el siguiente:

ActivityIndicator activityIndicator = new ActivityIndicator
{
    Color = Device.RuntimePlatform == Device.iOS ? Color.Black : Color.Default,
    IsRunning = true
};