'RadioButton'에 해당되는 글 2건

  1. 2010.08.15 WPF ReverseBinding(RadioButton DataBinding) (4)
  2. 2010.02.27 RadioButtons and Data Binding

Introduction

WPF를 이용해 MVVM패턴으로 개발할때, ViewModel에서 View에 있는 객체에 Binding을 해야 할경우, ViewModel에서 View에 있는 객체를 직접 Access해야 하므로, View와 ViewModel의 독립성이 떨어지게 됩니다. 이번시간에는 이러한 상황에서 MarkupExtension을 이용해 View에서 ViewModel의 독립성을 유지한체 ViewModel에서 View를 Binding할 수 있도록 하는 ReverseBinding을 구현 하는 방법에 대해 소개합니다.

Create DemoView(Default Data Binding)

ReverseBinding를 구현하기에 앞서 ReverseBinding을 테스트 하기 위한 상황을 만들기 위해 위와 같이 두개의 RadioButton이 있는 간단한 DemoView를 구현했습니다. 그리고 RadioButton에 ViewModel에 정의된 IsMale속성을 Binding하고, 텍스트 박스에도 IsMale 속성을 Binding합니다. 아래는 DemoView에 해당하는 소스코드입니다.


대충 눈으로 살펴봤을때는 특별하게 문제가 없는 코드 같지만, 실제로 동작을 시켜보면 동영상과 같이 DataBinding이 정상적으로 동작하지 않는것을 확인 하실 수 있습니다.
 
이유는 RadioButton의 특성상 IsChecked 속성이 변경될때 같은 Group내에 포함된 다른 RadioButton들의 IsChecked속성이 영향을 받게되는데, 이 과정에서 Binding되어있던 IsChecked속성에 다른 값이 덮여 씌워지면서  Binding이 해제되어 버리기 때문입니다.
 
이를 해결하기 위한 RadioButton에 Binding을 하지 않고, 아래와 같이 IsMale속성에 RadioButton의 IsChecked속성을 Binding하는 방법을 사용 할 수 있습니다.
하지만 위에서 언급 했듯이 ViewModel에서 View 객체를 멤버를 직접 제어하는 방법은 독립성이 떨어지기 때문에 View와 ViewModel에 종속받지 않고 위와 같은 동작을 수행하는 ReverseBinding을 직접 구현해서 사용 할 수 있습니다.

Create ReverseBinding Extension

아래는 ReverseBinding을 구현한 소스코드의 일부분으로, 요약하면 Binding객체를 파라미터로 받는 MarkupExtension을 생성하고, ProvideValueTarget을 이용해 Source Object와 Source Property를 가져온 뒤, DataContext의 Target Property에 Binding을 수행하는 과정을 나타냅니다.
위와 같이 구현된 ReverseBinding을 이용해 실제 XAML에서 사용할 때에는 아래와 같이 사용할 수 있습니다.


실행시켜보면 아래 동영상과 같이 Binding이 정상적으로 동작하는것을 확인 하실 수 있습니다.


아래는 이번시간에 사용된 전체소스코드입니다. 혹시 글을 읽으시고 이해가 안되시는 부분이나, 기타 문의사항은 댓글이나 이메일로 남겨주시면 답변드리도록 하겠습니다.

신고

Introduction

이번 강좌는 WPF를 이용해 위 그림과 같이 RadioButton 컨트롤 목록을 구하고 데이터 바인딩을 구성하는 과정에서 발생할 수 있는 이슈와 이를 해결하는 방법에 대해 소개합니다. 일반적으로 RadioButton으로 목록을 구현하고자 할때 가장먼저 떠오르는 방법은 StackPanel을 이용해 구현하는 방법입니다.


Some Problems

한눈에 보기에는 별로 문제가 없어 보이지만, 위 코드에 특정 속성에 대하여 RadioButton의 체크 상태에 데이터 바인딩을 구성하고자 한다면 약간의 이슈가 발생 합니다. 대상 속성에 저장된 값은 하나지만, 비교 대상이 다수 이기 때문에 이를 위해 ValueConverter를 구현 해야합니다. ValueConverter를 적용한 코드는 아래와 같습니다.


위 코드를 통해 해결은 가능하지만 항목이 동적으로 추가가된다거나, 반대로 현재 선택된 값을 가져오고자 한다면 또 다시 아래와 같은 코드를 이용해 현재 선택된 값을 가져오는 과정이 필요합니다. 


이제 생각해볼 문제는 어떻게 하면 더 간단하고 명확하게 위와 같은 RadioButton 목록을 구현하는가에 대한 내용입니다.

Using ListBox Template

WPF에서 목록하면 가장먼저 떠오르는 컨트롤인 ListBox를 이용해 RadioButton목록을 구현하는 방법에 대해 소개합니다. ListBox는 어떤 타입이든지 목록으로 표현이 가능하고 아이템에 대한 템플릿을 정의 할 수 있기 때문에 보다 효과적으로 RadioButton 목록을 구현 할 수 있습니다. 아래는 RadioButton목록을 구현하기 위한 ListBox의 ItemContainerStyle입니다.



ListBoxItem Template을 RadioButton으로 정의 하고 RadioButton의 IsChecked속성을 ListBox의 IsSelected속성에 바인딩 합니다. 그리고 RadioButton의 Content속성에는 ListBox에 항목이 출력되도록 ContentPresenter를 추가합니다. RadioButton의 Focusable과 IsHitTestVisible 속성을 False로 지정한 이유는 RadioButton이 ListBox에서의 Selected여부에 따라서만 동작하도록 하기 위함입니다. 이제 위 스타일을 이용해 RadioButton 목록을 구현하면 아래와 같이 사용할 수 있습니다.


SelectedValue에는 바인딩 대상이 되는 속성을 입력하고, SelectedValuePath를 Content로 지정하게 되면 그림과 같이 아이템의 Content속성과 SelectedValue와 일치하는 항목이 체크되는것을 확인 하실 수 있습니다. 반대로 ListBox의 SelectedValue속성을 이용하면, 현재 선택된 RadioButton의 값을 가져올수 있습니다.


신고