[MAUI] Viewmodel 바인딩

VIewmodel 바인딩

 

데이터 바인딩에서 Viewmodel을 사용하는 경우 Viewmodel은 데이터 바인딩 원본이다. Viewmodel의 속성 값이 변경될 때 알림 메커니즘을 이용하여 속성 값을 변경한다. 알림 메커니즘은 INotifyPropertyChanged 인터페이스이며 PropertyChanged라는 이벤트를 정의한다. 이 인터페이스를 구현하는 클래스는 일반적으로 public 속성 중 하나가 값을 변경할 때 이벤트를 발생합니다. 

 

 

예시

간단하게 색상을 변경하는 예시이며 Hue, Saturation, Luminosity 값들을 받아 색상을 재정의하는 예시이다.

 

ColorViewModel 클래스

public class ColorViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    Color color;

    private float hue;
    private float saturation;
    private float luminosity;

    public float Hue
    {
        get => this.hue;

        set
        {
            if(this.hue != value)
            {
                Color = Color.FromHsla(value, saturation, luminosity);
            }
        }
    }

    public float Saturation
    {
        get => this.saturation;

        set
        {
            if (this.saturation != value)
            {
                Color = Color.FromHsla(this.hue, value, luminosity);
            }
        }
    }

    public float Luminosity
    {
        get => this.luminosity;

        set
        {
            if (this.luminosity != value)
            {
                Color = Color.FromHsla(this.hue, saturation, value);
            }
        }
    }

    public Color Color
    {
        get => color;

        set 
        {
            if(value != color)
            {
                color = value;

                this.hue = value.GetHue();
                this.saturation = value.GetSaturation();
                this.luminosity = value.GetLuminosity();

                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Hue"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Saturation"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Luminosity"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color"));
            }
        }
    }
}

INotifyPropertyChanged 인터페이스를 받아 PropertyChanged 이벤트로 속성 변경시 해당 이벤트를 발생시킨다.

 

 

TestPage.xmal 파일

<?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:local="clr-namespace:MauiApp1.Class"
             x:Class="MauiApp1.TestPage"
             Title="TestPage" Padding="20">

    <ContentPage.BindingContext>
        <local:ColorViewModel Color="Beige"></local:ColorViewModel>
    </ContentPage.BindingContext>
    
    <StackLayout>

        <BoxView HeightRequest="300" Color="{Binding Color}"></BoxView>

        <Slider Value="{Binding Hue}"></Slider>
        <Slider Value="{Binding Luminosity}"></Slider>
        <Slider Value="{Binding Saturation}"></Slider>
        
    </StackLayout>
</ContentPage>

실행 화면

각 Slider 에 따른 색상이 재정의되어 표시된다. Slider는 기본 TwoWay 방식이며 PropertyChanged 이벤트 발생이 되어야지 반영이 된다.

 

[참고]

https://docs.microsoft.com/ko-kr/dotnet/maui/fundamentals/data-binding/binding-mode

바인딩 모드 - .NET MAUI