성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Reordering on an Alpha processor ;...
[정성태] 공유 감사합니다. ^^ 참고로, WPF에서 WindowsF...
[Tom Lee] 답변 감사합니다. 나름의 해결책 연구해보고 여기에도 공유해봅니다...
[정성태] 아래의 글을 보면, MoveWindow 하면 될 듯한데요. ^^...
[Tom Lee] 안녕하세요 올려주신 글 참고하여 WPF 어플리케이션 안에 Uni...
[정성태] A graphical depiction of the steps ...
[정성태] 질문을 주셔서 출판사 측에 문의를 했습니다. 약 한 달 정도 후...
[Thorondor
] @정성태 개인 블로그인데도 거의 커뮤니티 급 인 것 같아요. 요...
[정성태] Roll A Lisp In C - Reading ; https...
[정성태] Java - How to use the Foreign Funct...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <div style='font-family: 맑은 고딕, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>WPF - Binding에 Sibling 요소 지정</div><br /> <br /> MVVM 구조로 개발을 하다 보니, xaml 안에 정의되는 요소 내에 Name을 지정하는 것이 필요 없게 되었습니다. 물론, 일반적으로는 그렇지만 가끔씩 필요한 경우가 발생하게 되는데, 그 한 예가 요소 간에 바인딩을 지정할 때입니다.<br /> <br /> 그나마 상위 요소에 있을 때는 역시 이름을 제거하고 RelactiveSource.Mode=FindAncestor 식으로 탐색이 가능하지만, 형제 노드에 대해서는 탐색할 방법이 제공되지 않아 대상이 되는 요소에 이름을 지정해야만 합니다. 바로 이것! 형제 노드 탐색을 위한 바인딩을 제공하고 싶다면 어떻게 해야 할까요?<br /> <br /> <hr style='width: 50%' /><br /> <br /> 처음에 생각했던 방법은 Binding.Source에 마크업 확장을 이용하여 다음과 같은 식으로 지정하려고 했었습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > <<b style='color: Blue;'>Border</b> Margin="20" BorderBrush="{Binding Source={<b style='color: Blue;'>ext:Sibling</b>}}" BorderThickness="2" Grid.Row="1"> </pre> <br /> 그런 후 SiblingExtension.ProvideValue 메서드에서 자신이 바인딩된 요소, 위의 경우에서는 Border 인스턴스를 찾아내어 그것의 형제 노드를 반환하는 식으로 구현하려고 했는데... ^^; 이게 웬일입니까?<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > public class SiblingExtension : MarkupExtension { public override object ProvideValue(IServiceProvider serviceProvider) { <b style='color: Blue;'>IProvideValueTarget</b> target = serviceProvider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget; <b style='color: Blue;'>Binding</b> binding = <b style='color: Blue;'>target.TargetObject</b> as Binding; return null; } } </pre> <br /> 위의 코드를 실행해보면,<br /> <br /> IProvideValueTarget.TargetObject가 의도한 대로 제가 원하는 Border - Dependency Object가 아닌 Binding 타입의 인스턴스를 반환합니다. 계층상으로 보면 Binding.Source에 ext:Sibling이 쓰였기 때문에 TargetObject가 Binding이 되는 것이 맞는 것 같습니다. 그렇긴 해도 Binding 자체에서는 그것의 요소를 구해낼 길이 없어서 위의 방법은 결국 포기를 해야 했습니다.<br /> <br /> 그렇다면, Binding 요소와 동일한 수준에서 마크업 확장을 구현해야만 가능하다는 것인데요. 다행히 Custom Binding을 구현한 소스코드를 웹에서 쉽게 찾을 수 있었습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > A base class for custom WPF binding markup extensions ; <a target='_tab' href='http://www.hardcodet.net/2008/04/wpf-custom-binding-class'>http://www.hardcodet.net/2008/04/wpf-custom-binding-class</a> </pre> <br /> 그럼, 이를 응용해서 진행해볼까요? ^^<br /> <br /> <hr style='width: 50%' /><br /> <br /> 역시나 생각은 간단합니다. 사용법은 대략 다음과 같이 구성할 것입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > <Border BorderBrush="Blue"> </Border> <Border BorderBrush="{ext:Sibling Path=BorderBrush}"> </Border> 위에서 의도하는 것은, 두 번째 Border의 BorderBrush가 첫 번째 Border.BorderBrush 값과 같게 하자는 것입니다. </pre> <br /> 이를 위해 BindingDecoratorBase를 상속받은 SiblingExtension을 정의합니다. 보시는 것처럼 굳이 Binding.Source를 지정할 필요는 없습니다. 왜냐하면 자기 자신을 기준으로 상위 노드로 올라간 후, 다시 자식 노드로 내려와서 형제 노드를 찾아 실행 시에 Binding.Source를 지정해 줄 것이기 때문입니다.<br /> <br /> 소스 코드도 제법 간단합니다. ^^<br /> "<a target='_tab' href='http://www.hardcodet.net/2008/04/wpf-custom-binding-class'>A base class for custom WPF binding markup extensions</a>" 글에서 공개한 BindingDecoratorBase를 상속받은 SiblingExtension을 정의합니다.<br /> <br /> [그림 1: SiblingExtension]<br /> <img alt='custom_binding_siblingextension_1.png' src='/SysWebRes/bbs/custom_binding_siblingextension_1.png' /><br /> <br /> 다행히, Binding.ProvideValue 호출에서는 IServiceProvider로부터 데이터 바인딩이 되는 개체의 인스턴스를 얻어올 수가 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > <b style='color: Blue;'>IProvideValueTarget</b> service = (IProvideValueTarget)provider.GetService(typeof(IProvideValueTarget)); DependencyObject <b style='color: Blue;'>target</b> = service.TargetObject as DependencyObject; </pre> <br /> 즉, 위에서 최종 결과인 target은 ext:Sibling을 담고 있는 Border 인스턴스가 됩니다. 그럼 ^^ 이걸로 게임 끝이군요.<br /> <br /> SiblingExtension.ProvideValue에서는 다음과 같이 구현해 주어 Source에 형제 노드를 담아서 ProvideValue를 호출해 주면 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > 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); <b style='color: Blue;'>this.Source = sibling</b>; return <b style='color: Blue;'>base.ProvideValue</b>(provider); } </pre> <br /> 그런대로 잘 동작하지만, 몇 가지 아쉬운 점이 있지요? 대개의 경우 VisualTree는 복잡하기 때문에 LogicalTree를 사용하는 것이 더 편할 때가 있습니다. 게다가 형제 노드를 앞 뒤로 +/- 값을 지정해서 인덱스를 지정할 수 있으면 더 좋을 것 같습니다. 즉, 아래와 같은 식으로도 사용하고 싶다는 것이지요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > === 논리적 트리 구조로, 아래로 2번째의 형제 노드를 지정 === <Border BorderBrush="{ext:Sibling Path=BorderBrush, <b style='color: Blue;'>OnVisualTree=False, Level=2</b>}"> </Border> === Visual 트리 구조로, 위로 3번째의 형제 노드를 지정 === <Border BorderBrush="{ext:Sibling Path=BorderBrush, <b style='color: Blue;'>OnVisualTree=True, Level=-3</b>}"> </Border> </pre> <br /> 위의 코드는 부가적인 기능에 불과하기 때문에 <a target='_tab' href='http://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=474&boardid=331301885'>소스 코드는 첨부한 프로젝트를 참조</a>하시고 설명은 생략합니다.<br /> <br /><br /><hr /><span style='color: Maroon'>[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
4870
(왼쪽의 숫자를 입력해야 합니다.)