프로그램에 이미지를 추가할 때
Image - Source 를 사용하여 추가하는 방법도 있지만
Geomtry 라는 좌표계를 이용하여 만든 이미지를 추가하는 방법도 있다.
Geomtry 의 장점은...
1. 원하는 이미지를 그릴 수 있음.
2. 크기가 국한되어있지 않으며 해상도가 깨지는 일이 없음
3. 색상을 원하는 데로 변경 가능
4. 무료 이미지 배포 사이트 존재
정도인 것 같다.
위 4번에 해당하는 추천 사이트를 공유 한다.
https://pictogrammers.com/library/mdi/
Material Design Icons - Icon Library - Pictogrammers
The original. Following Google's Material Design guidelines for system icons, MDI is our largest library, touting over 7200 unique icons!
pictogrammers.com
1. 검색하여 원하는 이미지를 찾는다.
2. Copy SVG 를 눌러서 좌표를 복사한다.
- 옆에 다운로드 버튼을 이용하여 PNG 파일로도 받을 수 있다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>ab-testing</title>
<path d="M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z"/>
</svg>
path 의 "M4 2A2 ......" 부분만이 필요하다.
3. 코드에서 리소스에 등록
<Geometry x:Key="AB">
M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z
</Geometry>
4. 코드(View) 에서 사용
<Viewbox>
<Path Data="{StaticResource AB}" Fill="#FF0000"/>
</Viewbox>
- Fill 을 이용하여 원하는 색상으로 설정이 가능함.
- Viewbox 안에 넣어 Viewbox 의 Width, Height 를 조정하여 크기 변경이 가능 (해상도 깨지지 않음)
정말 유용하게 사용하고 있다.