WPF WPF에서 SVG 파일을 아이콘으로 사용하는 올바른 방법은 무엇입니까?

WPF WPF에서 SVG 파일을 아이콘으로 사용하는 올바른 방법은 무엇입니까?

---

누군가가이를 수행하기 위해 권장되는 단계별 절차를 설명 할 수 있습니까?

편집하다:

1 단계. SVG를 XAML로 변환 ...

2 단계. 이제 뭐?

---

기술은 SVG to XAML 변환기가 생성하는 XAML 개체에 따라 다릅니다. 도면을 생성합니까? 이미지? 그리드? 캔버스? 경로? 기하학? 각각의 경우에 당신의 기술은 다를 것입니다.

아래 예제에서는 가장 일반적인 시나리오 인 단추에 아이콘을 사용하고 있다고 가정합니다. 그러나 동일한 기술이 모든 ContentControl에 대해 작동합니다.

드로잉을 아이콘으로 사용

Drawing을 사용하려면 DrawingBrush를 사용하여 적절한 크기의 사각형을 그립니다.

<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>

          <Drawing ... /> <!-- Converted from SVG -->

        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Button>

이미지를 아이콘으로 사용

이미지를 직접 사용할 수 있습니다.

<Button>
  <Image ... />  <!-- Converted from SVG -->
</Button>

그리드를 아이콘으로 사용

그리드를 직접 사용할 수 있습니다.

<Button>
  <Grid ... />  <!-- Converted from SVG -->
</Button>

또는 크기를 제어해야하는 경우 Viewbox에 포함 할 수 있습니다.

<Button>
  <Viewbox ...>
    <Grid ... />  <!-- Converted from SVG -->
  </Viewbox>
</Button>

캔버스를 아이콘으로 사용

이것은 이미지 또는 격자를 사용하는 것과 비슷하지만 캔버스에는 고정 된 크기가 없기 때문에 높이와 너비를 지정해야합니다 (SVG 변환기에서 이미 설정하지 않은 경우).

<Button>
  <Canvas Height="100" Width="100">  <!-- Converted from SVG, with additions -->
  </Canvas>
</Button>

경로를 아이콘으로 사용

경로를 사용할 수 있지만 획 또는 채우기를 명시 적으로 설정해야합니다.

<Button>
  <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

또는

<Button>
  <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

형상을 아이콘으로 사용

경로를 사용하여 형상을 그릴 수 있습니다. 스트로크해야하는 경우 스트로크를 설정합니다.

<Button>
  <Path Stroke="Red" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

또는 채워야하는 경우 채우기를 설정합니다.

<Button>
  <Path Fill="Blue" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

데이터 바인딩 방법

코드에서 SVG-> XAML 변환을 수행하고 결과 XAML이 데이터 바인딩을 사용하여 나타나도록하려면 다음 중 하나를 사용합니다.

도면 바인딩 :

<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
    </Rectangle.Fill>
  </Rectangle>
</Button>

이미지 바인딩 :

<Button Content="{Binding Image}" />

그리드 바인딩 :

<Button Content="{Binding Grid}" />

뷰 박스에서 그리드 바인딩 :

<Button>
  <Viewbox ...>
    <ContentPresenter Content="{Binding Grid}" />
  </Viewbox>
</Button>

캔버스 바인딩 :

<Button>
  <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>

경로 바인딩 :

<Button Content="{Binding Path}" />  <!-- Fill or stroke must be set in code unless set by the SVG converter -->

기하학 바인딩 :

<Button>
  <Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>

---

WPF에서 svg 아이콘을 사용하는 가장 좋은 방법을 찾았습니다. 저는 sharpvector 프레임 워크를 사용합니다 .

Install-Package SharpVectors

따라서 내 XAML은 다음과 같습니다.

<UserControl ...
         xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
         ...>
    ...
    <svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/View/Resources/Icons/Connection.Closed.Black.svg"/>
    ...
</UserControl>

---

Windows 10 빌드 15063 "크리에이터 업데이트"는 Windows 10을 대상으로하는 UWP / UAP 애플리케이션에 대한 SVG 이미지 (일부 문제가 있음)를 기본적으로 지원합니다.

응용 프로그램이 UWP / UAP가 아닌 WPF 앱인 경우에도이 API를 계속 사용할 수 있습니다 (많은 수고를 거친 후). Windows 10 빌드 17763 "2018 년 10 월 업데이트"에서 XAML 아일랜드 개념을 도입했습니다 ( " 미리보기 "기술이 있지만 앱 스토어에서 허용 된 것으로 생각합니다. 모든 경우에 Windows 10 빌드 18362"2019 년 5 월 업데이트 "XAML 아일랜드는 더 이상 미리보기 기능이 아니며 완전히 지원됨) WPF에서 UWP API 및 컨트롤을 사용할 수 있습니다. 응용 프로그램.

먼저 WinRT API에 대한 참조를 추가하고 사용자 데이터 또는 시스템과 상호 작용하는 특정 Windows 10 API를 사용해야합니다 (예 : Windows 10 UWP 웹보기의 디스크에서 이미지로드 또는 알림을 표시하기 위해 알림 알림 API 사용). 또한 여기에 표시된대로 WPF 애플리케이션을 패키지 ID와 연결해야합니다 (Visual Studio 2019에서는 훨씬 더 쉬움). 그러나 이것은 Windows.UI.Xaml.Media.Imaging.SvgImageSource클래스 를 사용하는 데 필요하지 않습니다 .

사용법은 (당신이 UWP에있어 또는 지시 위에 다음과 WPF에서 XAML 섬 지원을 추가 한 경우) 설정 한 간단하다 Source를 들어 <Image />SVG 경로에. 이는 SvgImageSource다음과 같이 를 사용하는 것과 같습니다.

<Image>
    <Image.Source>
        <SvgImageSource UriSource="Assets/svg/icon.svg" />
    </Image.Source>
</Image>

그러나 이러한 방식으로 (XAML을 통해)로드 된 SVG 이미지 는 jagged / aliased를로드 할 수 있습니다 . 한 가지 해결 방법은 실제 높이 / 너비의 두 배에 해당 하는 RasterizePixelHeightor RasterizePixelWidth값 을 지정하는 것입니다.

<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->

이것은 새로운를 생성하여 동적으로 해결할 수 있습니다 SvgImageSource에 ImageOpened기본 이미지에 대한 이벤트 :

var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon));
PrayerIcon.ImageOpened += (s, e) =>
{
    var newSource = new SvgImageSource(svgSource.UriSource);
    newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2;
    newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2;
    PrayerIcon2.Source = newSource;
};
PrayerIcon.Source = svgSource;

높은 dpi가 아닌 화면에서는 앨리어싱을보기 어려울 수 있지만 여기에이를 설명하기위한 시도가 있습니다.

이는 위 코드의 결과입니다. Image이니셜 을 사용하는 an과 이벤트 에서 생성 된 SvgImageSource를 사용 SvgImageSource하는 두 번째 코드입니다 .ImageImageOpened

이것은 상단 이미지의 확대보기입니다.

이것은 하단 (앤티 앨리어싱, 올바른) 이미지의 확대보기입니다.

(차이점을 확인하려면 새 탭에서 이미지를 열고 전체 크기로 봐야합니다)

---

SVG의 결과 xaml을 직사각형의 그리기 브러시로 사용할 수 있습니다. 이 같은:

<Rectangle>
   <Rectangle.Fill>
      --- insert the converted xaml's geometry here ---
   </Rectangle.Fill>
</Rectangle>

---

SvgImage 또는 SvgImageConverter 확장을 사용하면 SvgImageConverter는 바인딩을 지원합니다. 두 확장을 모두 보여주는 샘플은 다음 링크를 참조하십시오.

https://github.com/ElinamLLC/SharpVectors/tree/master/TutorialSamples/ControlSamplesWpf

참고 URL : https://stackoverflow.com/questions/3526366/wpf-what-is-the-correct-way-of-using-svg-files-as-icons-in-wpf