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

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

이를 위해 권장되는 단계별 절차를 설명할 수 있는 사람이 있습니까?

스텝 1. SVG를 XAML로 변환...그건 간단해

2단계, 이제 어쩌죠?

기술은 SVG에서 XAML 변환기로 생성되는 XAML 개체에 따라 달라집니다.도면이 생성됩니까?이미지?그리드?캔버스?경로?기하학?각각의 경우 기술이 다릅니다.

다음 예에서는 버튼에 아이콘을 사용하고 있다고 가정합니다.이것은 가장 일반적인 시나리오입니다만, 어느 Content Control에서도 같은 수법이 유효합니다.

도면을 아이콘으로 사용

도면을 사용하려면 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>

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

<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>

SharpVectors 라이브러리 설치

Install-Package SharpVectors

XAML에 다음 추가

<UserControl xmlns:svgc="http://sharpvectors.codeplex.com/svgc">
    <svgc:SvgViewbox Source="/Icons/icon.svg"/>
</UserControl>

Windows 10 빌드 15063 "Creators Update"는 기본적으로 Windows 10을 대상으로 하는 UWP/UAP 응용 프로그램에 대한 SVG 이미지(일부 gotchas 포함)를 지원합니다.

어플리케이션이 UWP/UAP가 아닌 WPF 어플리케이션인 경우에도 이 API를 사용할 수 있습니다(많은 홉을 건너뛰고 나서).Windows 10 빌드 17763 "2018년 10월 업데이트"는 XAML 아일랜드 개념을 도입했습니다('프리뷰' 테크놀로지이지만 앱스토어에서 허용된다고 생각합니다.Windows 10 빌드 18362 "May 2019 Update" XAML 아일랜드는 더 이상 프리뷰 기능이 아니며 WWP 및 WPF에서 완전히 지원됩니다).

먼저 WinRT API에 참조를 추가하고 사용자 데이터 또는 시스템과 상호작용하는 특정 Windows 10 API(Windows 10 UWP 웹 뷰의 디스크에서 이미지를 로드하거나 토스트 알림 API를 사용하여 토스트 표시)를 사용해야 합니다.또한 WPF 어플리케이션을 패키지, ID에 관련지어야 합니다.(Visual Studio 2019에서는 매우 간단합니다)이것은, 이 기능을 사용하기 위해서 필요한 것은 아닙니다.Windows.UI.Xaml.Media.Imaging.SvgImageSource그래도 수업이야

에 있는 위의 은 WPF에 XAML을 .Source잠 an an <Image />SVG 경로로 이동합니다.은 '먹다'를 하는 것과 같습니다.SvgImageSource음음음같 뭇매하다

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

단, (XAML 경유로) 로드된 SVG 이미지는 들쭉날쭉하거나 에일리어스가 있을 수 있습니다.회피책의 하나는, 다음의 것을 지정하는 것입니다.RasterizePixelHeight ★★★★★★★★★★★★★★★★★」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 이외의 화면에서는 잘 보이지 않을 수 있지만, 여기에 그것을 나타내는 시도가 있습니다.

은 위의입니다. 즉, above은은 an an 、 this 、 this 、 this 、 this 、 。Image요.SvgImageSource및 두, " "ImageSvgImageSource에서 .ImageOpened 이벤트 표시:

상단 이미지를 확대하여 보여 줍니다.

이것은 아래쪽(반쪽, 올바른) 이미지의 확대 보기입니다.

(이미지를 새 탭에서 열고 풀사이즈로 표시해야 차이를 알 수 있습니다.)

다양한 검색과 시도 끝에 외부 라이브러리를 사용하지 않고 방법을 찾을 수 있었습니다.먼저 Inkscape를 사용하여 준비할 SVG 파일을 연 후 다음 목록에 따라 절차를 수행해야 합니다.

• Inkscape에서 SVG 파일을 엽니다.
• Ctrl + A를 눌러 모든 항목을 선택합니다.
• [ Edit ]> [ Rize ]페이지로 이동하여 선택합니다.
• Ctrl + C;를 누릅니다.
• Ctrl + S를 누른 다음 Inkscape를 닫습니다.
• SVG로 합니다.<path> , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 를 볼 수 .하다

<path d="..." fill="..." id="path2"/>
<path d="..." fill="..." id="path4"/>
<path d="..." fill="..." id="path6"/>

• 에서 XAML을 .ViewBox 후 를 삽입합니다.Grid, 그 다음 요소, 요, 요, 음, 음, 음, 음, elementPathSVG:

<Viewbox Stretch="Fill">
    <Grid>
        <Path Fill="..." Data="..."/>
        <Path Fill="..." Data="..."/>
        <Path Fill="..." Data="..."/>
    </Grid>
</Viewbox>

Fill에는 XAML을 .fillSVG 파일의 속성 및DataXAML의 속성을 삽입해야 합니다.d속성을 지정합니다.

다음과 같은 결과가 나타납니다.

옵션 1: "SharpVectors" nuget 패키지를 사용하여 SVG 아이콘을 직접 사용

1. 프로젝트에 SharpVectors nuget 패키지를 추가합니다.
2. 예를 들어 "아이콘" 하위 폴더에 SVG 파일을 추가하고 SVG 파일을 설정합니다.Build Action의 재산.Resource
3. 코드로 사용:

<Window x:Class="WpfApp.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <Button Height="100">
                <svgc:SvgViewbox Source="/Icons/Checkmark_16x.svg"/>
            </Button>
            <ContentControl Height="100">
                <svgc:SvgViewbox Source="/Icons/CollapseAll_16x.svg"/>
            </ContentControl>
            <Label Height="100">
                <svgc:SvgViewbox Source="/Icons/Refresh_16x.svg"/>
            </Label>
        </StackPanel>
    </Grid>
</Window>

옵션 2: "SvgToXaml" 도구를 사용하여 SVG를 XAML로 변환

1. SvgToXaml.최신 릴리스를 다운로드합니다(이 답변은 "Ver_1.3.0"에서 테스트되었습니다).
2. 모든 SVG 아이콘을 폴더에 배치하고 다음 명령을 실행합니다.

SvgToXaml.exe BuildDict /inputdir "c:\Icons" /outputdir "c:\MyWpfApp" /outputname IconsDictionary

3. 생성된 추가IconsDictionary.xaml프로젝트에 파일을 첨부하여 코드로 사용합니다.

<Window x:Class="WpfApp.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="IconsDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Height="100">
                <Image Source="{StaticResource Refresh_16xDrawingImage}"/>
            </Button>
            <ContentControl Height="100">
                <Image Source="{StaticResource CollapseAll_16xDrawingImage}"/>
            </ContentControl>
            <Label Height="100">
                <Image Source="{StaticResource Checkmark_16xDrawingImage}"/>
            </Label>
        </StackPanel>
    </Grid>
</Window>

옵션 3: 이미 생성된 일부 XAML 파일에 IValue Converter 사용

XAML 파일이 이미 생성되어 있고 이를 사용하려면 일부 유형의 XAML 파일에 대해 커스텀을 생성할 수 있습니다.ValueConverter자세한 내용은 다음 답변을 참조하십시오.

• 옵션 2: .xaml 아이콘 파일을 직접 사용
• https://stackoverflow.com/a/21588195/7585517

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

SVG의 코드에서 패스의 코드를 직접 사용할 수 있습니다.

    <Path>
        <Path.Data>
            <PathGeometry Figures="M52.8,105l-1.9,4.1c ... 

또 다른 대안으로 dotnetprojects SVGImage를 들 수 있습니다.

이를 통해 xaml에서 .svg 파일을 직접 사용할 수 있습니다.

좋은 점은 한 개의 어셈블리만 약 10만 개라는 것입니다.더 큰 샤프벡터보다 더 많은 파일이 있습니다.

사용방법:

...
xmlns:svg1="clr-namespace:SVGImage.SVG;assembly=DotNetProjects.SVGImage"
...
<svg1:SVGImage Name="mySVGImage" Source="/MyDemoApp;component/Resources/MyImage.svg"/>
...

그게 다예요.

참조:

• https://www.nuget.org/packages/DotNetProjects.SVGImage/
• https://github.com/dotnetprojects/SVGImage

이 튜토리얼은 매우 도움이 되었습니다.https://msadowski.github.io/WPF-vector-graphics-tutorial/

1. github에서 프로그램의 zip 파일을 다운로드합니다.
2. 프로그램을 사용하여 SVG를 XAML로 변환합니다.
3. 프로젝트에서 선택한 폴더에 .xaml 파일을 복사/붙여넣습니다.
4. 파일용 응용 프로그램리소스를 App.xaml에 추가합니다.
5. Source="를 사용하여 xaml 페이지에서 벡터 이미지를 참조하십시오.{Static Resource}"

튜토리얼에서는 예를 들어 모든 단계를 잘 설명합니다.시도해보니 제 svg 이미지가 지금 앱에 잘 나오고 있어요.

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