[MAUI] 데이터 바인딩 기본 사항

.NET MAUI는 데이터 바인딩을 사용하며 두 개체의 속성을 연결하여 한 개체의 변경으로 다른 개체가 변경되도록 할 수 있다. 해당 기능은 매우 유용한 기능이며 데이터 바인딩을 코드에서 완전히 정의할 수 있지만 XAMl은 바로 가기 및 편의를 제공해준다.

 

데이터 바인딩

데이터 바인딩은 '원본'과 '대상'이라는 두 개체의 속성을 연결해준다. 쉽게 말해 서로 간의 속성이 연결이 되어 반응을 하는 것이다. 데이터 바인딩이 이루어지기 위해서는 두 단계가 필요하다.

1. BindingContext 대상 개체의 속성을 원본 개체로 설정해야 한다.
2. SetBinding 메서드는 대상 개체에서 호출하여 해당 개체의 속성을 원본 개체의 속성에 바인딩 해야 한다.

대상 속성은 바인딩 가능한 속성이여야 한다. 즉, 대상 개체가 파생되어야 하기 때문이다. 

XMAL에서 데이터 바인딩을 정의하는 경우 대상 개체를 설정하는 여러 가지 방법이 있다. 경우에 따라 코드 숨김 파일에서 설정되기도 하고 확장 프로그램 또는 태그를 사용되기도 한다.

 

사용방법

x:Reference 를 BindingContext에 태그 확장을 통해 가능하다. 동일한 페이지에서 진행해야 하며 두 개의 속성을 연결하며 정의하면 된다.

 

예시)

<StackLayout>
    <Label Text="ROTATION"
           BindingContext="{x:Reference slider}"
           Rotation="{Binding Path=Value}"
           FontAttributes="Bold"
           FontSize="18"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
    <Slider x:Name="slider"
            Maximum="360"
            VerticalOptions="Center" />
    <Label BindingContext="{x:Reference slider}"
           Text="{Binding Value, StringFormat='Value is {0:#,##0}'}"
           FontAttributes="Bold"
           FontSize="18"
           HorizontalOptions="Center"
           VerticalOptions="Center" />
</StackLayout>

Binding 의 Path 태그는 첫 번째 항목인 경우 생략 가능하다.

 

[참고]

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

데이터 바인딩 기본 사항 - .NET MAUI