WPF ControlTemplate 이용하여 RadioButton 형태 변경하기

WPF ControlTemplate 이용하여 RadioButton 형태 변경하기

 

ControlTemplate 은 컨트롤의 모습이나 이벤트 처리등을 미리 정의해 놓고 사용할수 있도록 합니다.

아래는 RadioButton 앞의 라디오 박스를 없애고

선택 시 글자를 굵게 표시하고 주변으로 사각형이 그려지도록 하는 예시입니다.

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <StackPanel.Resources>
            <ControlTemplate
                 x:Key="rectRadioButton"
                 TargetType="{x:Type RadioButton}">
                <Border
                    Name="border"
                    BorderBrush="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                    CornerRadius="0"
                    Padding="10"
                    BorderThickness="0"
                    Margin="2"
                    Width="250">
                    <ContentPresenter
                        Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger
                         Property="IsChecked"
                         Value="True">
                        <Setter
                             TargetName="border"
                             Property="BorderThickness"
                             Value="3" />
                        <Setter
                             Property="FontWeight"
                             Value="Bold" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </StackPanel.Resources>
        <GroupBox
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             FontSize="12pt"
             Header="Select Option">
            <StackPanel>
                <RadioButton
                    Template="{StaticResource rectRadioButton}"
                    HorizontalAlignment="Center"
                    Content="Template RadioButton 1"
                    IsChecked="True" />
                <RadioButton
                     Template="{StaticResource rectRadioButton}"
                     HorizontalAlignment="Center"
                     Content="Template RadioButton 2" />
                <RadioButton
                     Template="{StaticResource rectRadioButton}"
                     HorizontalAlignment="Center"
                     Content="Template RadioButton 3" />
                <RadioButton
                     Template="{StaticResource rectRadioButton}"
                     HorizontalAlignment="Center"
                     Content="Template RadioButton 4" />
            </StackPanel>
        </GroupBox>
    </StackPanel>
</Window>

결과