WPF 프로젝트에 MahApps.Metro UI 프레임워크 통합하기

MahApps.Metro 프레임워크 개요 및 설계 원칙

WPF 애플리케이션의 사용자 인터페이스를 현대적이고 세련된 스타일로 업그레이드할 수 있는 MahApps.Metro 라이브러리의 기본 적용 방법을 살펴봅니다. 이 프레임워크를 활용할 때 기억해야 할 핵심 아키텍처 원칙은 XAML 뷰가 코드 비하인드(Code-Behind)를 직접 참조하지 않고, 코드 비하인드가 XAML을 참조해야 한다는 점입니다.

NuGet을 통한 패키지 설치

가장 먼저 NuGet 패키지 관리자를 통해 라이브러리를 프로젝트에 추가해야 합니다. Visual Studio의 NuGet UI를 사용하거나 패키지 관리자 콘솔(Package Manager Console)에서 설치 명령어를 실행하여 손쉽게 적용할 수 있습니다. F# WPF 코드 비하인드 프로젝트를 기준으로 진행합니다.

전역 리소스 사전 및 테마 구성

MahApps.Metro의 모든 스타일과 테마는 독립적인 리소스 사전(Resource Dictionary)으로 분리되어 제공됩니다. 애플리케이션 전역에 모던한 테마를 적용하려면 App.xaml 파일의 Application.Resources 영역에 해당 리소스들을 병합해야 합니다.

<Application 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <!-- MahApps 기본 컨트롤 및 폰트 스타일 로드 (파일명 대소문자 구분 필수) -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
        
        <!-- 애플리케이션 테마 지정 (예: 다크 모드 및 파란색 악센트) -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Dark.Blue.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

주의: 리소스 경로의 파일명은 대소문자를 엄격하게 구분하므로 오타에 유의해야 합니다.

기본 Window를 MetroWindow로 교체

MahApps.Metro가 제공하는 완전한 스타일링과 윈도우 기능을 활용하려면, WPF의 기본 Window 클래스를 라이브러리에서 제공하는 MetroWindow로 변경해야 합니다.

메인 윈도우 XAML 파일(예: AppMainWindow.xaml)을 엽니다.
루트 태그에 MahApps.Metro 컨트롤을 위한 XML 네임스페이스를 선언합니다.

xmlns:ui="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

또는 URI 형식을 사용할 수도 있습니다.

xmlns:ui="http://metro.mahapps.com/winfx/xaml/controls"

기존의 <Window> 태그를 <ui:MetroWindow>로 수정합니다.

수정된 XAML 구조는 다음과 같습니다.

<ui:MetroWindow 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ui="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    Title="메인 대시보드" 
    Width="1024" 
    Height="768" 
    WindowStartupLocation="CenterScreen">
    
  <Grid>
    <!-- 애플리케이션 메인 콘텐츠 영역 -->
    <TextBlock Text="MahApps.Metro가 적용된 화면입니다." 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center"
               FontSize="24"/>
  </Grid>
  
</ui:MetroWindow>

F# 코드 비하인드(Code-Behind) 동기화

XAML 파일의 루트 요소가 변경되었으므로, 연결된 코드 비하인드 파일의 기본 클래스 역시 MetroWindow를 상속하도록 조정해야 합니다. F#의 partial 클래스 특성을 활용하면 XAML 파서가 자동으로 처리하므로, 명시적인 상속 구문을 생략하고 타입 정의만 간결하게 유지할 수 있습니다.

open FsXaml

// XAML 파일을 로드하는 타입 정의
type AppMainWindowView = XAML<"AppMainWindow.xaml">

// 메인 윈도우 클래스
type AppMainWindow() =
    inherit AppMainWindowView()
    
    // 추가적인 초기화 로직 또는 이벤트 핸들러 작성

이제 애플리케이션을 실행하면 MahApps.Metro의 세련된 타이틀 바와 테마가 적용된 윈도우를 확인할 수 있습니다. 더 다양한 컨트롤과 심화 스타일링 옵션은 공식 문서의 Styles 및 Controls 섹션을 참고하여 구현해 보시기 바랍니다.

태그: WPF MahApps.Metro F# XAML UI프레임워크

5월 31일 06:28에 게시됨

괴물 클럽