.NET MAUI - Binding Relative bindings

Relative binding 이란

: 바인딩 대상의 위치를 기준으로 바인딩 소스를 설정하는 기능을 제공

 상대 바인딩은 RelativeSource 태그 확장을 사용하여 생성되며, 바인딩 식의 Source 속성으로 설정된다.

 

Mode (RelativeBindingSourceMode): 바인딩 대상의 위치에 상대적으로 바인딩 소스의 위치를 설명

AncestorLevel (int) : Mode 속성이 FindAncestor인 경우 살펴보아야 할 선택적 상위 항목 수준 

AncestorType (Type) : Mode 속성이 FindAncestor인 경우 살펴보아야 할 상위 항목 유형

 

XAML 파서를 사용하면 RelativeSourceExtension 클래스를 RelativeSource로 축약할 수 있다.

Mode 속성은 다음중 하나로 설정 되어야 한다. 

 

• TemplatedParent: 바운드 요소가 존재하는 템플릿이 적용되는 요소를 나타낸다. 
• Self: 바인딩이 설정되는 요소를 나타낸다. 
• FindAncestor: 바운드 요소의 시각적 트리에 있는 상위 항목을 나타낸다. 이 모드는 AncestorType 속성으로 표현되는 상위 항목 컨트롤에 바인딩하는 데 사용해야 한다. 
• FindAncestorBindingContext: 바운드 요소의 시각적 트리에 있는 상위 항목의 BindingContext를 나타낸다.
  이 모드는 AncestorType 속성으로 표현되는 상위 항목의 BindingContext에 바인딩하는 데 사용해야 한다.
  
  

자기 자신에게 바인딩

 요소의 속성을 동일한 요소의 다른 속성에 바인딩하는 데 사용된다.

<BoxView Color="Red"
         WidthRequest="200"
         HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}"
         HorizontalOptions="Center" />

HeightRequest 는 자신의 WidthRequest 에 바인딩 되고 결과 적으로 둘은 같은 크기가 되어 정사각형이 그려진다.

 

<ContentPage ...
             BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding Employees}">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

또는 상위 속성에 BindingContext 를 설정 하고 

위 코드에서 페이지의 BindingContext가 자기 자신의 DefaultViewModel 속성으로 설정되었다.

이 속성은 페이지의 코드 숨김 파일에 정의되어 있으며, viewmodel 인스턴스를 제공한다.

ListView는 viewmodel의 Employees 속성에 바인딩된다.

 

상위 항목에 바인딩

FindAncestor 및 FindAncestorBindingContext 상대 바인딩 모드는 시각적 트리에서 특정 유형의 부모 요소에 바인딩하는 데 사용된다.  FindAncestor 모드는 Element 형식에서 파생되는 부모 요소에 바인딩하는 데 사용된다.  FindAncestorBindingContext 모드는 부모 요소의 BindingContext에 바인딩하는 데 사용된다.

 

Mode 속성이 명시적으로 설정되지 않은 경우, AncestorType 속성을 Element에서 파생된 형식으로 설정하면 Mode 속성이 암시적으로 FindAncestor로 설정된다. 마찬가지로, AncestorType 속성을 Element에서 파생되지 않은 형식으로 설정하면 Mode 속성이 암시적으로 FindAncestorBindingContext로 설정된다.

<Label Text="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}}, Path=Title}" />

 

템플릿화된 부모에 바인딩 (이부분은 향후 템플릿 부분에서 설명한다.)

TemplatedParent 상대 바인딩 모드는 컨트롤 템플릿 내부에서 해당 템플릿이 적용되는 런타임 개체 인스턴스(템플릿화된 부모)에 바인딩하는 데 사용된다. 이 모드는 상대 바인딩이 컨트롤 템플릿 내부에 있는 경우에만 적용되며, TemplateBinding을 설정하는 것과 비슷하다.

 

관련영상

https://youtu.be/U77oRpRRdVs