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

Votre technique dépendra de l'objet XAML produit par votre convertisseur SVG vers XAML. Est-ce qu'il produit un dessin ? Une image ? Une grille ? Un Canvas ? Un chemin ? Une géométrie ? Dans chaque cas, votre technique sera différente.

Dans les exemples ci-dessous, je suppose que vous utilisez votre icône sur un bouton, ce qui est le scénario le plus courant, mais notez que les mêmes techniques fonctionnent pour n'importe quel ContentControl.

Utiliser un dessin comme icône

Pour utiliser un dessin, peignez un rectangle de taille appropriée avec un DrawingBrush :

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

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

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

Utilisation d'une image comme icône

Une image peut être utilisée directement :

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

Utiliser une grille comme icône

Une grille peut être utilisée directement :

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

Vous pouvez également l'inclure dans un Viewbox si vous devez en contrôler la taille :

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

Utilisation d'un canevas comme icône

C'est comme utiliser une image ou une grille, mais comme un canevas n'a pas de taille fixe, vous devez spécifier la hauteur et la largeur (sauf si celles-ci sont déjà définies par le convertisseur SVG) :

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

Utilisation d'un chemin comme icône

Vous pouvez utiliser un chemin, mais vous devez définir explicitement le trait ou le remplissage :

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

ou

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

Utiliser une géométrie comme icône

Vous pouvez utiliser un chemin pour dessiner votre géométrie. S'il faut lui donner un trait, définissez le paramètre Stroke :

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

ou si elle doit être remplie, définissez la valeur Fill :

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

Comment lier les données

Si vous effectuez la conversion SVG -> XAML en code et que vous souhaitez que le XAML résultant apparaisse en utilisant la liaison de données, utilisez l'un des éléments suivants :

Relier un dessin :

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

Relier une image :

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

Lier une grille :

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

Lier une grille dans un Viewbox :

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

Relier une toile :

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

Lier un chemin :

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

Lier une géométrie :

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

Answer 2

Installer le SharpVectors bibliothèque

Install-Package SharpVectors

Ajoutez les éléments suivants dans XAML

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

Answer 3

La version 15063 de Windows 10 "Creators Update" prend en charge de manière native les images SVG (mais avec quelques problèmes) pour les applications UWP/UAP ciblant Windows 10.

Si votre application est une application WPF plutôt qu'une UWP/UAP, vous pouvez toujours utiliser cette API (après avoir franchi un certain nombre d'obstacles) : Windows 10 build 17763 " October 2018 Update " a introduit le concept d'îlots XAML (en tant que technologie " preview " mais je crois autorisé dans l'app store ; dans tous les cas, avec Windows 10 build 18362 " May 2019 Update " les îlots XAML ne sont plus une fonctionnalité preview et sont entièrement pris en charge) vous permettant d'utiliser les API et contrôles UWP dans vos applications WPF.

Vous devez d'abord ajouter les références aux API de WinRT et pour utiliser certaines API Windows 10 qui interagissent avec les données de l'utilisateur ou le système (par exemple, le chargement d'images à partir d'un disque dans une vue web Windows 10 UWP ou l'utilisation de l'API de notification des toasts pour afficher les toasts), vous devez également associer votre application WPF à une identité de paquet, comme indiqué ici (immensément plus facile dans Visual Studio 2019). Il ne devrait pas être nécessaire d'utiliser le Windows.UI.Xaml.Media.Imaging.SvgImageSource de la classe, cependant.

L'utilisation (si vous êtes sous UWP ou si vous avez suivi les instructions ci-dessus et ajouté la prise en charge de l'îlot XAML sous WPF) est aussi simple que de définir l'élément Source pour un <Image /> au chemin d'accès au SVG. Cela équivaut à utiliser SvgImageSource comme suit :

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

Cependant, les images SVG chargées de cette manière (via XAML) peut être chargé de manière irrégulière/aliasée . Une solution de contournement consiste à spécifier un RasterizePixelHeight o RasterizePixelWidth qui est le double de votre hauteur/largeur réelle :

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

Il est possible de contourner ce problème de manière dynamique en créant un nouveau fichier de type SvgImageSource dans le ImageOpened pour l'image de base :

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;

Le crénelage peut être difficile à voir sur des écrans qui ne sont pas à haute résolution, mais voici une tentative d'illustration.

Voici le résultat du code ci-dessus : un fichier Image qui utilise l'initiale SvgImageSource et un deuxième Image en dessous qui utilise la SvgImageSource créée dans la section ImageOpened événement :

C'est une vue agrandie de l'image du haut :

Alors que ceci est une vue agrandie de l'image du bas (anticrénelée, correcte) :

(vous devrez ouvrir les images dans un nouvel onglet et les visualiser en taille réelle pour apprécier la différence)

Answer 4

Après diverses recherches et tentatives, j'ai réussi à trouver la méthode sans devoir utiliser des bibliothèques externes. Tout d'abord, vous devez utiliser Inkscape pour ouvrir le fichier SVG à préparer, puis suivez la procédure selon la liste suivante :

• Ouvrez le fichier SVG avec Inkscape ;

• Appuyez sur Ctrl + A pour tout sélectionner ;

• Allez dans Édition > Redimensionner la page à la sélection ;

• Appuyez sur Ctrl + C ;

• Appuyez sur Ctrl + S puis fermez Inkscape ;

• Ouvrez le fichier SVG dans un éditeur de fichiers puis allez à <path> vous pouvez visualiser plusieurs chemins. Voici un exemple :

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

• Dans votre fichier XAML, vous devez créer un fichier ViewBox puis insérer un élément Grid et ensuite Path pour le nombre de fois où les chemins sont vus dans le fichier SVG :

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

Où dans Fill dans votre XAML, vous devez insérer la propriété fill dans le fichier SVG et dans Data dans votre XAML, vous devez insérer la propriété d dans le fichier SVG.

Vous devriez obtenir un résultat comme celui-ci :

Answer 5

Vous pouvez utiliser le xaml résultant du SVG comme une brosse de dessin sur un rectangle. Quelque chose comme ceci :

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