WPF 스타일과 템플릿 기초

WPF의 스타일(Style)과 템플릿(Template)은 UI 요소의 외형과 구조를 정의하고 재사용하기 위한 강력한 도구다.

이를 통해 일관된 디자인 시스템을 구축하고 코드의 중복을 획기적으로 줄일 수 있다.

Style과 Setter

Style은 컨트롤의 속성(Property) 값들을 하나의 집합으로 묶어 관리한다.

<Window.Resources>
    <Style x:Key="PrimaryButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="#2ecc71"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Padding" Value="20,10"/>

        <!-- 트리거를 이용한 상태별 스타일 변경 -->
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#27ae60"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Button Style="{StaticResource PrimaryButtonStyle}" Content="확인" />

ControlTemplate을 통한 구조 재정의

ControlTemplate은 컨트롤의 시각적 트리(Visual Tree)를 완전히 새롭게 구성할 때 사용한다.

<Style x:Key="RoundedButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border" 
                        CornerRadius="20" 
                        Background="{TemplateBinding Background}"
                        BorderBrush="DarkGray" 
                        BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" 
                                      VerticalAlignment="Center"/>
                </Border>

                <!-- 템플릿 내 트리거 설정 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Background" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

주요 개념 분석

• TemplateBinding: 컨트롤의 속성 값을 템플릿 내부 요소에 전달한다.
• ContentPresenter: 버튼의 Content 속성에 담긴 내용(텍스트, 이미지 등)이 표시될 위치를 지정한다.
• Triggers: 마우스 오버, 클릭 등 특정 조건에 따라 속성 값을 동적으로 변경한다.

P.S

스타일과 템플릿을 활용하면 UI 로직과 디자인을 완벽하게 분리할 수 있다.

중앙 집중식 리소스 관리를 통해 대규모 프로젝트에서도 일관성 있는 사용자 경험을 제공할 수 있는 것 같다.

웨이호프