Material Design(머티리얼 디자인)은 이제 앱 개발시에 당연하게 고려해야 하는 디자인 요소중에 하나가 되었습니다. 이러한, 엄청난 인기는 ComponentOne Studio가 머티리얼 디자인 사양을 지원하는 기능 세트를 포함하도록 이끌었습니다. 우리는 이미 ASP.NET MVC 및 JavaScript 컨트롤에서 머티리얼 디자인을 지원하고 있습니다. 이제 우리는 2018  v3 버전 부터 데스크톱 개발자를 위해, ComponentOne의 WinForms 컨트롤에도 머티리얼 디자인 사양(Material Design Spec)을 지원합니다.

WinForms 앱에 머티리얼 테마 추가

WinForms 용 ComponentOne Studio Edition은 이제 새로운 Material  및 Material Dark 테마를 추가했습니다. 이 테마는 C1Themes를 통해 윈폼 에디션의 모든 컨트롤 뿐만 아니라 일반적으로 사용되는 마이크로 소프트 컨트롤의 대부분에대 적용할 수 있습니다. 이 두 가지 테마는 서로 다른 두 가지 색 구성표를 제공하고 동일한 material 원칙과 색상 사양을 준수하며, 미래의 머티리얼(Material) 테마에 대한 기본 테마로도 사용할 수 있습니다 . 머티리얼(Material) 테마는 머티리얼 다크(Material Dark)에 비해 가벼운 테마입니다.

다음은 기본 테마와 Material Theme( 머티리얼 테마)에서 컨트롤이 어떻게 보이는지 비교 한 것입니다.

	기본 테마	머티리얼 테마
C1FlexGrid
C1 스케줄러
C1 입력
Microsoft 컨트롤

WinForms Material Theme Designer를 사용하여 새로운 테마 만들기

머티리얼(Material) 디자인 색상 시스템은 기본 색상과 보조 색상으로 구성됩니다. 이러한 색상은 응용 프로그램의 브랜딩 및 스타일을 반영합니다. ComponentOne의 새로운 Material Designer 샘플은 대화식 디자이너로, Material 테마의 기본 및 보조 액센트 색상을 선택할 수 있습니다. 테마를 저장하고, 나중에 WinForms 응용 프로그램에 적용할 수 있습니다.

테마의 색 구성표를 변경하려면 다음 단계를 따르십시오.

1. Material Theme Designer 샘플을 실행하십시오.
   
   
2. “설정(SETTINGS)”탭을 클릭하고 브랜드/테마에 따라 템플릿 및 강조 색상을 선택하십시오.
   
   
3. C1 컨트롤로 테마가 어떻게 보이는지 미리 봅니다.
   
   
4. cog 아이콘을 클릭하여 애플리케이션 메뉴를 엽니다.
   
   
5. “테마 저장(Save Theme)”을 클릭하여 원하는 위치에 테마를 저장하십시오.

실제 머티리얼 테마 디자이너를 보십시오 :

WinForms 애플리케이션에 머티리얼 테마 적용

머티리얼 테마(Material Theme)는 디자인 타임과 런타임에 적용 할 수 있습니다. 디자인 타임에 테마 컨트롤러 대화 상자를 사용하거나 'App.config' 파일을 수정하여 테마를 적용할 수 있습니다. 런타임에 적용하려면 C1ThemeController 정적 클래스를 사용하여 테마를 적용하십시오.

테마 컨트롤러 대화 상자 사용

1. Visual Studio의 폼 디자이너(forms designer)에서 응용 프로그램의 폼을 엽니다.
   
   

2. 디자이너의 도구 상자에서 C1ThemeController를 끌어서 양식에 놓으십시오. ThemeController 대화 상자가 나타납니다. 이를 통해 다음을 선택할 수 있습니다.

   • 응용 프로그램 전체 기본 테마
   • 현재 컨트롤러의 기본 테마
   • 이미 폼에있는 모든 지원 컨트롤에 대한 테마

나타나는 대화 상자에서 테마는 이미 양식에있는 모든 지원 컨트롤에 대해 기본적으로 "(none)"으로 지정됩니다. 이렇게 하면 해당 컨트롤에서 의도하지 않은 속성 설정 손실이 방지됩니다.

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

4. 사용 가능한 내장 테마 목록에서 Material 를 선택하십시오.  또한, 머티리얼 테마 디자이너(Material Theme Designer)로 만든 머티리얼 테마를 선택할 수도 있습니다.
   
   

5. 양식의 모든 지원 컨트롤에 대한 기본 테마를 설정하려면 위에서 언급한 대로 All to (default) 버튼을 클릭하십시오.
   
   

6. "OK (확인)" 버튼을 클릭하여 대화 상자를 닫고 지정된 테마를 폼의 컨트롤에 적용하십시오.

App.config 파일 사용

응용 프로그램에 C1.Win.C1Themes. (4/2) .dll을 포함하십시오. App.Config에 다음 앱 설정을 추가하여 기본 테마를 적용 할 수 있습니다.

<configuration>

  <appSettings>

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

  </appSettings>

</configuration>

코드 사용

응용 프로그램에 C1.Win.C1Themes. (4/2) .dll을 포함시키고 응용 프로그램이 로드되기 전에 다음 코드를 추가하십시오.

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

C1ThemeController.ApplyThemeToControlTree(control, theme);

Material Theme 사용자 정의 (고급)

C1Theme Designer Application을 사용하면 WinForms Edition의 모든 컨트롤에 대해 새로운 테마를 쉽게 디자인할 수 있습니다. 또한 기존 테마를 편집/수정하여 선택한 모양을 얻거나 응용 프로그램 테마와 일치시킬 수 있습니다. 이 애플리케이션을 사용하여 Material Theme(머티리얼 테마)를 컨트롤에서 허용하는 가장 세부적인 수준으로 까지 조정할 수 있습니다.

테마는 .c1theme 확장자를 가진 XML 파일로, 일련의 속성과 해당 값 (컨트롤의 모양과 느낌을 결정)으로 구성됩니다. 테마는 내부적으로 다른 컨트롤에 각각에 상응하는 서로 다른 섹션으로 나뉩니다. 기본 테마 속성 섹션은 다른 모든 컨트롤에 액세스 할 수 있습니다. 특정 섹션에는 다른 Material 테마를 만들기 위해 변경할 수있는 Material 속성을 저장하는 하위 섹션 인 Material이 포함되어 있습니다.

예를 들어, 헤더가 기본 색상인 FlexGrid에 대한 Material Theme(머티리얼 테마)를 변경해 보겠습니다.

WinForms 머티리얼 테마 디자이너를 사용하는 방법

1. ComponentOne 시작 메뉴에서 ComponentOne Theme Designer(테마 디자이너)를 여십시오. Ctrl + N 또는 "파일>새로 작성(File>New)"을 누르십시오. 새 테마의 기본 테마로 Material을 선택하십시오.
   
   

   

2. BTP  Editor 버튼 (1)을 클릭하십시오. 새로운 기본 테마 속성 편집기가 열립니다. "Material" 속성을 선택하십시오 (2). Material에 사용된 다양한 색상을 볼 수 있습니다 :
   
   

   

3. 테마(Theme) 트리로 이동하여 C1FlexGrid 노드를 펼치십시오.
   
   

4. C1FlexGrid> Styles > Fixed 노드를 펼치십시오. 이 노드는 고정 (헤더/header) 셀의 스타일을 유지합니다.
   
   
5. 색상 선택기(color picker)를 열려면 ForeColo 드롭 다운을 선택하십시오.
   
   

6. 선택기(picker) 드롭 다운에서 참조(Reference) 탭을 선택하여 기본(priamry) 색상을 선택할 수 있습니다.
   
   

   

7. 이제 위에 언급된 "응용 프로그램에 Material 테마 적용" 섹션에 언급된대로, 이 테마를 저장하고 사용할 수 있습니다. FlexGrid는 이제 기본 색상 설정에 따라 헤더 색상을 갖습니다.

WinForms Material 테마에 대해 더 알아보기