Material Design은 Google에서 정의한 인기 UI 스타일로, 많은 응용 프로그램에 사용되고 있습니다.

MESCIUS에서는 ComponentOne WinForms Edition을 사용하여 고객이 기존의 .NET Windows Forms 응용 프로그램에서 Material Design을 쉽게 구현할 수 있도록 만들었습니다.

이 블로그에서는 Material에서 영감을 받은 테마로 전체 데스크톱 응용 프로그램의 스타일을 구현하는 방법을 알려드립니다.

Material 테마를 WinForms 응용 프로그램에 추가 

ComponentOne WinForms Edition에는 Material 및 Material Dark 테마가 있습니다.

WinForms용 ComponentOne 테마를 사용하면 기본 제공되는 다양한 테마를 사용할 수 있으며, 사용하기 쉬운 테마 디자이너를 이용해 WinForms 컨트롤의 테마를 쉽게 정의하여 자체 테마를 만들거나 기존 테마를 수정할 수 있습니다.

다음은 일부 ComponentOne WinForms 컨트롤에 적용된 Material 테마가 어떤 모습인지 보여 주는 몇 가지 예입니다.

Material 테마는 런타임뿐 아니라 디자인 타임에도 적용할 수 있습니다.

테마 컨트롤러 대화 상자에서 또는 App.config 파일을 수정하여 디자인 타임에 테마를 적용할 수 있습니다.

테마를 설정하는 다양한 방법을 알아보겠습니다.

1. 디자인 타임에 Material 테마 설정 

가장 쉽게 테마를 설정하는 방법은 디자인 타임에 C1ThemeController 컴포넌트를 사용하는 것입니다.

먼저, 사용 중인 .NET 버전에 맞는 ComponentOne WinForms Edition을 다운로드하여 설치해야 합니다.

설치가 완료되었다면 아래 과정을 따라해 주세요.

1. Visual Studio Forms 디자이너의 응용 프로그램에서 양식을 엽니다.

2. 디자이너의 도구 상자에서 C1ThemeController를 찾아 폼에 드래그하여 놓습니다. 대화 상자가 나타나면 다음을 선택할 수 있습니다.

• 응용 프로그램 전체 기본 테마

• 현재 컨트롤러의 기본 테마

• 이미 폼에 있는 지원되는 모든 컨트롤의 테마

처음에 팝업 대화 상자에서 테마는 이미 양식에 있는 모든 지원 컨트롤에 대해 "(없음)"으로 지정됩니다.

해당 컨트롤에서 속성 설정이 의도치 않게 손실되는 일을 방지할 수 있습니다.

3. 기본 테마가 모든 컨트롤에 설정되도록 대화 상자에서 모두(기본값) 버튼을 클릭합니다. 참고: 일부 컨트롤을 이미 사용자 정의한 경우 무시됩니다. 그리고 기본 테마는 복원되지 않습니다.

4. 사용 가능한 기본 제공 테마 목록에서 Material을 선택합니다. 사용자 정의 재료 테마를 이미 만들었다면 여기서 선택할 수 있습니다.

5. 위에서 언급했듯이 모두(기본값) 버튼을 클릭하여 양식에서 지원되는 모든 컨트롤에서 기본 테마를 설정합니다.

6. 확인 버튼을 클릭하여 대화 상자를 닫고 지정된 테마를 양식 컨트롤에 적용합니다. 

2. App.config를 사용하여 Material 테마 설정

app.config 파일을 사용하여 테마를 지정할 수도 있습니다.

C1.Win.C1Themes 패키지를 응용 프로그램에 추가하고 다음 설정을 App.Config에 추가합니다.

그러면 기본 제공되는 Material 테마가 전체 응용 프로그램에 적용됩니다.

<configuration>
  <appSettings>
      <add key="C1ApplicationTheme" value="Material"/>
  </appSettings>
</configuration>

3. 코드를 사용하여 Material 테마 설정

세 번째는 코드에서 테마를 설정하는 방법입니다.

런타임에 테마를 적용하거나 변경해야 하는 경우에 유용합니다.

이 방식에서는 C1ThemeController 정적 클래스를 사용해 테마를 적용합니다.

C1.Win.C1Themes. 패키지를 응용 프로그램에 추가하고 로드하기 전에 다음 코드를 응용 프로그램에 추가합니다.

C1Theme theme = C1.Win.C1Themes.C1ThemeController.GetThemeByName(“Material”, false);
C1ThemeController.ApplyThemeToControlTree(control, theme);

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

Material Design 색상 시스템은 기본 및 보조 색상으로 구성됩니다.

이 색상들은 응용 프로그램의 브랜딩 및 스타일 지정을 반영합니다.

MESCIUS에서는 기본적으로 녹색 색 구성표를 사용합니다.

여기에는 사용자 Material 테마의 기본 및 보조 강조 컬러를 맞춤 설정할 수 있는 MaterialDesign 샘플이 포함되어 있습니다.

테마를 저장했다가 나중에 WinForms 응용 프로그램에 적용할 수 있습니다.

테마의 색 구성표를 변경하려면 아래의 단계를 따라해 보세요!

1. Material 테마 디자이너 샘플을 실행합니다.

• 샘플 이름은 MaterialDesign이며, \Documents\ComponentOne Samples\WinForms\v4.8\Themes 아래에 설치되어 있습니다.
• 또는 GitHub에서 다운로드합니다.

2. "설정" 탭을 클릭하고 브랜드/테마에 따라 템플릿 및 강조 색을 선택합니다.

3. C1 컨트롤에서 테마가 어떻게 적용되는지 미리 봅니다.

4. 톱니모양 아이콘을 클릭하여 응용 프로그램 메뉴를 엽니다.
 

5. "테마 저장"을 클릭하여 선호하는 위치에 테마를 저장합니다.
 

6. 앞 섹션의 단계를 수행하여 테마를 적용하고 4단계에서는 저장된 테마를 선택합니다.

Material 테마의 고급 사용자 정의 

ComponentOne 테마 디자이너 응용 프로그램을 통해 WinForms Edition의 모든 컨트롤에 대해 새로운 테마를 손쉽게 디자인할 수 있습니다.

또한 기존 테마를 편집/수정하여 선택한 모양대로 만들거나 응용 프로그램 테마와 일치되게 할 수 있습니다.

이 응용 프로그램을 더 심도 있게 활용해 Material 테마를 컨트롤이 허용하는 가장 세부적인 수준까지 수정할 수 있습니다.

테마는 속성 집합과 이 속성의 값(컨트롤의 모양과 느낌을 결정함)으로 구성된 .c1theme 확장이 포함된 XML 파일입니다.

테마는 내부적으로 다양한 컨트롤에 해당하는 여러 섹션으로 구분됩니다.

기본 테마 속성 섹션은 다른 모든 컨트롤에 액세스할 수 있습니다.

이 섹션에는 Material이라는 하위 섹션이 포함되어 있습니다.

다양한 Material 테마를 생성하도록 수정할 수 있는 Material 속성을 저장합니다.

예시로 헤더가 기본 색인 FlexGrid의 Material 테마부터 변경해 보겠습니다.

WinForms Material 테마 디자이너 사용법

1. ComponentOne 시작 메뉴에서 ComponentOne 테마 디자이너를 엽니다.