[Prism] 017. Prism의 스타일 및 테마, 데이터 템플릿과 ControlTemplate 사용하기

WPF(Windows Presentation Foundation)의 Prism 프레임워크는 모듈화 및 MVVM(모델-뷰-뷰모델) 패턴을 기반으로 하는 애플리케이션 개발을 위한 강력한 도구입니다. 이 글에서는 Prism을 사용하여 스타일 및 테마를 정의하고, 데이터 템플릿 및 ControlTemplate을 활용하는 방법에 대해 깊이 살펴보겠습니다.

1. Prism과 스타일 및 테마의 중요성

애플리케이션의 사용자 경험(UX)을 향상시키기 위해서는 일관된 스타일과 매력적인 테마가 필수적입니다. Prism 프레임워크는 UI를 모듈화하여 관리할 수 있는 기능을 제공하므로, 스타일과 테마를 효과적으로 적용할 수 있습니다. WPF는 XAML을 통해 스타일 및 테마를 쉽게 정의할 수 있도록 도와줍니다.

1.1 스타일의 정의

WPF에서 스타일은 UI 요소의 시각적 속성을 정의하는 XAML 객체입니다. 스타일을 사용하면 여러 UI 요소에 걸쳐 일관된 속성을 적용할 수 있습니다.

<Window x:Class="PrismApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Click Me" Width="100" Height="50"/>
    </Grid>
</Window>

위의 코드에서 버튼에 대한 기본 스타일을 정의했습니다. 이 스타일은 모든 버튼에 대해 배경색, 전경색 및 글꼴 크기를 일관되게 적용합니다.

1.2 테마의 적용

테마는 애플리케이션 전체의 시각적 요소를 정의하는 방법입니다. Prism을 활용하여 테마를 적용하면, 애플리케이션의 전체적인 보기와 느낌을 쉽게 바꿀 수 있습니다.

<ResourceDictionary Source="pack://application:,,,/PrismApp;component/Themes/LightTheme.xaml"/>

위의 코드 조각을 통해 다른 XAML 파일에서 테마 리소스 사전을 불러오는 방법을 보여줍니다. LightTheme.xaml 파일은 다양한 UI 요소에 대한 스타일과 템플릿을 정의합니다.

2. 데이터 템플릿

데이터 템플릿은 데이터의 시각적 표현을 정의하는데 사용됩니다. 데이터 템플릿을 사용하면 데이터가 어떻게 표시되는지를 쉽게 정의할 수 있습니다.

2.1 데이터 템플릿 정의하기

다음은 데이터 템플릿을 정의하는 예제입니다. 학생 정보를 리스트에 표시하는 애플리케이션을 생각해 보겠습니다.

<Window x:Class="PrismApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <DataTemplate x:Key="StudentTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Name}" FontSize="16"/>
                <TextBlock Text="{Binding Age}" FontSize="14" Foreground="Gray"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding Students}" ItemTemplate="{StaticResource StudentTemplate}" />
    </Grid>
</Window>

위의 코드에서 StudentTemplate이라는 데이터 템플릿을 정의했습니다. 이 템플릿은 학생의 이름과 나이를 표시하는 StackPanel을 포함하고 있습니다.

2.2 데이터 바인딩과 데이터 템플릿 사용하기

ViewModel에서 Students 컬렉션을 정의하고 이 컬렉션을 ListBox의 ItemsSource에 데이터 바인딩합니다.

public class MainViewModel : BindableBase
{
    public ObservableCollection<Student> Students { get; set; }

    public MainViewModel()
    {
        Students = new ObservableCollection<Student>
        {
            new Student { Name = "John Doe", Age = 20 },
            new Student { Name = "Jane Doe", Age = 22 }
        };
    }
}

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

이렇게 하면 ListBox에 학생 정보를 자동으로 표시할 수 있습니다.

3. ControlTemplate

ControlTemplate은 특정 컨트롤의 구조와 시각적 요소를 정의합니다. ControlTemplate을 사용하면 기본 제공되는 UI 구성 요소의 모양을 완전히 바꿀 수 있습니다.

3.1 ControlTemplate 정의하기

아래는 Button 컨트롤의 ControlTemplate을 정의하는 예제입니다.

<Window x:Class="PrismApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="5">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button Template="{StaticResource CustomButtonTemplate}" Content="Click Me" Background="LightCoral" Width="120" Height="50"/>
    </Grid>
</Window>

위의 코드에서는 CustomButtonTemplate이라는 ControlTemplate을 정의하였습니다. 이 ControlTemplate은 Button에 대한 새로운 모양을 만들어 내며, ContentPresenter를 통해 버튼의 내용을 중앙에 배치합니다.

3.2 ControlTemplate을 사용한 사용자 지정 버튼 만들기

Prism의 MVVM 패턴 다루기에 적합한 UI 요소 사용자 지정을 통해 다양한 시나리오를 구현할 수 있습니다.

public class CustomButton : Button
{
    static CustomButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), new FrameworkPropertyMetadata(typeof(CustomButton)));
    }
}

위와 같이 CustomButton 클래스를 정의하고, ControlTemplate을 통해 시각적 요소를 우리가 원하는 대로 구성합니다.

4. 결론

Prism을 통해 WPF 애플리케이션에서 스타일, 테마, 데이터 템플릿 및 ControlTemplate을 활용하는 방법을 살펴보았습니다. 이러한 요소들은 사용자 경험을 극대화하기 위한 중요한 도구이며, 실제로 복잡하고 풍부한 UI를 구성할 수 있는 기회를 제공합니다. Prism의 모듈화된 구조를 통해 더욱 효과적으로 애플리케이션을 개발할 수 있습니다. 사용자의 요구에 적합한 UI를 구성하고, 애플리케이션의 일관성과 유지 보수성을 향상시키는 것은 Prism의 큰 장점입니다.