RadioButton 컨트롤

RadioButton 컨트롤을 사용하면 선택 가능한 옵션 목록을 사용자에게 제공하며, 이 중에 한개의 옵션만 선택할 수 있습니다. ComboBox 컨트롤을 사용하면 적은 공간을 사용하면서 RadioButton과 같은 일을 할 수 있지만 RadioButton set는 사용자에게 옵션에 대한 더 나은 개요를 제공할 수 있습니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>Yes</RadioButton>
		<RadioButton>No</RadioButton>
		<RadioButton IsChecked="True">Maybe</RadioButton>
	</StackPanel>
</Window>

질문이 있는 Label을 추가한 다음 각각에 가능한 대답이 있는 세 개의 라디오 버튼을 추가합니다. 마지막 라디오 버튼의 IsChecked 속성을 사용하여 기본 옵션을 정의합니다. 사용자는 다른 라디오 버튼 중 하나를 클릭하기만 하면됩니다. IsChecked 속성은 코드에서 RadioButton이 선택되어 있는지 확인하기 위해 사용합니다.

RadioButton 그룹

위의 예제를 실행하면 약속 한대로 한 번에 하나의 RadioButton 만 선택 가능한 것을 확인할 수 있습니다. 하지만 각각의 개별 선택 항목을 가진 여러 라디오 버튼 그룹을 원한다면 어떻게 해야할까요? RadioButton에 GroupName 속성이 부여해서 함께 동작하도록 하는 RadioButton을 지정할 수 있습니다. 다음은 그 예입니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="230" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton GroupName="ready">Yes</RadioButton>
		<RadioButton GroupName="ready">No</RadioButton>
		<RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton>

		<Label FontWeight="Bold">Male or female?</Label>
		<RadioButton GroupName="sex">Male</RadioButton>
		<RadioButton GroupName="sex">Female</RadioButton>
		<RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton>
	</StackPanel>
</Window>

GroupName 속성을 각 RadioButton에 설정하면 두 그룹 각각에 선택을 할 수 있습니다. 이 옵션이 없으면 6 개의 라디오 버튼 모두에 대해 하나의 선택만 가능합니다.

사용자 정의 content

RadioButton은 ContentControl 클래스를 상속했기 때문에, 사용자 정의 콘텐트를 가져 와서 옆에 표시 할 수 있습니다. 위 예제에서와 같이 텍스트를 쓰면 WPF는이를 TextBlock 컨트롤 안에 넣고 표시합니다. 이 방법은 작업을 더 쉽게 해주기도 하지만, 다음 예제에서 볼 수 있듯이 텍스트 부분에 모든 유형의 컨트롤을 사용할 수도 있습니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonCustomContentSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonCustomContentSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Yes" Foreground="Green" />
			</WrapPanel>
		</RadioButton>
		<RadioButton Margin="0,5">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="No" Foreground="Red" />
			</WrapPanel>
		</RadioButton>
		<RadioButton IsChecked="True">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Maybe" Foreground="Gray" />
			</WrapPanel>
		</RadioButton>
	</StackPanel>
</Window>

마크 업 방식으로, 이 예제는 조금 무거워지만 개념 자체는 매우 간단합니다. 각 RadioButton에는 이미지와 텍스트가 포함된 WrapPanel이 있습니다. 이제는 TextBlock 컨트롤을 사용하여 텍스트를 제어하므로 원하는 방식으로 텍스트 서식을 지정할 수 있습니다. 이 예제에서는 텍스트 색상을 선택 항목과 일치하도록 변경했습니다. Image control (추후 자세한 내용이 나옵니다)은 각 선택 항목의 이미지를 표시하는데 사용됩니다.

RadioButton의 안쪽에 컨텐츠를 넣었기 때문에 RadioButton의 이미지나 텍스트, 어느 곳이나 클릭하여 RadioButton을 선택할 수 있습니다. 별도의 패널로 배치 한 경우라면 RadioButton의 원을 직접 클릭해야만 선택할 수 있으므로 실용성이 떨어집니다.