최신 ComponentOne 2023 v1 릴리스에서는 WPF 컨트롤을 위한 테마 사용자 정의가 더욱 쉬워졌습니다. 일반적으로 컬렉션에서 있는 테마를 선택했거나, 브러시 속성을 설정하여 새로운 모양을 만들었거나, 테마가 없는 경우도 있었습니다.

하지만 이제는 최신 Material 테마로 시작하는 네 번째 옵션이 있으며 다양한 브러시 조합을 통해 자신만의 테마를 직접 만들 수 있습니다.

Material.io에서 정의한 모범 사례에 따라 Material 테마를 디자인했습니다. WPF Material 테마를 사용자 정의하여, 밝거나 어두운 배경을 선택하고 응용 프로그램 또는 회사 브랜딩과 일치하도록 강조 색의 팝업을 추가할 수 있습니다. WPF Material 테마는 표준 .NET 컨트롤도 지원합니다.

이번 스터디에서는 .NET 6 Material 테마를 수정하여 전체 WPF 응용 프로그램의 다양한 색상표를 더욱 쉽게 사용할 수 있는 방법을 보여 줍니다.

WPF Material 테마를 사용자 정의하는 방법

이 예시에서는 기존 테마를 사용자 정의합니다.  

• WPF 테마를 추가하여 데스크톱 응용 프로그램의 스타일을 지정하는 방법

상단의 링크에서 기존 테마를 사용하는 방법에 대해 자세히 알아볼 수 있으며, 이를 이해하는 데에 도움이 될 것입니다.

해당 주제는 WPF 테마를 설정할 수 있는 세 가지 방식을 자세히 설명했습니다. 이 예시에서는 코드별 두 번째 접근 방식을 사용하여 ComponentOne Material 테마(C1ThemeMaterial)를 설정합니다. 모양은 다음과 비슷합니다.

C1.WPF.Themes.C1ThemeMaterial myTheme = new C1.WPF.Themes.C1ThemeMaterial();
myTheme.Apply(this); // applies theme to entire window

참고: ComponentOne WPF 컨트롤(6.0.20231.*)의 2023 v1 .NET 6 버전을 업데이트해야 하며 C1.WPF.Themes 및 C1.WPF.Themes.Material(또는 MaterialDark) 패키지를 추가해야 합니다.

다음으로, WPF 응용 프로그램에서 리소스 사전 XAML 파일을 추가합니다. CustomTheme.xaml과 같은 이름으로 지정할 수 있습니다.

이 파일에서는 주요 브러시를 PrimaryColor, BackgroundColor, OnSurfaceColor 및 메뉴, 하이퍼링크, 대체 색상에 관련된 항목 등의 이름별로 재정의합니다.

기존 테마를 쉽게 사용자 정의할 수 있는 방법입니다. 사전의 빌드 작업을 Embedded Resource로 설정하고 시작점으로 아래 XAML에 복사합니다.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
​
   <!-- Color & Brush used to build Base brushes -->
   <Color x:Key="PrimaryColor">#a31688</Color>
   <Color x:Key="BackgroundColor">#1688a3</Color>
   <Color x:Key="OnSurfaceColor">White</Color>
   <SolidColorBrush x:Key="MenuHighlightBrush" Color="{StaticResource PrimaryColor}" Opacity="0.04"/>
   <SolidColorBrush x:Key="SubtotalBackground" Color="#0d5060" />
   <Color x:Key="SelectedColor">#026a81</Color>
​
   <!-- C1HyperLinkButton Foreground-->
   <SolidColorBrush x:Key="HyperLinkForeground" Color="#dafdf7" />
   <SolidColorBrush x:Key="IndicatorBrush" Color="#93edf1" />
​
   <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="#026a81"/>
   <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="#93edf1"/>
​
   <SolidColorBrush x:Key="FocusBrush" Color="{StaticResource SelectedColor}"/>
   <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource PrimaryColor}"/>
​
</ResourceDictionary>

브러시 이름은 material.io 색 체계를 기반으로 합니다. 추가적으로 사용자 정의해야 하는 경우 Material 테마의 소스 XAML에서 더 많은 브러시를 찾아볼 수 있습니다(C:\Program Files (x86)\ComponentOne\WPF Edition\Resources\v6\C1WPFThemesMaterial에 설치됨)

마지막으로, 이 CustomTheme.xaml 파일을 전달하는 새 오버로드로 위에서부터 코드를 수정합니다. 어셈블리 유형과 전체 네임스페이스가 있는 파일 이름으로 전달해야 합니다. "MyProject" 샘플에서는 아래와 비슷하게 표시됩니다.

myTheme = new C1ThemeMaterial(typeof(MyProject.App).Assembly, "MyProject.CustomTheme.xaml");

완료되었습니다!

여기, GitHub에서 전체 샘플을 다운로드할 수 있으니, 시도해 보시길 바랍니다.

Material 테마 빌더

디자이너가 아니시더라도 걱정할 필요 없습니다. material.io 테마 빌더를 활용하여 도움을 받을 수 있습니다.

사용자 정의 색상표를 빌드하여 동적 색을 매핑하거나, 대체 색을 사용하거나, 브랜딩된 테마를 구현할 수 있습니다. 색 체계는 액세스 가능한 색 대비를 제공하는 중요 조정 사항을 자동으로 처리합니다. 이곳에서 색 출력을 표면 브러쉬의 기본 및 보조로 사용하세요.

지금 바로 ComponentOne을 다운로드하여 직접 테스트해 보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ