간단한 WPF Checkbox 스타일링 방법

WPF에서는 XAML을 사용하여 Checkbox를 스타일링할 수 있습니다. Checkbox 스타일링을 시작하려면 먼저 새로운 스타일을 만들어야합니다.

<Window.Resources>
    <Style x:Key="CustomCheckBoxStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="Background" Value="#FF1C1C1C"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="BorderBrush" Value="#FF1C1C1C"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Width="20" Height="20">
                                <Path x:Name="checkMark" Stroke="{TemplateBinding Foreground}" StrokeThickness="3" StrokeLineCap="Round" StrokeLineJoin="Round" Visibility="Collapsed" Data="M 5,12.5 L 10,17 L 20,7.5" />
                            </Border>
                        </BulletDecorator.Bullet>
                        <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Margin="25,0,0,0" RecognizesAccessKey="True" />
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="checkMark" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="#FF2E2E2E"/>
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF2E2E2E"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="#FF808080"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

위의 스타일에서는 Checkbox의 여러 속성을 수정하고 있습니다. 스타일의 Key를 “CustomCheckBoxStyle”로 설정하였으며, TargetType은 “CheckBox”입니다. 이후, Background, Foreground, FontSize, BorderBrush 등의 속성들이 수정되고 있습니다.

그 다음, Template 속성을 수정하여 Checkbox의 외관을 수정하였습니다. BulletDecorator를 사용하여 Checkbox를 디자인하고 있습니다. BulletDecorator의 Bullet 속성에는 Path와 Border가 사용되며, ContentPresenter를 사용하여 Text를 표시할 수 있습니다.

ControlTemplate.Triggers를 사용하여 IsChecked, IsMouseOver, IsEnabled 속성이 변경되었을 때의 행동을 정의할 수 있습니다. 위의 스타일에서는 IsChecked 속성이 True일 때 checkMark Path가 보이도록 하고, IsMouseOver 속성이 True일 때는 Checkbox의 배경색과 테두리 색상을 변경하였습니다.

Checkbox 컨트롤에서 위의 스타일을 적용하려면, Checkbox의 Style 속성에 위에서 만든 스타일의 Key인 “CustomCheckBoxStyle”을 할당하면 됩니다.

<CheckBox Content="Checkbox" Style="{StaticResource CustomCheckBoxStyle}"/>

위의 코드를 사용하면, Checkbox 컨트롤이 위에서 정의한 스타일로 스타일링됩니다.

이와 같이 XAML을 사용하여 Checkbox 스타일링을 할 수 있습니다. 이를 통해 Checkbox 컨트롤의 디자인을 더욱 세밀하게 수정할 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다.