MahApps.Metro 추가

MahApps.Metro 패키지 설치

Visual Studio의 NuGet 패키지 관리자에서 MahApps.Metro 패키지를 설치합니다.

도구 - NuGet 패키지 관리자 - 솔루션용 NuGet 패키지 관리… 선택

App.xaml 설정

App.xaml 파일에 MahApps.Metro의 네임스페이스와 리소스를 추가합니다.

<Applcation> 태그에 네임스페이스 추가

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

Resource 추가

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <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/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

최종

<Application x:Class="JustGo_WPF.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:JustGo_WPF"
             xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <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/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml 설정

mah 네임스페이스를 추가하고 윈도우 클래스를 MetroWindow로 변경합니다.

<mah:MetroWindow x:Class="JustGo_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:local="clr-namespace:JustGo_WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
    </Grid>
</mah:MetroWindow>

결과 확인

프로젝트를 빌드하면 UI 가 변경된 것을 확인할 수 있습니다.

리소스 추가 상세

<ResourceDictionary.MergedDictionaries>
    <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/Light.Blue.xaml" />
</ResourceDictionary.MergedDictionaries>

ResourceDictionary.MergedDictionaries 요소를 사용하여 여러 리소스 파일을 병합하고 전역 리소스로 사용하는 방법으로 MahApps.Metro 라이브러리에서 제공하는 스타일 파일들을 애플리케이션에 적용하는 설정입니다.

코드 구성 요소

`<ResourceDictionary.MergedDictionaries>`

ResourceDictionary.MergedDictionaries는 여러 개의 리소스 파일을 병합하여 하나의 리소스로 사용하는 데 사용됩니다.
병합된 리소스들은 애플리케이션 전반에 걸쳐 공통 스타일, 브러시, 템플릿 등을 제공하여 일관된 UI를 적용하는 데 도움이 됩니다.
여기서 정의된 리소스들은 App.xaml에서 애플리케이션의 전역 리소스로 설정되었기 때문에, 애플리케이션의 모든 창^Window과 컨트롤에서 사용할 수 있습니다.

`<ResourceDictionary Source="..." />`

각 ResourceDictionary는 외부 파일을 참조하며, Source 속성을 통해 해당 파일의 경로를 지정합니다.
MahApps.Metro 라이브러리에서 제공하는 스타일 파일들을 참조하고 있으며, 이를 통해 MahApps.Metro의 테마와 스타일이 애플리케이션에 적용됩니다.

패키지 URI(`pack://application:,,,`):

pack://application:,,,는 WPF에서 팩 URI를 사용하여 애플리케이션의 리소스를 참조할 때 사용되는 형식입니다.
이 URI는 WPF에서 외부 어셈블리 리소스에 접근할 수 있게 해주며, application:은 애플리케이션 내의 리소스를 참조한다는 것을 나타냅니다.
,,,는 패키지 URI 문법에서 세 개의 쉼표로 구분하여 리소스 경로를 정의하는 부분입니다.

각 리소스 설명

`Controls.xaml`

MahApps.Metro의 기본 컨트롤 스타일을 정의하는 파일입니다.
WPF의 기본 컨트롤(버튼, 텍스트박스 등)에 MahApps.Metro 스타일을 적용하여, 애플리케이션 전반에 걸쳐 일관된 디자인을 제공합니다.
이 파일에는 컨트롤의 모양, 색상, 테두리 등 다양한 스타일 속성이 포함되어 있습니다.

`Fonts.xaml`

MahApps.Metro에서 사용되는 폰트 스타일을 정의하는 파일입니다.
폰트 패밀리, 크기, 굵기 등 텍스트 스타일 속성이 포함되어 있으며, 이를 통해 애플리케이션 전반에 일관된 텍스트 디자인이 적용됩니다.
예를 들어, 타이틀 폰트와 본문 폰트를 통일하거나 특정 크기로 설정할 때 유용합니다.

`Themes/Light.Blue.xaml`:

MahApps.Metro의 테마 파일로, Light 테마와 Blue 색상 팔레트를 적용하는 파일입니다.
MahApps.Metro는 여러 가지 색상 테마를 제공하는데, 이 파일을 통해 Light 테마의 Blue 색상 팔레트를 사용하게 됩니다.
Light.Blue 테마는 밝은 배경과 파란색 강조 색상으로 구성되어 있으며, 애플리케이션의 기본 색상 스타일을 설정합니다.
다른 테마 파일(Dark.Blue.xaml, Light.Orange.xaml 등)을 사용할 수도 있으며, 이를 통해 전체 애플리케이션의 색상 스타일을 쉽게 변경할 수 있습니다.

전체 코드의 역할 요약

이 ResourceDictionary.MergedDictionaries 블록은 MahApps.Metro의 기본 스타일과 테마를 애플리케이션에 적용하여 일관된 사용자 인터페이스를 제공합니다. Controls.xaml, Fonts.xaml, Light.Blue.xaml 파일을 병합하여 WPF 애플리케이션의 전체 스타일을 설정하므로, 모든 컨트롤과 텍스트가 MahApps.Metro의 디자인 규칙에 맞춰 나타나게 됩니다. 이 설정을 통해 애플리케이션 전반에 걸쳐 하나의 통일된 스타일과 색상 테마가 적용되며, 이를 통해 프로페셔널하고 깔끔한 UI를 쉽게 구현할 수 있습니다.

Buy me a coffee

CommunityToolkit.Mvvm Microsoft.Xaml.Behaviors.Wpf