티스토리 뷰

VisualStudio 2012

기본 폼에 MaterialSkin을 적용해보자.
폼을 MaterialSkin으로 변경하고 색상 까지 변경 해보도록 한다.

-- 기본 준비 --

1. Material Skin
MaterialSkin(메테리얼 스킨)은 구글 안드로이드에서 사용하는 기본 디자인을 적용한 테마이다.

참조 : Github 페이지

이 라이브러리는 NuGet Package 를 통해서 추가할 것이다. 프로젝트 생성 시 진행 하도록 하자.

2. Roboto 폰트
좀더 안드로이드틱(?) 하게 만들기 위해 무료 폰트로 배포중인 roboto 폰트를 적용하였다.
(이 폰트는 안드로이드 9.0 전 까지 사용했던 구글 폰트이다.)
roboto 폰트 다운 페이지

위에 페이지에 들어가면 아래와 같은 화면에서 우측 아래 Family Selected 를 누르고 다운모양을 클릭하면 다운이 된다.

압축해제 후 폰트 설치를 하면 된다.

-- 프로젝트 생성 --
새 프로젝트로 C# 프로젝트를 생성한다. (Windows Forms 응용 프로그램)

NuGet Package를 활용하여 라이브러리를 추가해보자. 여기서는 두가지의 방법이 있는데 저자의 경우는 Package Manager Console을 이용하였다.

도구 - NuGet 패키지 관리자 - 패키지 관리자 콘솔 클릭

콘솔 창에서 Install-Package MaterialSkin 입력 후 엔터

위와 같이 라이브러리가 추가됐다는 문구를 확인 하면 OK

Form1.cs 코드를 수정하자.
아래와 같이 using 사용하여 MaterialSkin 관련 네임스페이스 추가해주고 Form 클래스를 Material Form 클래스로 변경시킨다.

그렇게 하고 폼 디자인을 확인해보면 아래와 같이 기본 폼이 변경 되어 있을것이다.

폼 도구상자도 추가해보자.
도구 상자 탭을 클릭하고 보여지는 화면에서 우측 클릭 - 탭 추가로 Material Skin Tools 탭을 추가한다.

Material Skin Tools 탭이 만들어 졌으면 탭을 우클릭 후 - 항목 선택을 클릭한다.

도구 상자 항목 선택 창이 열리면 .Net Framework 구성 요소 탭에서 항목 찾아보기 버튼 클릭

해당 프로젝트 폴더로 가보면 packages\MaterialSkin\lib 폴더에 MaterialSkin.dll 파일이 생겼을 것이다. 이 파일을 열어준다.

파일을 열면 아래와 같이 관련 컨트롤들이 추가 되어 있을 것이다. 확인 버튼 클릭한다.

도구상자 탭에도 아래와 같이 컨트롤들이 추가되어있는 것을 확인 할 수 있다.

이제 폼 색을 변경하여 적용해보자.
Form1.cs에 아래의 코드를 입력한다.

namespace CustomForm
{
    public partial class Form1 : MaterialForm
    {
        public Form1()
        {
            InitializeComponent();

            var materialSkinManager = MaterialSkinManager.Instance;
            materialSkinManager.AddFormToManage(this);
            materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;
            materialSkinManager.ColorScheme = new ColorScheme(Primary.Green800, Primary.Green900, Primary.Green500, Accent.Orange400, TextShade.WHITE);
        }
    }
}

그 후 컴파일 후 실행 해보면 아래와 같이 색상이 변경 되어 있을 것이다.

디자인 에서 폼 클릭 후 속성창에 나오는 폰트까지 Roboto 폰트로 바꾸면 안드로이드 틱한 프로그램 UI가 완성된다.

이제 입맛에 맞게 색을 변경하거나 컨트롤을 활용해서 프로그램을 구성해보자.

댓글