WPF Quelle est la bonne façon d'utiliser des fichiers SVG comme icônes dans WPF ?

Question

Quelqu'un peut-il décrire une procédure étape par étape recommandée pour ce faire ?

Étape 1. Convertissez SVG en XAML... c'est facile.

Étape 2. Et maintenant ?

Answer 1

Option 1 : Utiliser les icônes SVG directement à l'aide du paquet nuget "SharpVectors".

1. Ajouter SharpVectors nuget à votre projet.
2. Ajoutez des fichiers SVG à votre projet, par exemple, dans un sous-dossier "Icônes" et définissez leur Build Action à la propriété Resource

3. Utilisez-le dans votre code :

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

Option 2 : Convertir SVG en XAML en utilisant l'outil "SvgToXaml".

1. SvgToXaml . Télécharger le dernière version (cette réponse a été testée avec la "Ver_1.3.0")

2. Placez toutes vos icônes SVG dans un dossier et exécutez la commande suivante :

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

3. Ajouter généré IconsDictionary.xaml à votre projet et l'utiliser dans votre code :

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

Option 3 : Utiliser IValueConverter pour certains fichiers XAML déjà générés

Si vous disposez déjà de fichiers XAML générés et que vous souhaitez les utiliser, il est possible, pour certains types d'entre eux, de créer un fichier de type ValueConverter classe. Veuillez vous référer aux réponses suivantes pour plus d'informations :

• Option 2 : Utiliser directement les fichiers d'icône .xaml
• https://stackoverflow.com/a/21588195/7585517

Answer 2

Utilisez les extensions SvgImage ou SvgImageConverter, le SvgImageConverter prend en charge la liaison. Voir le lien suivant pour des exemples démontrant les deux extensions.

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

Answer 3

Nous pouvons utiliser directement le code du chemin à partir du code du SVG :

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

Answer 4

Une autre alternative est dotnetprojects SVGImage

Cela permet l'utilisation native de fichiers .svg directement dans xaml.

Ce qui est bien, c'est qu'il ne s'agit que d'un seul assemblage qui coûte environ 100k. En comparaison avec sharpvectors qui est beaucoup plus gros et contient plusieurs fichiers.

Utilisation :

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

C'est tout.

Voir :

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