.NET MAUI. Работа с цветом (класс Color)

Так же, как и свойства размеров и позиционирования XAML-элементов, свойства, отвечающие за цветовое оформление того или иного элемента управления в XAML присущи многим компонентам в .NET MAUI. Поэтому в этой части мы рассмотрим эти свойства, а также способы работы с цветом в XAML. В зависимости от того, с каким компонентом мы работаем, у этого компонента могут быть различные свойства для работы с цветом. Например, метка (Label) содержит свойство Background, определяющее цвет заливки, кнопка (Button) содержит такие свойства как Background, BorderColor (цвет границы) иTextColor (цвет текста) и так далее. Работа с цветом в XAML может осуществляться различными способами, которые мы рассмотрим далее

Класс Microsoft.Maui.Graphics.Color

Свойства элементов XAML, устанавливающие цветовое оформление, обычно принимают в качестве значения один из объектов класса Microsoft.Maui.Graphics.Color. Этот класс позволяет устанавливать цвет четырьмя различными способами:

1. в виде значений RGB (Red-Green-Blue),
2. в виде значений HSL (Hue-Saturation-Luminosity),
3. в виде значений HSV (Hue-Saturation-Value)
4. в виде именованных и шестнадцатеричных значений цвета

Кроме этого, мы также можем указывать прозрачность цвета, используя альфа-канал.

Именованные цвета XAML

Самый простой способ указания цвета — это воспользоваться одним из 148 именованных цветов, доступных в XAML .NET MAUI. Именно этим способом мы пользовались, когда хотели каким-либо образом выделить элемент интерфейса на странице приложения. Так, мы можем указывать цвет элемента в XAML в виде обычной строки, например, «Red», «Aqua», «Blue» и так далее.

Например, установим для красный цвет для элемента BoxView:

<ScrollView>
    <BoxView Background="Red"></BoxView>
</ScrollView>

Шестнадцатеричные значения цвета XAML

Также, используя только код XAML, мы можем задавать цвет элемента в виде шестнадцатеричного значения. Например, предыдущий код мы могли бы переписать следующим образом:

<ScrollView>
    <BoxView Background="#FF0000"></BoxView>
</ScrollView>

В шестнадцатеричном представлении цвет в XAML определяется как строка, начинающаяся с символа #. Далее идут три (или четыре, если используется альфа-канал) числа в шестнадцатеричном представлении от 0 до 255. Каждое число — соответствующая компонента цвета в модели RGB(A). То есть в нашем случае, мы задали вот такой цвет:

• R = FF (255)
• G = 0
• B = 0

Использование цветовых моделей для определения цвета

Конструкторы класса Color

Чтобы воспользоваться возможностями класса Color по работе с цветовыми моделями (RGB, HSV, HSL), воспользуемся файлом отдельного кода XAML. Создадим новое пустое приложение .NET MAUI, откроем файл MainPage.xaml.cs и изменим метод OnCounterClicked() следующим образом:

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    if (count<255)
       CounterBtn.Background = new Color(255 - count, count, 255 - count);
    SemanticScreenReader.Announce(CounterBtn.Text);
}

Здесь мы воспользовались одним из конструкторов класса Color для задания цвета в модели RGB:

CounterBtn.Background = new Color(255 - count, count, 255 - count);

Теперь, если запустить приложение и покликать по кнопке, то можно увидеть, что ее цвет будет изменяться до зеленого. Вот так будет выглядеть кнопка при первом клике: а вот так, при 185 кликах:

Всего, у класса Color определено девять конструкторов:

public Color ();

public Color (Vector4 color);

public Color (byte red, byte green, byte blue);
public Color (int red, int green, int blue);
public Color (float red, float green, float blue);

public Color (byte red, byte green, byte blue, byte alpha);
public Color (int red, int green, int blue, int alpha);
public Color (float red, float green, float blue, float alpha);

public Color (float gray);

Методы для работы с моделью RGB(A) и ARGB

Также у класса Color определен ряд методов, позволяющих работать с цветовой моделью RGB(A). Следует отметить, что часть методов принимает в качестве параметров значения типа double или float. В этом случае, значения параметров варьируются не от 0 до 255, как обычно, а от 0 до 1.

Методы для работы получения цвета в модели RGB:

public static Color FromRgb (byte red, byte green, byte blue);
public static Color FromRgb (double red, double green, double blue);
public static Color FromRgb (int red, int green, int blue);
public static Color FromRgb (float red, float green, float blue);

Также мы можем получить каждую компоненту цвета RGB из значения Color, используя следующий метод:

public void ToRgb (out byte r, out byte g, out byte b);

Методы для работы с моделью RGBA:

public static Color FromRgba (float r, float g, float b, float a);
public static Color FromRgba (int red, int green, int blue, int alpha);
public static Color FromRgba (byte red, byte green, byte blue, byte alpha);
public static Color FromRgba (double r, double g, double b, double a);
public static Color FromRgba (string colorAsHex);

Здесь, для получения значения Color в последнем методе используется строка, содержащая цвет в шестнадцатеричном формате. Примеры использования этого метода для получения красного цвета:

CounterBtn.Background = Color.FromRgba("FF0000");
CounterBtn.Background = Color.FromRgba("#FF0000");
CounterBtn.Background = Color.FromRgba("FF0000FF");
CounterBtn.Background = Color.FromRgba("#FF0000FF");

Для получения цвета в ARGB у класса Color предусмотрен следующий метод:

public static Color FromArgb (string colorAsHex);

Для обратных преобразований значения Color в компоненты цветовой модели и строки используются следующие методы:

public void ToRgba (out byte r, out byte g, out byte b, out byte a);
public string ToRgbaHex (bool includeAlpha = false);

Параметр includeAlpha во втором методе указывает следует ли включать в результат метода значение альфа-канала.

Методы для работы с моделями HSL(A) и HSV(A)

Методы для работы с моделями HSL и HSV аналогичны рассмотренным ранее методам для работы с моделью RGB(A).

public static Color FromHsla (double h, double s, double l, double a = 1);
public static Color FromHsla (float h, float s, float l, float a = 1);
public static Color FromHsv (int h, int s, int v);
public static Color FromHsv (int h, int s, int v);
public static Color FromHsva (int h, int s, int v, int a);
public static Color FromHsva (float h, float s, float v, float a);

Для обратного преобразования предусмотрен метод

public void ToHsl (out float h, out float s, out float l);

Управление цветом

Кроме того, что мы можем создавать объекты типа Color, используя значения отдельных компонентов цвета, мы также можем изменять цвет, используя следующие методы класса Color:

public Color AddLuminosity (float delta);

public Color WithAlpha (float alpha);

public Color WithHue (float hue);

public Color WithLuminosity (float luminosity);

public Color WithSaturation (float saturation);

В качестве примера, изменим код нашего приложения следующим образом:

public partial class MainPage : ContentPage
{
    int count = 0;

    Color _color = new(255, 0, 0);

    public MainPage()
    {
        InitializeComponent();
        CounterBtn.Background = _color;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        if (count<100)
        {
            _color = _color.WithAlpha(1 - count/100f);
            CounterBtn.Background = _color;
        }
        

        SemanticScreenReader.Announce(CounterBtn.Text);
    }
}

Здесь мы изменяем значения альфа-компоненты цвета с 1 (по умолчанию) до 0 при каждом клике по кнопке. В итоге делая кнопку полностью прозрачной. Вот как будет выглядеть результат после 50 кликов:

Итого

Для работы с цветом в .NET MAUI мы используем класс Color, который содержит 148 именованных цветов, а также методы для работы с цветом в моделях RGB(A), HSL(A) и HSV(A). С использованием методов класса Color мы также можем изменять цвета, добавляя к них яркость, насыщенность или изменяя значение альфа-канала. Чтобы задать цвет в XAML мы можем использовать именованные цвета или же шестнадцатеричное представление цвета.