» [WPF] Styles

[WPF] Styles

by DUBUKIMCH

WPF의 Style은 XAML에서 UI 요소의 모양과 동작을 일관되게 정의하는 방법입니다. Style은 Setter를 통해 속성 값을 정의하고, 특정 컨트롤이나 여러 컨트롤에 적용할 수 있습니다. 이를 통해 코드를 간결하게 유지하고 디자인의 일관성을 보장할 수 있습니다.


Style의 주요 특징

  1. 재사용 가능: 여러 컨트롤에 동일한 스타일을 적용할 수 있습니다.
  2. 분리된 디자인: UI 스타일 정의를 XAML에서 분리하여 유지보수성을 높입니다.
  3. 동적/정적 리소스: 런타임에 스타일을 변경하거나, 정적으로 적용할 수 있습니다.
  4. 트리거 지원: Style은 조건부 스타일을 정의하기 위해 Triggers를 사용할 수 있습니다.

Style의 사용 방법

1. Inline Style

  • 특정 컨트롤에 직접 Style을 정의.

2. Window-Level Style

  • Window 또는 Page의 Resource에 Style 정의.

3. Application-Level Style

  • App.xaml에 Style 정의하여 전체 애플리케이션에 적용.

예제 코드

1. Inline Style

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Inline Style Example" Height="200" Width="300">
    <StackPanel>
        <Button Content="Button 1">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="LightBlue"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontSize" Value="16"/>
                </Style>
            </Button.Style>
        </Button>
    </StackPanel>
</Window>

실행 결과

2. Window-Level Style

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window-Level Style Example" Height="200" Width="300">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightCoral"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Padding" Value="10"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
    </StackPanel>
</Window>

실행 결과

3. Application-Level Style

App.xaml

<Application x:Class="WpfApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightGreen"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Padding" Value="12"/>
        </Style>
    </Application.Resources>
</Application>

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Application-Level Style Example" Height="200" Width="300">
    <StackPanel>
        <Button Content="Button 1"/>
        <Button Content="Button 2"/>
    </StackPanel>
</Window>

실행 결과

4. Keyed Style

특정 컨트롤에만 스타일을 적용하려면 키를 사용합니다.

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Keyed Style Example" Height="200" Width="300">
    <Window.Resources>
        <Style x:Key="PrimaryButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="DarkBlue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Padding" Value="10"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Primary Button" Style="{StaticResource PrimaryButtonStyle}"/>
        <Button Content="Default Button"/>
    </StackPanel>
</Window>

실행 결과

5. Triggers 포함 Style

조건부 스타일링을 위해 Triggers를 사용합니다.

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Triggers Style Example" Height="200" Width="300">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightGray"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Padding" Value="10"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Orange"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Hover Me!"/>
    </StackPanel>
</Window>

실행 결과

요약

  • Style은 UI 요소의 모양과 동작을 통합적으로 관리하는 데 사용됩니다.
  • Inline Style은 특정 컨트롤에 사용되며, Window-Level과 Application-Level Style은 여러 컨트롤에 적용됩니다.
  • Keyed StyleTriggers를 사용하면 더 정교한 스타일링이 가능합니다.
  • WPF 스타일은 유지보수성과 재사용성을 높이는 데 매우 유용합니다.

You may also like

Leave a Comment

error: Content is protected !!