XAML에서 데이터 바인딩 사용

6분

데이터 바인딩은 태그 확장을 사용하여 코드나 XAML로 선언할 수 있습니다. 이 단원에서는 바인딩을 만드는 가장 일반적인 방법인 후자에 대해 설명합니다. 사람들이 XAML을 선호하는 몇 가지 이유가 있습니다. 첫째, 바인딩은 표시할 UI의 데이터를 가져오기 때문에 대부분의 사람들이 바인딩을 UI 코드의 일부라고 생각합니다. 둘째, Binding이라는 태그 확장이 있어서 작업을 쉽게 처리할 수 있습니다.

데이터 바인딩이란?

바인딩이란 두 속성을 서로 연결하는 것입니다. 한 속성은 UI에 있고 다른 속성은 데이터-모델 개체에 있다고 가정해 봅시다. 어느 한 속성의 값이 변경될 때 바인딩 개체는 나머지 속성을 업데이트할 수 있습니다. 즉, 바인딩은 UI와 데이터를 동기화하는 중간 개체입니다. 관련된 두 개체를 식별하기 위해 원본과 대상이라는 용어를 사용합니다.

원본 제공: 모든 형식의 개체는 원본이 될 수 있습니다. 실제로는 일반적으로 데이터-개체를 원본으로 사용합니다. 바인딩에 참여하려면 원본 개체의 속성을 식별해야 합니다. 바인딩에서 Path 속성을 설정하여 속성을 식별합니다.
대상: 대상은 BindableProperty라는 특수한 속성을 사용하여 구현된 속성입니다. BindableProperty가 포함된 개체는 BindableObject에서 파생되어야 합니다. .NET MAUI에서 제공되는 모든 컨트롤은 BindableObject에서 파생되며 대부분의 속성은 BindableProperties입니다.

다음 다이어그램은 바인딩이 두 속성 사이의 매개 개체인 방식을 보여 줍니다.

원본 개체 속성과 대상 개체의 바인딩 가능 속성 사이의 매개자로서의 바인딩을 설명하는 다이어그램.

XAML에서 데이터 바인딩을 만드는 방법

{Binding} 태그 확장을 사용하여 XAML에서 만든 간단한 바인딩을 살펴보겠습니다. 이 예에서는 원본의 WeatherService.Humidity 속성을 UI 컨트롤의 Text 속성에 연결합니다.

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <ResourceDictionary>
            <services:WeatherService x:Key="myWeatherService" />
        </ResourceDictionary>
    </VerticalStackLayout.Resources>

    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

바인딩 소스는 다음과 같습니다.

WeatherService 형식의 개체 인스턴스. 인스턴스는 스택 레이아웃의 리소스 사전에 있는 개체를 가리키는 {StaticResource ...} XAML 확장을 통해 참조됩니다.
Path는 WeatherService 형식의 Humidity라는 속성을 가리킵니다.

Path는 {Binding} 구문의 첫 번째 명명되지 않은 매개 변수이고, Path= 구문은 생략될 수 있습니다. 다음 두 바인딩은 동등합니다.
```
<Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
<Label Text="{Binding Humidity, Source={StaticResource myWeatherService}}" />
```

바인딩 대상은 다음과 같습니다.

Label 컨트롤.
컨트롤의 Text 속성.

UI가 표시되면 {Binding} XAML 확장은 WeatherService와 Label 사이에 바인딩을 만듭니다. 바인딩은 WeatherService.Humidity 속성의 값을 Label.Text 속성으로 읽어옵니다.

다른 컨트롤을 바인딩 소스로 사용

바인딩의 유용한 기능 중 하나는 다른 컨트롤에 바인딩할 수 있다는 것입니다. 다음 XAML은 간단한 데모입니다.

<VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <Label x:Name="TargetLabel" Text="TEXT TO ROTATE" BackgroundColor="Yellow" />
    <Slider WidthRequest="100" Maximum="360"
            Value="{Binding Rotation, Mode=OneWayToSource, Source={x:Reference TargetLabel}}" />
</VerticalStackLayout>

Slider.Value 속성은 Label.Rotation 속성에 바인딩되지만 이전에 설명한 것과 다른 방식으로 바인딩됩니다. 이 속성은 일반적인 바인딩 메커니즘을 반대로 하는 바인딩 모드 OneWayToSource를 사용합니다. 원본이 대상을 업데이트하는 대신, 대상이 변경되면 OneWayToSource가 원본을 업데이트합니다. 이 예에서 슬라이더가 움직이면 다음 애니메이션에서 보여지는 것처럼 슬라이더의 값에 따라 레이블의 회전이 업데이트됩니다.

마우스로 끄는 슬라이더 컨트롤의 애니메이션 이미지. 슬라이더가 움직이면 텍스트가 회전하여 슬라이더 위치에 맞게 조정됩니다.

컨트롤을 서로 바인딩하는 일반적인 시나리오는 일반적으로 ListView 또는 CarouselView와 같은 컬렉션 컨트롤에 데이터 원본으로 사용하려는 선택된 항목이 있는 경우입니다. 날씨 예보를 표시하는 페이지의 예에서 ListView는 5일 예보를 표시할 수 있습니다. 사용자가 목록에서 날짜를 선택하면 해당 날씨 예보의 세부 정보가 다른 컨트롤에 표시됩니다. 사용자가 다른 날을 선택하면 다른 컨트롤도 선택한 날의 세부 정보로 다시 업데이트됩니다.

여러 바인딩에서 동일한 원본 사용

이전 예에서는 단일 바인딩의 원본으로 정적 리소스를 사용하는 방법을 보여 주었습니다. 해당 원본은 여러 바인딩에 사용될 수 있습니다. 다음은 세 개의 서로 다른 컨트롤에 바인딩을 선언하는 예입니다. 모두 동일한 개체와 속성 Path에 바인딩되지만 일부는 Path 속성을 생략합니다.

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <vm:SimpleWeatherServiceObject x:Key="myWeatherService" />
    </VerticalStackLayout.Resources>
    <Entry Text="{Binding Humidity, Source={StaticResource myWeatherService}}" />
    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

동일한 Source를 사용할 때는 동일한 Path를 사용할 필요가 없습니다.

<VerticalStackLayout Margin="10">
    <VerticalStackLayout.Resources>
        <vm:SimpleWeatherServiceObject x:Key="myWeatherService" />
    </VerticalStackLayout.Resources>
    <Entry Text="{Binding Temperature, Source={StaticResource myWeatherService}}" />
    <Label Text="{Binding Path=Humidity, Source={StaticResource myWeatherService}}" />
</VerticalStackLayout>

하나의 원본에서 단일 데이터를 제시하는 일은 거의 없지만, 그럴 가능성도 있습니다. 일반적으로 동일한 원본의 다양한 데이터를 사용하는 여러 가지 컨트롤이 있습니다. 이 상황은 너무 일반적이어서 BindableObject 클래스에 데이터 바인딩의 원본으로 작동하는 BindingContext라는 속성이 있습니다. .NET MAUI 컨트롤은 BindableObject 클래스에서 상속되므로 .NET MAUI 컨트롤에는 BindingContext 속성이 있습니다.

바인딩의 Source를 설정하는 것은 선택 사항입니다. Source가 설정되지 않은 바인딩은 XAML 시각적 트리에서 XAML에서 설정되거나 코드에 의해 부모 요소에 할당되는 BindingContext를 자동으로 검색합니다. 바인딩은 다음 패턴에 따라 평가됩니다.

바인딩이 Source를 정의하는 경우 해당 원본이 사용되고 검색이 중지됩니다. 바인딩의 Path를 Source에 적용하여 값을 가져옵니다. Source가 설정되지 않으면 바인딩 소스에 대한 검색이 시작됩니다.
가장 먼저 검색되는 것은 대상 개체 자체입니다. 대상 개체의 BindingContext가 null이 아니면 검색이 중지되고 바인딩의 Path가 BindingContext에 적용되어 값을 가져옵니다. BindingContext가 null이면 검색이 계속됩니다.
이 프로세스는 XAML 루트에 도달할 때까지 계속됩니다. 검색은 루트의 BindingContext에 null이 아닌 값이 있는지 확인하여 끝납니다. 유효한 BindingContext를 찾을 수 없으면 바인딩은 바인딩할 대상이 없으므로 아무 작업도 수행하지 않습니다.

전체 XAML에 적용하려면 루트 개체 수준에서 BindingContext를 설정하는 것이 일반적입니다.

마지막으로 살펴볼 편리한 기능이 하나 더 있습니다. 바인딩은 원본의 개체 참조가 변경되는지 감시합니다. 이는 BindingContext를 원본으로 사용하는 바인딩에도 작동합니다. Source 또는 BindingContext가 다른 개체에 재할당되면 바인딩은 새 원본의 데이터를 가져와서 대상을 업데이트합니다.

지식 점검

.NET MAUI 바인딩의 원본 개체에 대해 맞는 설명은 무엇인가요?

모든 형식은 원본 개체가 될 수 있습니다.

BindableObject로 지정해야 합니다.

View의 하위 클래스여야 합니다.

.NET MAUI 바인딩의 대상 속성에 대해 옳은 것은 무엇인가요?

모든 공용 속성은 대상 속성이 될 수 있습니다.

BindableProperty로 지정해야 합니다.

DependencyProperty로 지정해야 합니다.

Grid 내의 컨트롤에의 모든 바인딩이 동일한 원본 개체가 필요한 경우 원본 개체를 한 번만 설정하는 가장 안전한 전략은 무엇인가요?

Page의 BindingContext 속성을 설정합니다.

Page의 Source 속성을 설정합니다.

Grid의 BindingContext 속성을 설정합니다.