기본 바인딩

아티클
02/13/2024

Browse sample. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) 데이터 바인딩은 두 개체 간에 속성 쌍을 연결하며, 그 중 하나 이상은 일반적으로 사용자 인터페이스 개체입니다. 이러한 두 개체는 대상 및 원본이라고 합니다.

대상은 데이터 바인딩이 설정된 개체(및 속성)입니다.
원본은 데이터 바인딩에서 참조하는 개체(및 속성)입니다.

가장 간단한 경우 데이터는 소스에서 대상으로 이동합니다. 즉 대상 속성의 값이 소스 속성의 값에서 설정됩니다. 하지만 어떤 경우에는 데이터가 대상에서 원본으로 또는 양방향으로 이동할 수 있습니다.

Important

대상은 데이터를 받는 대신 데이터를 제공하는 경우에도 항상 데이터 바인딩이 설정되는 개체입니다.

바인딩 컨텍스트를 사용하는 바인딩

다음 XAML 예제를 고려합니다. 이 예제는 다음을 조작하여 회전 Label 하려는 의도입니다 Slider.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BasicCodeBindingPage"
             Title="Basic Code Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="48"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

데이터 바인딩이 없으면 Slider의 ValueChanged 이벤트를 Slider의 Value 속성에 액세스하고 해당 값을 Label의 Rotation 속성으로 설정하는 이벤트 처리기로 설정합니다. 데이터 바인딩은 이 작업을 자동화하므로 이벤트 처리기와 그 안의 코드가 더 이상 필요하지 않습니다.

Element, VisualElement, View 및 View 파생문이 포함된 BindableObject에서 파생되는 모든 클래스의 인스턴스에 바인딩을 설정할 수 있습니다. 바인딩은 항상 대상 개체에 설정됩니다. 바인딩은 원본 개체를 참조합니다. 데이터 바인딩을 설정하려면 대상 클래스의 다음 두 멤버를 사용합니다.

BindingContext 속성은 원본 개체를 지정합니다.
SetBinding 메서드는 대상 속성 및 원본 속성을 지정합니다.

이 예제에서 Label은 바인딩 대상이고 Slider는 바인딩 원본입니다. Slider 원본의 변경은 Label 대상의 회전에 영향을 줍니다. 데이터는 원본에서 대상으로 이동합니다.

BindableObject에서 정의된 SetBinding 메서드에 Binding 클래스에서 파생되는 BindingBase 형식의 인수가 있지만, BindableObjectExtensions 클래스에서 정의된 다른 SetBinding 메서드가 있습니다. XAML의 코드 숨김은 클래스에서 더 SetBinding 간단한 확장 메서드를 BindableObjectExtensions 사용합니다.

public partial class BasicCodeBindingPage : ContentPage
{
    public BasicCodeBindingPage()
    {
        InitializeComponent();

        label.BindingContext = slider;
        label.SetBinding(Label.RotationProperty, "Value");
    }
}

Label 개체는 바인딩 대상이므로 이 속성이 설정되고 메서드가 호출되는 개체입니다. BindingContext 속성은 바인딩 원본, 즉 Slider를 나타냅니다. SetBinding 메서드는 바인딩 대상에서 호출되지만 대상 속성과 원본 속성을 모두 지정합니다. 대상 속성은 BindableProperty 개체, 즉 Label.RotationProperty로 지정됩니다. 원본 속성은 문자열로 지정되고 Slider의 Value 속성을 나타냅니다.

Important

대상 속성은 바인딩 가능한 속성으로 지원되어야 합니다. 따라서 대상 개체는 에서 파생 BindableObject되는 클래스의 인스턴스여야 합니다. 자세한 내용은 바인딩 가능한 속성을 참조 하세요.

원본 속성은 문자열로 지정됩니다. 내부적으로 리플렉션은 실제 속성에 액세스하는 데 사용됩니다. 그러나 이 특별한 경우에는 Value 속성도 바인딩 가능한 속성으로 지원됩니다.

Slider를 조작하면 이에 따라 Label이 회전합니다.

Basic code binding.

또는 XAML에서 데이터 바인딩을 지정할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BasicXamlBindingPage"
             Title="Basic XAML Binding">
    <StackLayout Padding="10, 0">
        <Label Text="TEXT"
               FontSize="80"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               BindingContext="{x:Reference Name=slider}"
               Rotation="{Binding Path=Value}" />

        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

코드에서와 마찬가지로 데이터 바인딩은 대상 개체, 즉 Label에 설정됩니다. 데이터 바인딩을 정의하는 데 두 개의 XAML 태그 확장이 사용됩니다.

x:Reference 태그 확장은 원본 개체, 즉 slider라는 Slider를 참조하는 데 필요합니다.
Binding 태그 확장에서 Label의 Rotation 속성을 Slider의 Value 속성에 연결합니다.

XAML 태그 확장에 대한 자세한 내용은 XAML 태그 확장 사용을 참조 하세요.

참고 항목

소스 속성은 클래스의 Binding 속성에 해당하는 태그 확장의 Binding 속성으로 Path 지정 Path 됩니다.

즉, x:Reference 및 Binding과 같은 XAML 태그 확장에는 ‘콘텐츠 속성’ 특성이 정의될 수 있으며, 이는 XAML 태그 확장의 경우 속성 이름을 표시할 필요가 없음을 의미합니다. Name 속성은 x:Reference의 콘텐츠 속성이고, Path 속성은 Binding의 콘텐츠 속성입니다. 즉 다음 식에서 해당 속성을 제외할 수 있습니다.

<Label Text="TEXT"
       FontSize="80"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       BindingContext="{x:Reference slider}"
       Rotation="{Binding Value}" />

바인딩 컨텍스트가 없는 바인딩

BindingContext 속성은 데이터 바인딩의 중요한 구성 요소이지만 항상 필요한 것은 아닙니다. 대신 호출 또는 태그 확장에서 원본 개체를 SetBindingBinding 지정할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.AlternativeCodeBindingPage"
             Title="Alternative Code Binding">
    <StackLayout Padding="10, 0">
        <Label x:Name="label"
               Text="TEXT"
               FontSize="40"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Slider x:Name="slider"
                Minimum="-2"
                Maximum="2"
                VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

이 예제에서는 .의 Slider 속성을 제어 Scale 하도록 정의됩니다 Label. 이러한 이유로 Slider -2에서 2까지의 범위로 설정됩니다.

코드 숨김 파일은 메서드를 사용하여 바인딩을 SetBinding 설정하며 두 번째 인수는 클래스의 Binding 생성자입니다.

public partial class AlternativeCodeBindingPage : ContentPage
{
    public AlternativeCodeBindingPage()
    {
        InitializeComponent();

        label.SetBinding(Label.ScaleProperty, new Binding("Value", source: slider));
    }
}

Binding 생성자에는 6개의 매개 변수가 있으므로 source 매개 변수는 명명된 인수로 지정됩니다. 인수는 slider 개체입니다.

참고 항목

또한 VisualElement 클래스는 VisualElement의 크기를 가로 및 세로 방향으로 다르게 확장할 수 있는 ScaleX 및 ScaleY 속성을 정의합니다.

또는 XAML에서 데이터 바인딩을 지정할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.AlternativeXamlBindingPage"
             Title="Alternative XAML Binding">
    <StackLayout Padding="10, 0">
        <Label Text="TEXT"
               FontSize="40"
               HorizontalOptions="Center"
               VerticalOptions="Center"
               Scale="{Binding Source={x:Reference slider},
                               Path=Value}" />

        <Slider x:Name="slider"
                Minimum="-2"
                Maximum="2"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

이 예제 Binding 에서 태그 확장에는 쉼표로 구분된 두 개의 속성 집합 Source 이 있습니다 Path. Source 속성은 포함된 x:Reference 태그 확장으로 설정되며, 그렇지 않으면 BindingContext를 설정하는 것과 동일한 구문이 포함됩니다.

Binding 태그 확장의 콘텐츠 속성은 Path이지만, 태그 확장의 Path= 부분은 식의 첫 번째 속성인 경우에만 제거할 수 있습니다. Path= 부분을 제거하려면 다음 두 속성을 교환해야 합니다.

Scale="{Binding Value, Source={x:Reference slider}}" />

XAML 태그 확장은 일반적으로 중괄호로 구분되지만, 개체 요소로도 표현할 수 있습니다.

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Label.Scale>
        <Binding Source="{x:Reference slider}"
                 Path="Value" />
    </Label.Scale>
</Label>

이 예제에서 속성은 SourcePath 일반 XAML 특성입니다. 값이 따옴표 안에 표시되고, 특성은 쉼표로 구분되지 않습니다. 또한 x:Reference 태그 확장은 개체 요소가 될 수 있습니다.

<Label Text="TEXT"
       FontSize="40"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Label.Scale>
        <Binding Path="Value">
            <Binding.Source>
                <x:Reference Name="slider" />
            </Binding.Source>
        </Binding>
    </Label.Scale>
</Label>

이 구문은 일반적이지 않지만, 때때로 복잡한 개체가 관련되는 경우에는 필요합니다.

지금까지 표시된 예제에서는 BindingContext 속성과 Binding의 Source 속성을 x:Reference 태그 확장으로 설정하여 페이지의 다른 보기를 참조했습니다. 이 두 속성은 Object 형식이며, 바인딩 원본에 적합한 속성이 포함된 개체로 설정할 수 있습니다. 또는 속성을 태그 확장으로 설정 BindingContextSource 하여 x:Static 정적 속성이나 필드의 값을 참조하거나 StaticResource 태그 확장을 설정하여 리소스 사전에 저장된 개체를 참조하거나 viewmodel의 인스턴스인 개체에 직접 참조할 수도 있습니다.

참고 항목

또한 BindingContext 속성을 Binding 개체로 설정하여 Binding의 Source 및 Path 속성에서 바인딩 컨텍스트를 정의할 수도 있습니다.

바인딩 컨텍스트 상속

개체의 속성 또는 속성을 사용하여 BindingContext 원본 개체를 SourceBinding 지정할 수 있습니다. 둘 다 설정되는 경우 Binding의 Source 속성이 BindingContext보다 우선합니다.

Important

BindingContext 속성 값은 시각적 트리를 통해 상속됩니다.

다음 XAML 예제에서는 바인딩 컨텍스트 상속을 보여 줍니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataBindingDemos.BindingContextInheritancePage"
             Title="BindingContext Inheritance">
    <StackLayout Padding="10">
        <StackLayout VerticalOptions="Fill"
                     BindingContext="{x:Reference slider}">

            <Label Text="TEXT"
                   FontSize="80"
                   HorizontalOptions="Center"
                   VerticalOptions="End"
                   Rotation="{Binding Value}" />

            <BoxView Color="#800000FF"
                     WidthRequest="180"
                     HeightRequest="40"
                     HorizontalOptions="Center"
                     VerticalOptions="Start"
                     Rotation="{Binding Value}" />
        </StackLayout>

        <Slider x:Name="slider"
                Maximum="360" />
    </StackLayout>
</ContentPage>

이 예제에서 BindingContext 속성 StackLayout 은 개체로 설정됩니다 slider . 이 바인딩 컨텍스트는 Label과 BoxView 모두에서 상속되며, 둘 모두의 Rotation 속성이 Slider의 Value 속성으로 설정됩니다.

Binding context inheritance.

기본 바인딩

바인딩 컨텍스트를 사용하는 바인딩

바인딩 컨텍스트가 없는 바인딩

바인딩 컨텍스트 상속

피드백

추가 리소스