WPF UI 프레임워크 MaterialDesign 적용 사례

최근 회사에서 데스크톱 클라이언트 개발이 필요해 스타일 및 인터페이스 피드백에 대한 요구사항을 충족시키기 위해 여러 오픈소스 UI 프레임워크를 비교한 결과 MaterialDesign을 선택하였다.

MaterialDesignThemes 라이브러리 포함 작업 시 버전 번호를 주의 깊게 확인해야 한다. 현재 사용 중인 버전은 2.6.0이며, 동영상 튜토리얼에서 이 버전을 기준으로 진행되었다.
App.xaml 파일에 스타일 시트 참조 설정 시, 아래에 설명된 내용은 이후에 자세히 설명할 예정이므로 현재는 주석 처리하는 것이 좋다.

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.LightBlue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <!-- 커스터마이징 색상 설정 -->
            <SolidColorBrush x:Key="MainColorLight" Color="#3b76ee" />
            <SolidColorBrush x:Key="MainColorForeground" Color="#3b76ee"  />
            <SolidColorBrush x:Key="MidColor" Color="#3b76ee"  />
            <SolidColorBrush x:Key="MidColorForeground" Color="#3b76ee"  />
            <SolidColorBrush x:Key="DarkColor" Color="#3b76ee"  />
            <SolidColorBrush x:Key="DarkColorForeground" Color="#3b76ee"  />
        </ResourceDictionary>
    </Application.Resources>

창 페이지 코드에서 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 선언 추가
공식 사이트에서 제공하는 샘플 앱 다운로드 (https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases) 필요하다. 첫 단계에서 사용한 라이브러리 버전과 동일한 버전을 다운로드해야 하며, 실행 후 화면은 다음과 같다:

예시로 특정 버튼 스타일을 적용하려면 좌측 메뉴에서 'Button' 선택 후 원하는 버튼을 클릭하여 우하단 'Copy Code' 버튼을 통해 코드 복사가 가능하다.

3단계에서 설명한 설정 부분에 대해 추가 설명. 회사 디자인 팀에서 제공한 색상이 프레임워크 기본 색상 팔레트에 포함되지 않아 LightBlue 테마의 모든 색상 값을 재정의하였다. MaterialDesign은 다양한 테마 색상을 제공하며, 이는 위 샘플 앱 내에서 확인 가능하다.

모든 테마 이름은 해당 설정 파일에서 직접 변경 가능하다. 필요한 색상이 존재하지 않을 경우, 전체 색상 값을 직접 수정해야 한다. 이 변경 방법은 MaterialDesign 소스 코드를 분석한 후 MaterialDesignColors.Wpf 클래스 라이브러리 내 해당 테마 설정 파일을 열어 확인할 수 있다. 9-14행의 코드를 직접 복사하여 원하는 색상으로 수정하면 된다.

컨트롤 속성 동적 할당 방법

MaterialDesignThemes.Wpf.ButtonAssist.SetBorderRadius(submitButton, new CornerRadius(10, 0, 0, 0));

일부 시각적 요소 예시 (부득이하게 마스킹 처리됨)

로그인 화면

업무 처리 화면

커스터마이징 알림 패널

태그: WPF MaterialDesign UI Framework Custom Styling XAML

6월 11일 22:03에 게시됨

괴물 클럽

WPF UI 프레임워크 MaterialDesign 적용 사례

인기 태그