안녕하세요. 소심비형입니다. 오늘은 새롭게 추가된 메트로 디자인을 적용해볼께요. 기존에 학습한 내용과 동일하지만, 몇가지 다른점이 있어서, 처음부터 새롭게 만들도록 하겠습니다. 아래와 같이 비주얼 스튜디오를 실행하고, 새로운 프로젝트를 추가하세요. 우선, 비주얼 스튜디오를 실행합니다. 아래 그림과 같은 화면이 처음 표시될거예요.

 

 

새로운 프로젝트를 생성합니다. 프로젝트란 내가 무언가 목표를 달성하기 위해 시작하는 일의 단위입니다. 결국 이 프로젝트가 컴파일(Compile 또는 Build)을 거쳐 결과물을 만들어냅니다. 결과물이란 NGM Player겠죠^^;

메뉴의 파일 > 새로 만들기 > 프로젝트를 클릭하세요.

 

 

내 컴퓨터의 로컬 위치에 Windows Forms 프로젝트를 생성해줍니다.

1. 찾아보기 클릭

2. 프로젝트를 저장할 위치 선택 (바탕 화면 선택)

3. Windows Forms 앱(.NET Framework) 선택

4. MyNGMPlayer 프로젝트 이름 입력

5. .NET Framework 버전 선택 (4.6.1)

6. 솔루션용 디렉토리 만들기 체크

7. 확인 버튼 클릭

 

 

좌측의 도구 상자에 탭을 2개 추가합니다.

1. 도구 상자에서 우클릭

2. 탭 추가 후 NGM 입력, 다시 탭 추가 후 Metro Framework 입력

 

추가한 NGM과 Metro Framework 탭에서 ①우클릭 후 ②항목 선택을 클릭하세요. 

 

①찾아보기를 클릭하세요. 

 

NGM 디자이너가 설치된 폴더로 이동합니다. ①NGM.GUI.dll을 선택하고 ②열기를 클릭하세요. 

 

①확인을 클릭하세요. 

 

도구 상자의 Metro Framework탭에서 우클릭 후 항목 선택을 클릭하세요. 그리고, NGM과 동일하게 진행합니다. 아래 그림처럼 ①MetroFramework.dll을 선택하고, ②열기를 클릭하세요. 

 

 

 

①확인을 클릭하세요. 

 

 

도구 상자에 NGM과 Metro Framework 관련 컨트롤들이 추가된 것을 확인할 수 있습니다.

 

 

①폼(Form)을 한번 클릭하여 선택하고, 우클릭합니다. ②코드 보기로 이동하세요. 코드 보기로 이동하는 단축키는 F7이고, 디자이너 보기는 Shift+F7입니다.

 

 

솔루션 탐색기에서 프로젝트의 ①참조에서 우클릭 후 ②참조 추가를 클릭하세요.

 

①찾아보기를 클릭하세요. 

 

NGM 디자이너가 설치된 폴더로 이동한 후 아래 목록과 같이 라이브러리들을 선택하고 ①추가를 클릭하세요. 

 

선택한 라이브러리들이 참조에 추가된 것을 확인할 수 있습니다. 

 

 

아래 그림과 같이 상속 받은 Form을 지우고, NGM.GUI.ComponentMetro.MainView로 대체하세요.

 

 

Shift+F7 또는 우클릭하여 디자이너 보기를 선택합니다. 그러면 아래 그림과 같이 디자인이 변경된 것을 확인할 수 있습니다.

1. 속성 클릭

2. 사이즈를 500, 320으로 변경

3. 텍스트에 "My Metro Player" 입력

 

 

도구 상자에서 플레이 버튼과 스톱 버튼을 적당한 위치에 추가하세요.

1. 도구 상자의 플레이 버튼 클릭

2. 드래그 앤 드롭으로 폼에 추가

3. 도구 상자의 스톱 버튼 클릭

4. 드래그 앤 드롭으로 폼에 추가

 

 

플레이 버튼 ①선택 후 디자인을 ②메트로로 변경하세요. 스톱 버튼도 동일하게 변경해주세요.

 

 

탭 컨트롤을 하나 추가합니다.

1. 도구 상자에서 탭 컨트롤 클릭

2. 드래그 앤 드롭으로 폼에 추가

3. 컨트롤 메뉴 클릭

 

 

Add Tab을 클릭하여 적당히 추가 해줍니다. 예제를 위해 3개 추가 했습니다.

 

①탭 페이지를 클릭하고, ②텍스트를 "숙제 하기"로 입력하세요. 

 

나머지 탭들도 아래 그림과 같이 설정 해줍니다. 

 

 

도구 상자에서 ①스크립트를 선택하고, 탭 페이지에 ②드래그 앤 드롭으로 추가하세요. 그리고, ③컨트롤 메뉴에서 ④"부모 컨테이너에서 도킹"을 클릭합니다.

 

SelectScript에서 첨부되어 있는 ①그룹 1.ngs를 선택하세요. 자동 사냥 탭 페이지도 동일하게 작업하고 그룹 2.ngs를 선택 해줍니다. 

 

 

도구 상자에서 ①그룹메트로 컨트롤을 선택하고, ②스크립트에 드래그 앤 드롭으로 추가하세요. 그리고, ③각각 그룹 선택을 해줍니다.

 

자동 사냥 탭을 선택하고, 동일하게 ①그룹메트로 컨트롤을 ②추가해줍니다. 각각 ③그룹을 선택하고 ④디자인은 메트로로 변경해줍니다. 

 

 

마지막으로 옵션 설정 탭 페이지도 컨트롤들을 추가해줍니다.

1. 최상위에 창 고정 컨트롤 선택

2. 드래그 앤 드롭으로 추가

3. 관리자 권한으로 실행 컨트롤 선택

4. 드래그 앤 드롭으로 추가

5. 마우스 이펙트 표시 컨트롤 선택

6. 드래그 앤 드롭으로 추가

 

 

F5(시작)를 눌러서 결과를 확인 해봅니다. 아래 그림과 같은 화면을 볼 수 있습니다.

 

 

이렇게 해서 메트로 디자인이 적용된 플레이어를 만들어봤습니다. 다음에는 이 내용과 이어서 테마와 컬러 스타일을 변경하는 방법에 대해 알아보고, 같이 적용 해보도록 하겠습니다.

 

개발자에게 후원하기

 

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

 

추천0 비추천0