RadioButtons and Data Binding

Introduction

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

<StackPanel x:Name="ParentPanel"> <RadioButton Content="DaeWook"/> <RadioButton Content="SungWook"/> <RadioButton Content="EunSeok"/> <RadioButton Content="Curu"/> </StackPanel>

Some Problems

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

<StackPanel x:Name="ParentPanel"> <RadioButton IsChecked="{Binding Name, Converter=[ConverterName]}" Content="DaeWook"/> <RadioButton IsChecked="{Binding Name, Converter=[ConverterName]}" Content="SungWook"/> <RadioButton IsChecked="{Binding Name, Converter=[ConverterName]}" Content="EunSeok"/> <RadioButton IsChecked="{Binding Name, Converter=[ConverterName]}" Content="Curu"/> </StackPanel>
위 코드를 통해 해결은 가능하지만 항목이 동적으로 추가가된다거나, 반대로 현재 선택된 값을 가져오고자 한다면 또 다시 아래와 같은 코드를 이용해 현재 선택된 값을 가져오는 과정이 필요합니다. 

public RadioButton GetSelectedRadioButton(Panel ParentPanel) { foreach (FrameworkElement Child in ParentPanel.Children) { if (Child is RadioButton == false) return; RadioButton CurrentRadioButton = Child as RadioButton; if (CurrentRadioButton.IsChecked == true) return CurrentRadioButton; } }
이제 생각해볼 문제는 어떻게 하면 더 간단하고 명확하게 위와 같은 RadioButton 목록을 구현하는가에 대한 내용입니다.

Using ListBox Template

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

<Style x:Key="RadioButtonList" TargetType="{x:Type ListBoxItem}" > <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <Border Background="Transparent"> <RadioButton Focusable="False" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}"> <ContentPresenter /> </RadioButton> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
ListBoxItem Template을 RadioButton으로 정의 하고 RadioButton의 IsChecked속성을 ListBox의 IsSelected속성에 바인딩 합니다. 그리고 RadioButton의 Content속성에는 ListBox에 항목이 출력되도록 ContentPresenter를 추가합니다. RadioButton의 Focusable과 IsHitTestVisible 속성을 False로 지정한 이유는 RadioButton이 ListBox에서의 Selected여부에 따라서만 동작하도록 하기 위함입니다. 이제 위 스타일을 이용해 RadioButton 목록을 구현하면 아래와 같이 사용할 수 있습니다.

<ListBox ItemContainerStyle="{StaticResource RadioButtonList}" SelectedValue="{Binding Name}" SelectedValuePath="Content"> <ListBoxItem Content="DaeWook"/> <ListBoxItem Content="SungWook"/> <ListBoxItem Content="EunSeok"/> <ListBoxItem Content="Curu"/> </ListBox>
SelectedValue에는 바인딩 대상이 되는 속성을 입력하고, SelectedValuePath를 Content로 지정하게 되면 그림과 같이 아이템의 Content속성과 SelectedValue와 일치하는 항목이 체크되는것을 확인 하실 수 있습니다. 반대로 ListBox의 SelectedValue속성을 이용하면, 현재 선택된 RadioButton의 값을 가져올수 있습니다.

WIT.Sample.RadioButtonList.zip