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

Question

¿Puede alguien describir un procedimiento recomendado paso a paso para hacer esto?

EDITAR:

Paso1. Convierte SVG a XAML ... eso es fácil

Step2. ¿Ahora que?

Answer 1

Su técnica dependerá de qué objeto XAML produzca su convertidor SVG a XAML. ¿Produce un dibujo? ¿Una imagen? Una rejilla? Un lienzo? ¿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.

El uso de un dibujo como un icono

Para utilizar un dibujo, pintar un rectángulo approriately de tamaño con un DrawingBrush:

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

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

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

El uso de una imagen como un icono

Una imagen se puede utilizar directamente:

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

utilizando una cuadrícula como un icono

Una rejilla se puede utilizar directamente:

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

o se puede incluir en un Viewbox si es necesario para controlar el tamaño:

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

Uso de un lienzo como un icono

Esto es como usar una imagen o una rejilla, pero desde un lienzo no tiene tamaño fijo es necesario especificar la altura y la anchura (a menos que estos ya son fijados por el convertidor de SVG):

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

utilizando una ruta como un icono

usted puede utilizar una ruta, pero hay que establecer el trazo o el relleno de forma explícita:

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

o

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

El uso de una geometría como un icono

Puede utilizar una ruta de señalar a su geometría.Si debe ser trazada, definir la barra:

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

o si debe ser llenado, establezca el Relleno:

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

cómo enlazar los datos

Si estás haciendo la conversión SVG -> XAML en el código y desea que el XAML resultante aparezca usando el enlace de datos, utilice una de las siguientes opciones:

Enlazando un dibujo:

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

La unión de una imagen:

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

Encuadernación una cuadrícula:

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

Encuadernación una cuadrícula en un Viewbox:

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

Encuadernación una lona:

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

Encuadernación un camino:

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

Encuadernación una geometría:

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

Answer 2

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

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

Answer 3

he encontrado mejor manera de que yo use el icono SVG en WPF. Yo uso sharpvector marco:

Install-Package SharpVectors 

Así que mi XAML se parece a lo siguiente:

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

Answer 4

Windows 10 Creadores Update (15063) soporta de forma nativa imágenes SVG, aunque con algunas trampas.

El uso es tan simple como configurar el Source para un <Image /> en la ruta al SVG. Esto es equivalente a usar SvgImageSource, de la siguiente manera:

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

Sin embargo, las imágenes SVG cargadas de esta manera (a través de XAML) may load jagged/aliased. Una solución alternativa es especificar un valor RasterizePixelHeight o RasterizePixelWidth que es doble y su actual altura/anchura:

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

Esto se puede solucionar de forma dinámica mediante la creación de un nuevo SvgImageSource en caso ImageOpened la imagen de base para:

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 alias puede ser difícil de ver en pantallas sin alta resolución, pero aquí hay un intento de ilustrarlo.

Este es el resultado del código anterior: un Image que utiliza la inicial SvgImageSource, y una segunda Image debajo de ella que utiliza el SvgImageSource creado en el caso de ImageOpened:

Este es un volado de vista de la imagen superior:

Considerando que la presente es una vista ampliada de la Bott om (antialiased, correcta) Imagen:

(que necesita para abrir las imágenes en una nueva pestaña y maximizar la foto para apreciar la diferencia)