Syncfusion Metro Studio 5으로 아이콘 쉽게 만들어서 사용하기

[카키104]

Syncfusion Metro Studio 5으로 아이콘 쉽게 만들어서 사용하기 (tistory.com)

Syncfusion Metro Studio 5으로 아이콘 쉽게 만들어서 사용하기

Syncfusion사의 Metro Studio 5에 대한 자세한 설명을 포스팅 한적이 없는 것 같네요;;

이 어플리케이션 사용한지가 엄청 오래되었는데..쿨럭 Syncfusion 아엠 쏘리..

제가 개발만 할줄알지, 디자인이나 포토샵을 다루지 못하기 때문에, 애플리케이션에서 사용하는 아이콘이 필요할 때면 아는 동생을 졸라서 만들거나, 인터넷에서 무료 아이콘 같은거 찾아서 다운로드 받아서 사용했었습니다.

그런데, Metro Studio를 알고난 후 부터는 아이콘 걱정은 일절하지 않습니다. Png, Jpeg, Ico, Path 등 아이콘을 내가 원하는 형태로 출력해주니 고민을 할 이유가 사라졌죠~

1. Syncfusion Metro Studio Download

Free Metro Style Icons Download | Syncfusion

Free Metro Style Icons Download | Syncfusion

싱크퓨전에 가입하시면 사용하시는 건 평생 무료입니다. 애플리케이션 실행할 때 가입한 이메일 주소와 비밀번호를 입력하면 자동으로 사용등록이 됩니다.

2. 메인 화면 설명

애플리케이션 실행하면 아래와 같은 메인화면이 나오고 필요한 아이콘을 찾아서 사용하시면 되는데, 제공되는 아이콘의 수가 워낙 많아서, 아이콘 이름을 입력해서 검색하신 후 사용하는 것을 추천드립니다.

왼쪽 빨간 부분은 프로젝트에서 사용하는 아이콘들을 모을 수 있는 폴더를 하나 만들 수 있습니다.

검색 후 아이콘을 폴더에 넣어서 별도로 관리할 수 있습니다.

아래 화면에서는 WpfDesign이라는 폴더에 6개의 아이콘이 들어가 있는 것을 확인할 수 있습니다.

3. 아이콘 폴더 상세

폴더에 넣어 놓은 아이콘 목록이 출력되며, 아이콘의 이름도 변경해서 저장이 가능합니다.

Sample이라는 폴더를 하나 만들고 2개의 아이콘을 추가했습니다.

전 일단 아이콘의 백그라운드를 투명으로 변경합니다.

나머지 옵션은 별로 손을 대지 않는데, 필요하다면 수정하셔도 상관은 없겠죠?

• Save : 현재 변경된 여러가지 설정 값을 저장
• Export : png, jpg, gif, bmp, tiff, xaml, ico, svg 파일 형태로 저장할 수 있습니다.
• Sprite : 스프라이트로 저장하는 기능인데..사용해본 적이 없네요;;

• Code : Default XAML, WinRT AppBar, AppBarButton, SVG 코드 형태로 화면에 출력해줍니다. 
  • Default XAML, WinRT AppBar, AppBarButton : 3가지 모두 WPF에서 사용 가능할 것 같습니다만, 저는 첫번째 탭에서 주로 복사해서 사용하고 있습니다.

4. WPF에서 사용하는 방법

WPF 프로젝트를 추가하고, Resource Dictionary (WPF) 파일을 하나 추가합니다.

Metro Studio 5에서 Code 버튼을 눌러서 Default XAML탭의 내용을 복사해서, 그대로 붙여 넣기 합니다.

PathIcons.xaml

App.xaml

방금 추가한 리소스 딕셔너리를 애플리케이션 전체에서 사용할 수 있도록 머지 시켜 줍니다.

MainWindow.xaml

실행 화면

초 간단하게 아이콘 사용법을 알아보았습니다. 다만, 현재는 아래와 같은 단점이 있습니다.

• Fill컬러가 White로 고정되어 있는 상태라 아이콘1개를 각각 다른 컬로로 이용하기에 불편함
• 불필요한 리소스 낭비가 있음

이 단점은 리소스 딕셔너리를 수정해서 사용하셔도 되고, 아니면, 추후 진행하는 포스팅에서 손쉬운(하지만 코드를 수정해야하니 번잡한) 방법을 알려드리겠습니다.

5. 소스코드

WpfTest/MetroStudioSample at master · kaki104/WpfTest (github.com)

GitHub - kaki104/WpfTest