전통적인 윈도우 창에서 모던 UI로의 전환

WPF(Windows Presentation Foundation)의 기본 Window 컨트롤은 기능적으로는 완성도가 높지만, 시각적 커스터마이징에는 여러 제약이 따릅니다. MahApps.Metro 프레임워크의 MetroWindow는 WindowChromeWindow(ControlzEx 라이브러리에서 제공)를 상속받아 이러한 한계를 극복했습니다. 이 컨트롤은 복잡한 Win32 API 호출 없이도 모던 디자인 미학에 부합하는 애플리케이션 인터페이스를 구축할 수 있도록 지원하며, 스타일 재정의, 확장된 상호작용, 그리고 테마 융합 메커니즘을 통해 윈도우 창의 패러다임을 바꿨습니다.

핵심 아키텍처: 로직과 뷰의 분리

현대적인 WPF 창은 로직 코드와 XAML 템플릿을 엄격히 분리하는 아키텍처를 채택하며, 의존 속성(Dependency Property) 시스템을 통해 유연한 구성을 제공합니다.

의존 속성(Dependency Properties) 설계

창의 동작과 외형을 제어하기 위해 수십 개의 의존 속성이 정의됩니다. 다음은 모던 윈도우를 커스터마이징할 때 사용되는 핵심 속성들의 등록 방식을 재구성한 예시입니다.

// 시각적 요소 제어
public static readonly DependencyProperty DisplayTitleIconProperty = 
    DependencyProperty.Register(nameof(DisplayTitleIcon), typeof(bool), typeof(CustomModernWindow), 
    new PropertyMetadata(BooleanBoxes.TrueBox, OnDisplayTitleIconChanged));

// 상호작용 동작 제어
public static readonly DependencyProperty TerminateOnIconDoubleClickProperty = 
    DependencyProperty.Register(nameof(TerminateOnIconDoubleClick), typeof(bool), typeof(CustomModernWindow), 
    new PropertyMetadata(BooleanBoxes.TrueBox));

// 레이아웃 및 치수 제어
public static readonly DependencyProperty CustomTitleBarHeightProperty = 
    DependencyProperty.Register(nameof(CustomTitleBarHeight), typeof(int), typeof(CustomModernWindow), 
    new PropertyMetadata(32, OnTitleBarHeightChanged));

// 내부 상태 추적 (읽기 전용)
internal static readonly DependencyPropertyKey HasActiveDialogPropertyKey = 
    DependencyProperty.RegisterReadOnly(nameof(HasActiveDialog), typeof(bool), typeof(CustomModernWindow), 
    new PropertyMetadata(BooleanBoxes.FalseBox));

이러한 속성들은 WPF의 데이터 바인딩 메커니즘을 통해 뷰 레이어와 연결되어, 속성 값이 변경될 때 UI가 자동으로 업데이트되도록 합니다.

컨트롤 템플릿(ControlTemplate) 구조

창의 시각적 정의는 ControlTemplate을 통해 이루어집니다. 다중 계층 그리드 레이아웃을 사용하여 타이틀 바, 콘텐츠 영역, 오버레이 등을 구조화합니다.

<ControlTemplate x:Key="CustomModernWindowTemplate" TargetType="{x:Type local:CustomModernWindow}">
    <Border x:Name="PART_WindowBorder" ...>
        <AdornerDecorator>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                
                <!-- 헤더 배경 -->
                <Rectangle x:Name="PART_HeaderBackground" 
                           Grid.Row="0" Grid.ColumnSpan="3" 
                           Fill="{TemplateBinding HeaderBrush}"/>
                
                <!-- 애플리케이션 아이콘 -->
                <ContentControl x:Name="PART_AppIcon" 
                                Grid.Row="0" Grid.Column="0"
                                Visibility="{TemplateBinding DisplayTitleIcon, Converter={StaticResource BoolToVisConverter}}"/>
                
                <!-- 드래그 가능한 타이틀 텍스트 -->
                <local:DraggableThumb x:Name="PART_HeaderTitle" 
                                      Grid.Row="0" Grid.Column="1"
                                      Content="{TemplateBinding Title}"
                                      Height="{Binding CustomTitleBarHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
                
                <!-- 윈도우 액션 버튼 영역 -->
                <local:CommandPresenter x:Name="PART_ActionButtons" 
                                        Grid.Row="0" Grid.Column="2"
                                        Content="{Binding ActionCommands, RelativeSource={RelativeSource TemplatedParent}}"/>
                
                <!-- 메인 콘텐츠 영역 -->
                <local:AnimatedContentControl x:Name="PART_MainContent" 
                                              Grid.Row="1" Grid.ColumnSpan="3"
                                              EnableTransitions="{TemplateBinding UseTransitions}">
                    <ContentPresenter x:Name="PART_ContentHost"/>
                </local:AnimatedContentControl>
                
                <!-- 대화상자 및 오버레이 호스트 -->
                <Grid x:Name="PART_DialogHost" .../>
            </Grid>
        </AdornerDecorator>
    </Border>
</ControlTemplate>

템플릿 내에서 PART_ 접두사가 사용된 요소들은 로직 코드에서 TemplatePartAttribute를 통해 접근하는 핵심 컴포넌트들입니다.

[TemplatePart(Name = PART_AppIcon, Type = typeof(UIElement))]
[TemplatePart(Name = PART_HeaderTitle, Type = typeof(UIElement))]
[TemplatePart(Name = PART_ActionButtons, Type = typeof(ContentPresenter))]
public class CustomModernWindow : WindowChromeWindow
{
    private const string PART_AppIcon = "PART_AppIcon";
    private const string PART_HeaderTitle = "PART_HeaderTitle";
    private const string PART_ActionButtons = "PART_ActionButtons";
}

테마 및 스타일 통합

리소스 사전을 병합하여 스타일을 재사용하며, 트리거를 통해 창의 활성화 상태에 따라 시각적 요소를 동적으로 업데이트합니다.

<Trigger Property="IsActive" Value="False">
    <Setter TargetName="PART_WindowBorder" Property="BorderBrush" 
            Value="{Binding Path=InactiveGlowColor, RelativeSource={RelativeSource TemplatedParent}, 
                   Converter={x:Static local:ColorToBrushConverter.Instance}}"/>
    <Setter TargetName="PART_HeaderBackground" Property="Fill" 
            Value="{Binding Path=InactiveHeaderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>

주요 기능 심층 분석

타이틀 바 및 윈도우 커맨드

기본 윈도우의 제약을 넘어 타이틀 바를 완전히 제어할 수 있습니다. DisplayTitleIcon으로 아이콘 표시 여부를 토글하고, HeaderAlignment를 통해 텍스트 정렬을 조정하며, CustomTitleBarHeight로 높이를 지정할 수 있습니다. 또한 LeftActionCommands와 RightActionCommands를 활용해 타이틀 바 양측에 커스텀 버튼을 배치할 수 있습니다.

<local:CustomModernWindow ...>
    <local:CustomModernWindow.LeftActionCommands>
        <local:WindowCommands>
            <Button Content="≡" Command="{Binding OpenNavigationDrawerCommand}"/>
        </local:WindowCommands>
    </local:CustomModernWindow.LeftActionCommands>
    <local:CustomModernWindow.RightActionCommands>
        <local:WindowCommands>
            <Button Content="🔍" Command="{Binding ExecuteSearchCommand}"/>
        </local:WindowCommands>
    </local:CustomModernWindow.RightActionCommands>
</local:CustomModernWindow>

대화상자 및 플라이아웃(Flyouts) 관리

시각적 트리의 최상위에 대화상자 컨테이너를 배치하여 모달 및 비모달 팝업을 관리합니다. ShowDialogsOverHeader 속성을 사용하면 대화상자가 타이틀 바를 덮어씌우는 몰입형 경험을 제공할 수 있습니다. 플라이아웃 시스템은 FlyoutPanels 컬렉션을 통해 4방향에서 슬라이드되는 패널을 쉽게 구현합니다.

<local:CustomModernWindow.FlyoutPanels>
    <local:FlyoutPanel Header="Preferences" Position="Right" Width="320">
        <!-- 설정 패널 콘텐츠 -->
    </local:FlyoutPanel>
</local:CustomModernWindow.FlyoutPanels>

실전 구현 및 최적화

고급 커스터마이징 예제

다음은 커스텀 타이틀 바, 사이드 메뉴, 테마 전환 기능이 통합된 완전한 쉘(Shell) 윈도우 구성 예시입니다.

<local:CustomModernWindow x:Class="ModernApp.Views.MainShell"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:ModernApp.Controls"
                 Title="Modern Shell" Height="600" Width="1000"
                 DisplayTitleIcon="True"
                 HeaderAlignment="Center"
                 CustomTitleBarHeight="45"
                 UseTransitions="True"
                 AccentBrush="#FF0078D7">
    
    <local:CustomModernWindow.LeftActionCommands>
        <local:WindowCommands>
            <Button Style="{DynamicResource IconButtonStyle}" 
                    Command="{Binding OpenNavigationDrawerCommand}">
                <iconPacks:Material Kind="Menu" Width="24" Height="24"/>
            </Button>
        </local:WindowCommands>
    </local:CustomModernWindow.LeftActionCommands>
    
    <local:CustomModernWindow.RightActionCommands>
        <local:WindowCommands>
            <ToggleButton Style="{DynamicResource CircleToggleStyle}"
                          Command="{Binding SwitchThemeCommand}"
                          IsChecked="{Binding IsDarkMode, Mode=TwoWay}">
                <iconPacks:Material Kind="WeatherNight" Width="16" Height="16"/>
            </ToggleButton>
        </local:WindowCommands>
    </local:CustomModernWindow.RightActionCommands>
    
    <local:CustomModernWindow.FlyoutPanels>
        <local:FlyoutPanel x:Name="NavigationDrawer"
                           Position="Left" Width="260"
                           Header="Navigation"
                           IsOpen="{Binding IsDrawerOpen, Mode=TwoWay}">
            <StackPanel>
                <TextBlock Text="Main Menu" Margin="10" FontWeight="Bold"/>
                <Button Content="Dashboard" Command="{Binding GoToDashboardCommand}"/>
                <Button Content="Preferences" Command="{Binding GoToPreferencesCommand}"/>
            </StackPanel>
        </local:FlyoutPanel>
    </local:CustomModernWindow.FlyoutPanels>
    
    <local:AnimatedContentControl TransitionDirection="Left"
                                  Content="{Binding ActiveViewModel}"/>
</local:CustomModernWindow>

성능 최적화 기법

의존 속성을 등록할 때 기본 값으로 BooleanBoxes.TrueBox 및 BooleanBoxes.FalseBox를 사용하면 값 형식의 박싱(Boxing) 연산을 방지하여 메모리 할당을 줄일 수 있습니다.

// 최적화 전 (박싱 발생)
new PropertyMetadata(true, OnDisplayTitleIconChanged)

// 최적화 후 (박싱 방지)
new PropertyMetadata(BooleanBoxes.TrueBox, OnDisplayTitleIconChanged)

또한 콘텐츠 전환 시 AnimatedContentControl과 같은 래퍼 컨트롤을 활용하면, 뷰를 전환할 때마다 비주얼 트리(Visual Tree)를 빈번하게 재구축하는 오버헤드를 크게 줄일 수 있습니다.