[MAUI] 바인딩 변환기 매개변수

바인딩 클래스는 ConverterParameter 속성을 정의한다. 이 속성이 설정되어 있는 경우 값은 parameter 매개변수로 Convert 및 ConvertBack 메서드에 전달된다. 예제를 통해 ConverterParameter 속성 사용방법을 알아보자.

 

 

BoxViewModel

public class BoxViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private int _width = 50;
    public int width
    {
        get { return _width; }
        set
        {
            if(_width != value)
            {
                _width = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("width"));
            }
        }
    }

    private int _height = 50;
    public int height
    {
        get { return _height; }
        set
        {
            if (_height != value)
            {
                _height = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("height"));
            }
        }
    }

    private int _cornerRadius = 0;
    public int cornerRadius
    {
        get { return _cornerRadius; }
        set
        {
            if (_cornerRadius != value)
            {
                _cornerRadius = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("cornerRadius"));
            }
        }
    }
}

BoxViewModel 클래스를 만들어 width, height, radius 값을 받을수 있도록 했다. 값이 변경되었을 경우 반영 되도록 INofiyPropertyChanged 를 이용하였다.

 

 

 

FloatToIntConverter

public class FloatToIntConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        //return (int)Math.Round((float)value * (float)parameter);
        return (int)value * GetParameter(parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (int)value / GetParameter(parameter);
    }

    private double GetParameter(object parameter)
    {
        if(parameter is float)
        {
            return (float)parameter;
        }
        else if (parameter is int)
        {
            return (int)parameter;
        }
        else if (parameter is string)
        {
            return float.Parse((string)parameter);
        }

        return 1;

    }
}

IValueConvert 를 받아 Convert 를 만들었으며 Parameter 속성 값을 재정의 하는 곳이다. 해당 클래스에서 입력되 값을 재정의 하여 반환해준다.

 

 

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"
    xmlns:vm="clr-namespace:MauiApp1.ViewModel"
    Title="TestPage"
    Padding="20">

    <ContentPage.BindingContext>
        <vm:BoxViewModel x:Name="bvm" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <Style TargetType="Slider">
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="HorizontalTextAlignment" Value="Center" />
        </Style>

        <local:FloatToIntConverter x:Key="floatToIntConverter" />
    </ContentPage.Resources>

    <StackLayout Margin="10,0">

        <BoxView
            CornerRadius="{Binding cornerRadius}"
            HeightRequest="{Binding height}"
            HorizontalOptions="Center"
            WidthRequest="{Binding width}"
            Color="Black" />

        <Slider
            Maximum="1000"
            Minimum="1"
            Value="{Binding width}" />
        <Label Text="{Binding width, Converter={StaticResource floatToIntConverter}, ConverterParameter=10, StringFormat='width : {0:X2}'}" />

        <Slider
            Maximum="1000"
            Minimum="1"
            Value="{Binding height}" />
        <Label Text="{Binding height, Converter={StaticResource floatToIntConverter}, ConverterParameter=10, StringFormat='height : {0:#,##0'}" />

        <Slider
            Maximum="100"
            Minimum="0"
            Value="{Binding cornerRadius}" />
        <Label Text="{Binding cornerRadius, Converter={StaticResource floatToIntConverter}, ConverterParameter=1, StringFormat='cornerRadius : {0:X2}'}" />

    </StackLayout>
</ContentPage>

실행화면

해당 코드를 실행시 위 이미지처럼 실행 가능하다. Parameter 값을 넘겨 필요시 해당 처럼 이용하면 된다.

[참고]

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