[MAUI] 바인딩 변환기 속성(IValueConverter)

값 변화기 클래스에는 속성 및 일반 매개 변수가 있을 수 있다. 값 변환기는 원본에서 대상에 대한 제네릭 <T> 형식의 개체로 변환할 수 있다. 

 

예시

BoolToObjectConvert Class

class BoolToObjectConvert<T> : IValueConverter
{
    public T TrueObject { get; set; }
    public T FalseObject { get; set; }


    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? TrueObject : FalseObject;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((T)value).Equals(TrueObject);
    }
}

True, False 로 사용할 일반 매개 변수를 설정했다. 해당 변수를 통해 xaml 파일에서 컨트롤할 수 있도록 할 수 있다.

 

 

TestPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiApp1.TestPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1.Class"
    Title="TestPage"
    Padding="20">

    <ContentPage.Resources>

        <Style TargetType="Label">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>

        <Style TargetType="Switch">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        
    </ContentPage.Resources>

    <StackLayout>

        <Button
            Margin="20,0,20,20"
            IsEnabled="{Binding Source={x:Reference entry1}, Path=Text.Length, Converter={StaticResource isExitConvert}}"
            Text="button" />-->

        <StackLayout>
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">

                <Label Text="Test 1" />
                <Switch x:Name="switch1" />
                <Label>
                    <Label.Text>
                        <Binding Path="IsToggled" Source="{x:Reference switch1}">
                            <Binding.Converter>
                                <local:BoolToObjectConvert
                                    x:TypeArguments="x:String"
                                    FalseObject="False"
                                    TrueObject="True" />
                            </Binding.Converter>

                        </Binding>
                    </Label.Text>
                </Label>

            </StackLayout>
        </StackLayout>

        <StackLayout>
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">

                <Label Text="Test 2" />
                <Switch x:Name="switch2" />
                <Label>
                    <Label.Text>
                        <Binding Path="IsToggled" Source="{x:Reference switch2}">
                            <Binding.Converter>
                                <local:BoolToObjectConvert
                                    x:TypeArguments="x:String"
                                    FalseObject="False"
                                    TrueObject="True" />
                            </Binding.Converter>

                        </Binding>
                    </Label.Text>

                    <Label.TextColor>
                        <Binding Path="IsToggled" Source="{x:Reference switch2}">
                            <Binding.Converter>
                                <local:BoolToObjectConvert
                                    x:TypeArguments="Color"
                                    FalseObject="Blue"
                                    TrueObject="Red" />
                            </Binding.Converter>
                        </Binding>

                    </Label.TextColor>
                </Label>

            </StackLayout>
        </StackLayout>

        <StackLayout>
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">

                <Label Text="Test 3" />
                <Switch x:Name="switch3" />
                <Label>
                    <Label.Style>
                        <Binding Path="IsToggled" Source="{x:Reference switch3}">
                            <Binding.Converter>
                                <local:BoolToObjectConvert x:TypeArguments="Style">
                                    <local:BoolToObjectConvert.TrueObject>
                                        <Style TargetType="Label">
                                            <Setter Property="Text" Value="Indubitably!" />
                                            <Setter Property="FontAttributes" Value="Italic, Bold" />
                                            <Setter Property="TextColor" Value="Green" />
                                        </Style>
                                    </local:BoolToObjectConvert.TrueObject>

                                    <local:BoolToObjectConvert.FalseObject>
                                        <Style TargetType="Label">
                                            <Setter Property="Text" Value="Maybe later" />
                                            <Setter Property="FontAttributes" Value="None" />
                                            <Setter Property="TextColor" Value="Red" />
                                        </Style>
                                    </local:BoolToObjectConvert.FalseObject>
                                </local:BoolToObjectConvert>
                            </Binding.Converter>
                        </Binding>
                    </Label.Style>
                </Label>

            </StackLayout>
        </StackLayout>

    </StackLayout>

</ContentPage>

실행화면

 

해당 예제에서는 변환기를 사용하여 Switch 의 Toggle 따른 표현방법을 설정했다. x:TypeArguments는 제네릭 인수를 나타내며, TrueObject, FalseObject로 해당 형식의 개체로 설정하고 있다. Style 개체가 TrueObject, FalseObject 형식에 맞게 설정 가능하다.

 

바인딩 변환기에 매개변수를 지정하는 방식도 있다. 다음에는 매개변수를 통한 방법을 알 수 있다.

[참고]

 

https://learn.microsoft.com/ko-kr/dotnet/maui/fundamentals/data-binding/converters#binding-converter-properties

바인딩 값 변환기 - .NET MAUI