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

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Viewbox x:Key="Add row bottom" x:Shared="false">
        <Grid
            Width="48"
            Height="48"
            Visibility="Visible">
            <Path
                Width="26"
                Height="26"
                Margin="0,0,0,0"
                Data="M18,14L18,18 24,18 24,14z M10,14L10,18 16,18 16,14z M2,14L2,18 8,18 8,14z M18,8L18,12 24,12 24,8z M10,8L10,12 16,12 16,8z M2,8L2,12 8,12 8,8z M18,2L18,6 24,6 24,2z M10,2L10,6 16,6 16,2z M2,2L2,6 8,6 8,2z M0,0L24,0 26,0 26,26 18,26 18,24 14,24 14,27 18,27 13,32 8,27 12,27 12,24 8,24 8,26 0,26z"
                Fill="#FFFFFFFF"
                RenderTransformOrigin="0.5,0.5"
                Stretch="Uniform">
                <Path.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <RotateTransform Angle="0" />
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </TransformGroup.Children>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Grid>
    </Viewbox>
    <Viewbox x:Key="Sample" x:Shared="false">
        <Grid
            Width="48"
            Height="48"
            Visibility="Visible">
            <Path
                Width="26"
                Height="26"
                Margin="0,0,0,0"
                Data="M26.77298,23.253006L26.77298,25.731003 24.294006,25.731003 24.294006,26.840004 26.77298,26.840004 26.77298,29.318001 27.881989,29.318001 27.881989,26.840004 30.360992,26.840004 30.360992,25.731003 27.881989,25.731003 27.881989,23.253006z M27.326996,21.614004C29.906982,21.614004 32,23.705002 32,26.285004 32,28.865005 29.906982,30.957001 27.326996,30.957001 24.746979,30.957001 22.656006,28.865005 22.656006,26.285004 22.656006,23.705002 24.746979,21.614004 27.326996,21.614004z M15.140991,12.517004L17.513,19.788999 18.549988,19.788999 21.149994,12.517004 20.145996,12.517004 18.915985,16.109999C18.592987,17.059004,18.290985,17.976004,18.084991,18.817999L18.063995,18.817999C17.869995,17.966001,17.600006,17.080999,17.286987,16.099005L16.152985,12.517004z M12.735992,12.399004C11.322998,12.399004 10.384003,13.240003 10.384003,14.372 10.384003,15.398001 11.117004,16.012998 12.303986,16.434004 13.28598,16.812002 13.674988,17.200003 13.674988,17.879003 13.674988,18.613005 13.113983,19.120001 12.152985,19.120001 11.505981,19.120001 10.890991,18.905004 10.470001,18.646002L10.233002,19.433004C10.621002,19.691999 11.386993,19.896002 12.088989,19.896002 13.803986,19.896002 14.634003,18.926 14.634003,17.803999 14.634003,16.736006 14.007996,16.143003 12.778992,15.668005 11.774994,15.279005 11.333008,14.945005 11.333008,14.265005 11.333008,13.769003 11.710999,13.175001 12.703979,13.175001 13.360992,13.175001 13.846985,13.391001 14.083008,13.521002L14.34198,12.755003C14.019989,12.572,13.480988,12.399004,12.735992,12.399004z M7.7109985,12.399004C5.4559937,12.399004 3.9129944,13.941999 3.9129944,16.218 3.9129944,18.602003 5.4559937,19.896002 7.5059814,19.896002 8.3890076,19.896002 9.0809937,19.723005 9.427002,19.552L9.2319946,18.808004C8.8549805,18.991003 8.2720032,19.108999 7.6999817,19.108999 5.9309998,19.108999 4.9060059,17.966001 4.9060059,16.185003 4.9060059,14.275999 6.0390015,13.186003 7.7420044,13.186003 8.3469849,13.186003 8.8549805,13.316004 9.2099915,13.489004L9.4369812,12.723001C9.1889954,12.593,8.6170044,12.399004,7.7109985,12.399004z M10.089996,0L20.395996,0 28.166992,7.7729996 28.166992,20.555006C27.893005,20.516004 27.613007,20.488005 27.328979,20.488005 27.002991,20.488005 26.686005,20.521002 26.373993,20.573004L26.373993,8.5550011 20.416992,8.5550011C19.923981,8.5550011,19.520996,8.1510018,19.520996,7.6580018L19.520996,1.7939992 10.089996,1.7929997C9.1019897,1.7929996,8.2980042,2.5970005,8.2980042,3.5859991L8.2980042,10.355001 23.505981,10.355001C24.149994,10.355001,24.671997,10.878004,24.671997,11.522001L24.671997,20.487005C24.671997,21.130003,24.149994,21.651998,23.505981,21.651998L8.2980042,21.651998 8.2980042,25.175003C8.2980042,26.164001,9.1019897,26.968002,10.089996,26.968002L21.572998,26.968002C21.648987,27.603004,21.828979,28.205002,22.09198,28.761001L10.089996,28.761001C8.1130066,28.761001,6.5050049,27.152,6.5050049,25.175003L6.5050049,21.651998 1.1650085,21.651998C0.52099609,21.651998,0,21.130003,0,20.487005L0,11.522001C0,10.878004,0.52099609,10.355001,1.1650085,10.355001L6.5050049,10.355001 6.5050049,3.5859991C6.5050049,1.6090015,8.1130066,1.2735723E-07,10.089996,0z"
                Fill="#FFFFFFFF"
                RenderTransformOrigin="0.5,0.5"
                Stretch="Uniform">
                <Path.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <RotateTransform Angle="0" />
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </TransformGroup.Children>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Grid>
    </Viewbox>
</ResourceDictionary>

App.xaml

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

<Application
    x:Class="MetroStudioSample.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MetroStudioSample"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="PathIcons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml

<Window
    x:Class="MetroStudioSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MetroStudioSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid Background="Black">
        <StackPanel>
            <ContentControl Height="200" Content="{StaticResource Sample}" />
            <ContentControl Height="200" Content="{StaticResource Add row bottom}" />
        </StackPanel>
    </Grid>
</Window>

실행 화면

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

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

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

5. 소스코드

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

GitHub - kaki104/WpfTest