Привязка в .NET MAUI. Свойства и параметры конвертеров значений

Конвертеры значений в .NET MAUI, как и обычные классы C#, могут содержать свойства, значения которых могут присваиваться непосредственно в коде XAML. Кроме этого, в конвертер могут передаваться дополнительные параметры, позволяющие каким-либо образом влиять на ход конвертации.

Свойства конвертера значений

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converter="clr-namespace:MauiApp13"
             x:Class="MauiApp13.MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <converter:RgbConverter x:Key="RgbConverter"/>
            <converter:DoubleToHexConverter x:Key="DoubleToHexConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Background>
        <MultiBinding Converter="{StaticResource RgbConverter}">
            <MultiBinding.Bindings>
                <Binding Path="Value" Source="{x:Reference RValue}" />
                <Binding Path="Value" Source="{x:Reference GValue}" />
                <Binding Path="Value" Source="{x:Reference BValue}" />
            </MultiBinding.Bindings>
        </MultiBinding>
    </ContentPage.Background>
    
    <ScrollView>
        <VerticalStackLayout>
            <Label Text="{Binding Source={x:Reference RValue}, Path=Value, StringFormat='Красный {0}', Converter={x:StaticResource DoubleToHexConverter}}"/>

            <Slider x:Name="RValue" Maximum="255" Minimum="0"/>

            <Label Text="{Binding Source={x:Reference GValue}, Path=Value, StringFormat='Зеленый {0:F0}', Converter={x:StaticResource DoubleToHexConverter}}"/>
            <Slider x:Name="GValue" Maximum="255" Minimum="0"/>

            <Label Text="{Binding Source={x:Reference BValue}, Path=Value, StringFormat='Синий {0:F0}', Converter={x:StaticResource DoubleToHexConverter}}"/>
            <Slider x:Name="BValue" Maximum="255" Minimum="0"/>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Код конвертера RgbConverter, который и выполняет основную работу по преобразованию значений Value в Color:

namespace MauiApp13
{
    public class RgbConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var r = System.Convert.ToByte(values[0]);
            var g = System.Convert.ToByte(values[1]);
            var b = System.Convert.ToByte(values[2]);
            return Color.FromRgb(r, g, b);
        }
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Допустим, мы хотим сделать так, чтобы при формировании цвета использовалось значение альфа-канала (прозрачность). Для этой цели мы могли бы добавить на страницу ещё один Slider или каким-либо другим образом попытались бы получить необходимое нам значение. Второй вариант — использовать свойство конвертера значений. Перепишем код конвертера следующим образом:

public class RgbConverter : IMultiValueConverter
{
    public int Alpha { get; set; }  
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var r = System.Convert.ToByte(values[0]);
        var g = System.Convert.ToByte(values[1]);
        var b = System.Convert.ToByte(values[2]);
        return Color.FromRgba(r, g, b, (byte)Alpha);
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Здесь мы обычным образом определили публичное свойство Alpha и используем значение этого свойства при получении цвета:

return Color.FromRgba(r, g, b, (byte)Alpha);

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

<ContentPage.Background>
    <MultiBinding>
        <MultiBinding.Bindings>
            <Binding Path="Value" Source="{x:Reference RValue}" />
            <Binding Path="Value" Source="{x:Reference GValue}" />
            <Binding Path="Value" Source="{x:Reference BValue}" />
        </MultiBinding.Bindings>
        <MultiBinding.Converter>
            <converter:RgbConverter Alpha="50"/>
        </MultiBinding.Converter>
    </MultiBinding>
</ContentPage.Background>

здесь мы указываем конвертер и значение его свойства как вложенной свойство объекта MultiBinding:

<MultiBinding.Converter>
    <converter:RgbConverter Alpha="50"/>
</MultiBinding.Converter>

Теперь по умолчанию цвет фона будет использовать прозрачность:

Значения свойств конвертера не обязательно должны быть примитивными типами данных — это могут быть любые объекты, включая стили оформления.

Параметры конвертера значений

В методах Convert() и ConvertBack() тритьим параметром выступает некий object parameter. Чтобы передать в этом параметре какое-либо значение используется свойство ConverterParameter расширения разметки Binding (или MultiBinding).  Перепишем код нашего конвертера следующим образом:

public class RgbConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var r = System.Convert.ToByte(values[0]);
        var g = System.Convert.ToByte(values[1]);
        var b = System.Convert.ToByte(values[2]);
        var a = System.Convert.ToByte(parameter);
        return Color.FromRgba(r, g, b, a);
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

и воспользуемся параметром конвертера в приложении:

<ContentPage.Background>
    <MultiBinding Converter="{StaticResource RgbConverter}" ConverterParameter="255">
        <MultiBinding.Bindings>
            <Binding Path="Value" Source="{x:Reference RValue}" />
            <Binding Path="Value" Source="{x:Reference GValue}" />
            <Binding Path="Value" Source="{x:Reference BValue}" />
        </MultiBinding.Bindings>
    </MultiBinding>
</ContentPage.Background>

Теперь цвета фона страницы будут полностью непрозрачны:

Итого

Свойство конвертера значений — это обычное свойство класса, значение которого мы можем определить каким-либо образом, например, при определении конвертера в XAML. Параметр конвертера — это третий параметр в методах Convert() и ConvertBack() конвертера значений. Параметр конвертера задается в свойстве ConverterParameter расширения Binding или MultiBinding.