WinForms 응용 프로그램의 Material Design 소개

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-04-12 10:40 조회 6,070회 댓글 0건

본문

WinForms Edition용 ComponentOne Studio Edition에는 현재 새로 추가된 Material 및 Material Dark 테마가 포함되어 있습니다. 이 테마는 WinForms Edition의 모든 컨트롤과 가장 일반적으로 사용되는 Microsoft 컨트롤 대부분에 적용할 수 있는 C1Themes로 제공됩니다. 이 두 테마는 두 가지 색 구성표를 제공하고, 동일한 Material 원칙 및 색 사양을 고수하며, 이후 도입할 Material 테마를 위한 기본 테마 역할을 할 수도 있습니다. Material 테마는 Material Dark에 비해 밝은 테마입니다.

Material 테마 Material 테마

Material Dark 테마 Material Dark 테마

다음은 컨트롤이 자체 기본 테마와 Material 테마에서 각기 어떤 모양으로 표시되는지 비교한 것입니다.

	기본 테마	Materail 테마
C1FlexGrid
C1Scheduler
C1Input
Microsoft 컨트롤

WinForms Material 테마 디자이너를 사용해 새 테마 만들기

Material Design 색 시스템은 기본 및 보조 색으로 구성됩니다. 이 색들은 응용 프로그램의 브랜딩 및 스타일 지정을 반영합니다. ComponentOne의 새로운 Material 디자이너 샘플은 Material 테마에 맞는 기본 및 보조 강조색을 선택할 수 있는 대화형 디자이너입니다. WinForms 응용 프로그램에서 테마를 저장하고 나중에 적용할 수 있습니다.

WinForms Material 디자이너 WinForms Material 디자이너

테마에 맞게 색 구성표는 다음 절차에 따라 쉽게 변경할 수 있습니다.

Material 테마 디자이너 샘플을 실행합니다.
“설정” 탭을 클릭하고 브랜드/테마에 따라 템플릿 및 강조 색을 선택합니다.
C1 컨트롤에서 테마가 어떻게 적용되는지 미리 확인합니다.
톱니모양 아이콘을 클릭하여 응용 프로그램 메뉴를 엽니다.
“테마 저장”을 클릭하여 선호하는 위치에 테마를 저장합니다.

아래에서 Material 테마 디자이너가 작동하는 모습을 확인해 보세요.

WinForms Material Design

WinForms 응용 프로그램에 Material 테마 적용

Material 테마는 런타임뿐 아니라 디자인 타임에도 적용할 수 있습니다. 테마 컨트롤러 대화 상자에서 또는 ‘App.config’ 파일을 수정하여 디자인 타임에 테마를 적용할 수 있습니다. 런타임을 적용하려면 C1ThemeController 정적 클래스를 사용해 테마를 적용하십시오.

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

Visual Studio Forms 디자이너의 응용 프로그램에서 폼을 엽니다.
디자이너의 도구 상자에서 C1ThemeController를 드래그하여 폼에 놓습니다. ThemeController 대화 상자가 표시됩니다. 이를 통해 다음과 같은 테마를 선택할 수 있습니다.
- 응용 프로그램 전체 기본 테마
- 현재 컨트롤러의 기본 테마
- 이미 폼에 있는 지원되는 모든 컨트롤의 테마

팝업으로 나타나는 대화 상자에서 테마는 이미 폼에 있는 지원되는 모든 컨트롤에 대해 처음에는 “(없음)”으로 지정됩니다. 이를 통해, 그러한 컨트롤에서 속성 설정이 의도치 않게 손실되는 일을 방지할 수 있습니다.

기본 테마가 모든 컨트롤에 설정되도록 대화 상자에서 모두 (기본값)으로 버튼을 클릭합니다. 참고: 일부 컨트롤을 이미 사용자 정의한 경우 무시됩니다. 그리고 기본 테마는 복원되지 않습니다.
사용 가능한 기본 제공 테마의 목록에서 Material을 선택합니다. Material 테마 디자이너로 만든 Material 테마를 선택할 수도 있습니다.
위에서 언급했듯이 모두 (기본값)으로 버튼을 클릭하여 폼에서 지원되는 모든 컨트롤에서 기본 테마를 설정합니다.
확인 버튼을 클릭하여 대화 상자를 닫고 지정된 테마를 폼의 컨트롤에 적용합니다.

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 테마 사용자 정의(고급)

C1Theme 디자이너 응용 프로그램을 통해 WinForms Edition의 모든 컨트롤에 대해 새로운 테마를 손쉽게 디자인할 수 있습니다. 또한 기존 테마를 편집/수정하여 선택한 모양대로 만들거나 응용 프로그램 테마와 일치되게 할 수 있습니다. 이 응용 프로그램을 더 심도 있게 활용해 Material 테마를 컨트롤이 허용하는 가장 세부적인 수준까지 수정할 수 있습니다.

테마는 일련의 속성과 이 속성의 값으로 구성된 .c1theme 확장이 포함된 XML 파일입니다(컨트롤의 모양과 느낌을 결정함). 테마는 내부적으로 다양한 컨트롤에 상응하는 다양한 섹션으로 구분됩니다. 기본 테마 속성 섹션은 다른 모든 컨트롤에 액세스할 수 있습니다. 이 섹션에는 Material이라는 하위 섹션이 포함되어 있습니다. 이 하위 섹션은 만들어진 다양한 Material 테마에 맞게 수정할 수 있는 Material 속성을 저장합니다.

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

WinForms Material 테마 디자이너 사용법

ComponentOne 시작 메뉴에서 ComponentOne 테마 디자이너를 엽니다. Ctrl + N 또는 파일 > 새로 만들기를 누릅니다. Material을 새 테마를 위한 기본 테마로 선택합니다.
기본 테마 선택
BTP 편집기 버튼(1)을 클릭합니다. 그러면 새 기본 테마 속성 편집기가 열립니다. “Material” 속성(2)을 선택합니다. 여기에서 Material에서 사용되는 다양한 색을 보실 수 있습니다.
Material 디자인에서 사용되는 색
테마 트리로 이동하여 C1FlexGrid 노드를 확장합니다.
C1FlexGrid 확장 > 스타일 > 고정된 노드. 이 노드는 고정된 (헤더) 셀에 대해 스타일을 유지합니다.
ForeColo 드롭다운을 선택하여 색 선택기를 엽니다.
선택기 드롭다운에서 참조 탭을 선택하여 기본색을 선택할 수 있습니다.
기본 색 선택
“응용 프로그램에 Material 테마 적용” 섹션에서 언급한 것처럼 이 테마를 저장하여 사용할 수 있습니다. 이제 FlexGrid에는 기본 색 설정에 따른 헤더 색이 있어야 합니다.