WPF - Binding에 Sibling 요소 지정
MVVM 구조로 개발을 하다 보니, xaml 안에 정의되는 요소 내에 Name을 지정하는 것이 필요 없게 되었습니다. 물론, 일반적으로는 그렇지만 가끔씩 필요한 경우가 발생하게 되는데, 그 한 예가 요소 간에 바인딩을 지정할 때입니다.
그나마 상위 요소에 있을 때는 역시 이름을 제거하고 RelactiveSource.Mode=FindAncestor 식으로 탐색이 가능하지만, 형제 노드에 대해서는 탐색할 방법이 제공되지 않아 대상이 되는 요소에 이름을 지정해야만 합니다. 바로 이것! 형제 노드 탐색을 위한 바인딩을 제공하고 싶다면 어떻게 해야 할까요?
처음에 생각했던 방법은 Binding.Source에 마크업 확장을 이용하여 다음과 같은 식으로 지정하려고 했었습니다.
<Border Margin="20"
BorderBrush="{Binding Source={ext:Sibling}}"
BorderThickness="2" Grid.Row="1">
그런 후 SiblingExtension.ProvideValue 메서드에서 자신이 바인딩된 요소, 위의 경우에서는 Border 인스턴스를 찾아내어 그것의 형제 노드를 반환하는 식으로 구현하려고 했는데... ^^; 이게 웬일입니까?
public class SiblingExtension : MarkupExtension
{
public override object ProvideValue(IServiceProvider serviceProvider)
{
IProvideValueTarget target = serviceProvider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget;
Binding binding = target.TargetObject as Binding;
return null;
}
}
위의 코드를 실행해보면,
IProvideValueTarget.TargetObject가 의도한 대로 제가 원하는 Border - Dependency Object가 아닌 Binding 타입의 인스턴스를 반환합니다. 계층상으로 보면 Binding.Source에 ext:Sibling이 쓰였기 때문에 TargetObject가 Binding이 되는 것이 맞는 것 같습니다. 그렇긴 해도 Binding 자체에서는 그것의 요소를 구해낼 길이 없어서 위의 방법은 결국 포기를 해야 했습니다.
그렇다면, Binding 요소와 동일한 수준에서 마크업 확장을 구현해야만 가능하다는 것인데요. 다행히 Custom Binding을 구현한 소스코드를 웹에서 쉽게 찾을 수 있었습니다.
A base class for custom WPF binding markup extensions
; http://www.hardcodet.net/2008/04/wpf-custom-binding-class
그럼, 이를 응용해서 진행해볼까요? ^^
역시나 생각은 간단합니다. 사용법은 대략 다음과 같이 구성할 것입니다.
<Border BorderBrush="Blue">
</Border>
<Border BorderBrush="{ext:Sibling Path=BorderBrush}">
</Border>
위에서 의도하는 것은, 두 번째 Border의 BorderBrush가 첫 번째 Border.BorderBrush 값과 같게 하자는 것입니다.
이를 위해 BindingDecoratorBase를 상속받은 SiblingExtension을 정의합니다. 보시는 것처럼 굳이 Binding.Source를 지정할 필요는 없습니다. 왜냐하면 자기 자신을 기준으로 상위 노드로 올라간 후, 다시 자식 노드로 내려와서 형제 노드를 찾아 실행 시에 Binding.Source를 지정해 줄 것이기 때문입니다.
소스 코드도 제법 간단합니다. ^^
"
A base class for custom WPF binding markup extensions" 글에서 공개한 BindingDecoratorBase를 상속받은 SiblingExtension을 정의합니다.
[그림 1: SiblingExtension]
다행히, Binding.ProvideValue 호출에서는 IServiceProvider로부터 데이터 바인딩이 되는 개체의 인스턴스를 얻어올 수가 있습니다.
IProvideValueTarget service = (IProvideValueTarget)provider.GetService(typeof(IProvideValueTarget));
DependencyObject target = service.TargetObject as DependencyObject;
즉, 위에서 최종 결과인 target은 ext:Sibling을 담고 있는 Border 인스턴스가 됩니다. 그럼 ^^ 이걸로 게임 끝이군요.
SiblingExtension.ProvideValue에서는 다음과 같이 구현해 주어 Source에 형제 노드를 담아서 ProvideValue를 호출해 주면 됩니다.
public override object ProvideValue(IServiceProvider provider)
{
DependencyObject targetObject;
DependencyProperty targetProperty;
bool status = TryGetTargetItems(provider, out targetObject, out targetProperty);
DependencyObject parent = VisualTreeHelper.GetParent(targetObject);
int thisIndex = 0;
int count = VisualTreeHelper.GetChildrenCount(parent);
for (int childIndex = 0; childIndex < count; childIndex++)
{
DependencyObject item = VisualTreeHelper.GetChild(parent, childIndex);
if (item == targetObject)
{
thisIndex = childIndex;
}
}
int targetIndex = Math.Max(0, thisIndex - 1);
DependencyObject sibling = VisualTreeHelper.GetChild(parent, targetIndex);
this.Source = sibling;
return base.ProvideValue(provider);
}
그런대로 잘 동작하지만, 몇 가지 아쉬운 점이 있지요? 대개의 경우 VisualTree는 복잡하기 때문에 LogicalTree를 사용하는 것이 더 편할 때가 있습니다. 게다가 형제 노드를 앞 뒤로 +/- 값을 지정해서 인덱스를 지정할 수 있으면 더 좋을 것 같습니다. 즉, 아래와 같은 식으로도 사용하고 싶다는 것이지요.
=== 논리적 트리 구조로, 아래로 2번째의 형제 노드를 지정 ===
<Border BorderBrush="{ext:Sibling Path=BorderBrush, OnVisualTree=False, Level=2}">
</Border>
=== Visual 트리 구조로, 위로 3번째의 형제 노드를 지정 ===
<Border BorderBrush="{ext:Sibling Path=BorderBrush, OnVisualTree=True, Level=-3}">
</Border>
위의 코드는 부가적인 기능에 불과하기 때문에
소스 코드는 첨부한 프로젝트를 참조하시고 설명은 생략합니다.
[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]