다음을 통해 공유


바인딩 모드

Browse sample. 샘플 찾아보기

모든 .NET 다중 플랫폼 앱 UI(.NET MAUI) 바인딩 가능 속성에는 바인딩 가능한 속성을 만들 때 설정되고 개체의 BindableProperty 속성에서 DefaultBindingMode 사용할 수 있는 기본 바인딩 모드가 있습니다. 기본 바인딩 모드는 속성이 데이터 바인딩 대상일 때 적용되는 모드를 나타냅니다. Rotation, ScaleOpacity와 같은 대부분의 속성에 대한 기본 바인딩 모드는 OneWay입니다. 이러한 속성이 데이터 바인딩 대상인 경우에는 대상 속성이 원본에서 설정됩니다.

다음 예제에서는 다음에 정의된 데이터 바인딩을 Slider보여줍니다.

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

이 예제 Label 에서는 데이터 바인딩 원본이며 Slider 대상입니다. 바인딩은 LabelOpacity 속성을 참조하며, 기본값은 1일입니다. 따라서 초기 Slider 값에서 1 값으로 Opacity 초기화됩니다 Label. 다음 스크린샷에 표시됩니다.

Reverse binding.

또한 계속 Slider 작동합니다. 이는 속성 Slider 의 기본 바인딩 모드가 Value .이므로 TwoWay. 즉, 속성이 Value 데이터 바인딩 대상인 경우 대상은 원본에서 설정되지만 원본도 대상에서 설정됩니다. 이렇게 하면 Slider 초기 Opacity 값에서 설정할 수 있습니다.

참고 항목

바인딩 가능한 속성은 속성이 실제로 변경되지 않는 한 속성 변경에 대한 신호를 표시하지 않습니다. 이를 통해 무한 루프가 방지됩니다.

대상 속성의 기본 바인딩 모드가 특정 데이터 바인딩에 적합하지 않은 경우 열거형의 멤버 중 하나로 속성(또는 Mode 태그 확장의 속성)을 설정 ModeBinding 하여 재정의 BindingBindingMode 할 수 있습니다.

  • Default
  • TwoWay — 데이터는 원본과 대상 간에 양방향으로 이동합니다.
  • OneWay — 데이터가 원본에서 대상으로 이동합니다.
  • OneWayToSource — 데이터가 대상에서 원본으로 이동합니다.
  • OneTime — 데이터가 원본에서 대상으로 바뀌지만 변경되는 BindingContext 경우에만

양방향 바인딩

대부분의 바인딩 가능한 속성에는 기본 바인딩 모드가 OneWay 있지만 일부 속성에는 다음을 포함한 기본 바인딩 모드 TwoWay가 있습니다.

이러한 속성은 데이터 바인딩이 MVVM(Model-View-ViewModel) 패턴과 함께 사용될 때 viewmodel 클래스가 데이터 바인딩 원본이며 뷰(예: 뷰로 Slider구성됨)가 데이터 바인딩 대상이기 때문에 정의 TwoWay 됩니다. MVVM 바인딩은 페이지의 각 보기를 viewmodel의 해당 속성 값으로 초기화하려고 하지만 뷰의 변경 내용도 viewmodel 속성에 영향을 주므로 위의 예제와 유사합니다.

단방향 원본 바인딩

바인딩할 수 있는 읽기 전용 속성의 기본 바인딩 모드는 OneWayToSource입니다. 예를 들어 속성의 SelectedItemListView 기본 바인딩 모드 OneWayToSource는 . 이는 속성에 대한 바인딩으로 SelectedItem 인해 바인딩 원본이 설정되어야 하므로 발생합니다.

일회성 바인딩

바인딩 모드가 OneTime인 대상 속성은 바인딩 컨텍스트가 변경되는 경우에만 업데이트됩니다. 이러한 대상 속성의 바인딩은 원본 속성의 변경 내용을 모니터링할 필요가 없기 때문에 바인딩 인프라가 간소화됩니다.

EntryIsTextPredictionEnabled 속성을 포함하여 몇 가지 속성은 OneTime의 기본 바인딩 모드가 있습니다.

Viewmodels 및 속성 변경 알림

데이터 바인딩에서 viewmodel을 사용하는 경우 viewmodel은 데이터 바인딩 원본입니다. viewmodel은 바인딩 가능한 속성을 정의하지 않지만 속성 값이 변경될 때 바인딩 인프라에 알림을 받을 수 있는 알림 메커니즘을 구현합니다. 이 알림 메커니즘은 INotifyPropertyChanged 인터페이스이며 PropertyChanged라는 단일 이벤트를 정의합니다. 이 인터페이스를 구현하는 클래스는 일반적으로 해당 공용 속성 중 하나가 값을 변경할 때 이벤트를 발생합니다. 속성이 변경되지 않는 경우 이벤트를 발생시키지 않아도 됩니다. 인터페이스도 INotifyPropertyChanged 구현되며 BindableObjectPropertyChanged 바인딩 가능한 속성이 값을 변경할 때마다 이벤트가 발생합니다.

다음 예제에서 데이터 바인딩을 사용하면 색상, 채도 및 광도에 대해 세 Slider 가지 요소를 사용하여 색을 선택할 수 있습니다.

public class HslColorViewModel : INotifyPropertyChanged
{
    Color color;
    string name;
    float hue;
    float saturation;
    float luminosity;

    public event PropertyChangedEventHandler PropertyChanged;

    public float Hue
    {
        get
        {
            return hue;
        }
        set
        {
            if (hue != value)
            {
                Color = Color.FromHsla(value, saturation, luminosity);
            }
        }
    }

    public float Saturation
    {
        get
        {
            return saturation;
        }
        set
        {
            if (saturation != value)
            {
                Color = Color.FromHsla(hue, value, luminosity);
            }
        }        
    }

    public float Luminosity
    {
        get
        {
            return luminosity;
        }
        set
        {
            if (luminosity != value)
            {
                Color = Color.FromHsla(hue, saturation, value);
            }
        }
    }

    public Color Color
    {
        get
        {
            return color;
        }
        set
        {
            if (color != value)
            {
                color = value;
                hue = color.GetHue();
                saturation = color.GetSaturation();
                luminosity = color.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"));

                Name = NamedColor.GetNearestColorName(color);
            }
        }
    }

    public string Name
    {
        get
        {
            return name;
        }
        private set
        {
            if (name != value)
            {
                name = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name"));
            }
        }
    }
}

이 예제에서 클래스는 HslColorViewModel , Saturation, LuminosityColorName 속성을 정의합니다Hue. 세 가지 색 구성 요소 중 하나가 값을 Color 변경하면 속성이 다시 계산되고 PropertyChanged 네 가지 속성 모두에 대해 이벤트가 발생합니다. 속성이 Color 변경되면 클래스의 정적 GetNearestColorName 메서드는 NamedColor 가장 가까운 명명된 색을 가져오고 속성을 설정합니다 Name .

viewmodel이 바인딩 소스로 설정되면 바인딩 인프라는 이벤트에 처리기를 PropertyChanged 연결합니다. 이러한 방식으로 바인딩은 속성에 대한 변경 내용을 알리고 변경된 값에서 대상 속성을 설정할 수 있습니다. 하지만 대상 속성(또는 대상 속성의 Binding 정의)에 OneTimeBindingMode가 있으면 바인딩 인프라가 PropertyChanged 이벤트에 대한 처리기를 연결할 필요가 없습니다. 대상 속성은 BindingContext가 변경되는 경우에만 업데이트됩니다. 원본 속성 자체가 변경되는 경우에는 업데이트되지 않습니다.

다음 XAML은 다음을 HslColorViewModel사용합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataBindingDemos"
             x:Class="DataBindingDemos.SimpleColorSelectorPage">
    <ContentPage.BindingContext>
        <local:HslColorViewModel Color="MediumTurquoise" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <Style TargetType="Slider">
            <Setter Property="VerticalOptions" Value="CenterAndExpand" />
        </Style>
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <BoxView Color="{Binding Color}"
                 Grid.Row="0" />
        <StackLayout Grid.Row="1"
                     Margin="10, 0">
            <Label Text="{Binding Name}"
                   HorizontalTextAlignment="Center" />
            <Slider Value="{Binding Hue}" />
            <Slider Value="{Binding Saturation}" />
            <Slider Value="{Binding Luminosity}" />
        </StackLayout>
    </Grid>
</ContentPage>

이 예제에서는 HslColorViewModel 인스턴스화되고 Color 속성이 설정되며 페이지 BindingContext로 설정됩니다. BoxView, Label 및 세 가지 Slider뷰는 ContentPage에서 바인딩 컨텍스트를 상속받습니다. 이러한 뷰는 모두 viewmodel의 원본 속성을 참조하는 바인딩 대상입니다. Color 속성 및 Text 해당 속성BoxViewLabel경우 데이터 바인딩은 OneWay 뷰의 속성이 viewmodel의 속성에서 설정됩니다. 그러나 이 속성SliderValue 바인딩 모드를 TwoWay 사용합니다. 이렇게 하면 viewmodel에서 각각 Slider 을 설정하고 각 Slider뷰 모델에서 viewmodel을 설정할 수 있습니다.

예제가 처음 실행BoxView되면 viewmodel이 인스턴스화되었을 때 설정된 초기 Color 속성에 따라 viewmodel에서 세 LabelSlider 개의 요소가 모두 설정됩니다.

Simple color selector.

슬라이더 BoxViewLabel 를 조작할 때 그에 따라 업데이트됩니다.

바인딩 모드 재정의

대상 속성의 바인딩 모드는 열거형의 Binding 멤버 중 하나로 속성(또는 Mode 태그 확장의 Binding 속성)을 설정 Mode 하여 재정의 BindingMode 할 수 있습니다.

그러나 속성을 설정해 Mode 도 항상 예상된 결과가 생성되지는 않습니다. 예를 들어 다음 예제에서는 속성 TwoWayMode 예상대로 작동하지 않도록 설정합니다.

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

이 예제에서는 속성의 Slider 초기 값 Scale (1)으로 초기화될 것으로 예상될 수 있지만, 그렇지 않습니다. TwoWay 바인딩이 초기화되면 먼저 원본을 통해 대상이 설정됩니다. 즉, Scale 속성이 Slider 기본값인 0으로 설정됩니다. TwoWay 바인딩이 Slider에 설정되면 Slider는 원본을 통해 초기 설정됩니다.

또는 바인딩 모드를 다음으로 OneWayToSource설정할 수 있습니다.

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

Slider 이제 1(기본값Scale)로 초기화되지만 조작은 Slider 속성에 Scale 영향을 주지 않습니다.

참고 항목

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

바인딩 모드를 사용하여 기본 바인딩 모드 TwoWay 를 재정의하는 매우 유용한 애플리케이션에는 .의 ListView속성이 SelectedItem 포함됩니다. 기본 바인딩 모드는 OneWayToSource입니다. viewmodel의 SelectedItem 원본 속성을 참조하기 위해 속성에 데이터 바인딩을 설정하면 해당 원본 속성이 선택 영역에서 ListView 설정됩니다. 그러나 경우에 따라 viewmodel에서 초기화할 수도 있습니다 ListView .

Important

기본 바인딩 모드는 컨트롤마다 다를 수 있으며 바인딩 가능한 속성을 만들 때 설정됩니다. 개체의 속성 BindableProperty 에서 DefaultBindingMode 사용할 수 있습니다.