WPF ¿Cuál es la forma correcta de usar archivos SVG como icons en WPF?

¿Alguien puede describir un procedimiento recomendado paso a paso para hacer esto?

EDITAR:

Paso 1. Convierte SVG a XAML … eso es fácil

Paso 2. ¿Ahora que?

Su técnica dependerá de qué objeto XAML produzca su convertidor SVG a XAML. ¿Produce un dibujo? ¿Una imagen? Una rejilla? Un canvas? ¿Un camino? Una geometría? En cada caso, tu técnica será diferente.

En los ejemplos a continuación, supondré que está utilizando su icono en un botón, que es el escenario más común, pero tenga en cuenta que las mismas técnicas funcionarán para cualquier ContentControl.

Usando un dibujo como un icono

Para usar un Dibujo, pinta un rectángulo de tamaño apropiado con un DrawingBrush:

 

Usando una imagen como un ícono

Una imagen se puede usar directamente:

  

Usando una grilla como un icono

Una grilla se puede usar directamente:

  

O puede incluirlo en una Viewbox si necesita controlar el tamaño:

  

Usando un canvas como un icono

Esto es como usar una imagen o cuadrícula, pero como un canvas no tiene un tamaño fijo, debe especificar el alto y el ancho (a menos que el convertidor SVG ya los haya configurado):

  

Usando una ruta como un icono

Puede utilizar una ruta de acceso, pero debe establecer el trazo o el llenado de forma explícita:

  

o

  

Usando una Geometría como un ícono

Puedes usar una ruta para dibujar tu geometría. Si debe ser acariciado, configure el trazo:

  

o si debe llenarse, configure el Relleno:

  

Cómo enlazar datos

Si está haciendo la conversión SVG -> XAML en el código y desea que el XAML resultante aparezca usando el enlace de datos, use uno de los siguientes:

Encuadernación de un dibujo:

  

Encuadernación de una imagen:

  

Encuadernación de una rejilla:

  

Enlazando una Grilla en una Viewbox:

  

Encuadernación de un canvas:

  

Enlazando un camino:

   

Encuadernación de una geometría:

  

Encontré la mejor manera de usar el ícono svg en WPF. Yo uso el framework sharpvector :

 Install-Package SharpVectors 

Entonces mi XAML se ve como sigue:

  ...  ...  

Puede usar el xaml resultante del SVG como un pincel de dibujo en un rectángulo. Algo como esto:

   --- insert the converted xaml's geometry here ---   

La actualización de Windows 10 Creators (15063) admite nativamente imágenes SVG, aunque con algunos errores.

El uso es tan simple como configurar la Source de una a la ruta al SVG. Eso es equivalente a usar SvgImageSource , de la siguiente manera:

      

Sin embargo, las imágenes SVG cargadas de esta manera (a través de XAML) pueden cargar irregular / alias . Una solución consiste en especificar un valor RasterizePixelHeight o RasterizePixelWidth que sea el doble de su altura / ancho real:

   

Esto se puede SvgImageSource dinámicamente creando un nuevo SvgImageSource en el evento ImageOpened para la imagen 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; 

El aliasing puede ser difícil de ver en pantallas sin alta resolución de dpi, pero aquí hay un bash de ilustrarlo.

Este es el resultado del código anterior: una Image que usa el SvgImageSource inicial, y una segunda Image debajo de él que usa el SvgImageSource creado en el evento ImageOpened :

enter image description here

Esta es una vista ampliada de la imagen superior:

enter image description here

Mientras que esta es una vista ampliada de la imagen inferior (antialiased, correcta):

enter image description here

(deberá abrir las imágenes en una nueva pestaña y verlas a tamaño completo para apreciar la diferencia)