tutorial - wpf vs winforms
WPF ¿Cuál es la forma correcta de usar archivos SVG como iconos en WPF? (4)
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:
<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>
¿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?
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 <Image /> a la ruta al SVG. Eso 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) pueden cargar irregular / alias . Una solución consiste en especificar un valor RasterizePixelHeight o RasterizePixelWidth que sea el doble de su altura / ancho real:
<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->
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 intento 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 :
Esta es una vista ampliada de la imagen superior:
Mientras que esta es una vista ampliada de la imagen inferior (antialiased, correcta):
(deberá abrir las imágenes en una nueva pestaña y verlas a tamaño completo para apreciar la diferencia)
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>
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.
Usando un dibujo como un icono
Para usar un Dibujo, pinta un rectángulo de tamaño apropiado 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>
Usando una imagen como un ícono
Una imagen se puede usar directamente:
<Button>
<Image ... /> <!-- Converted from SVG -->
</Button>
Usando una grilla como un icono
Una grilla se puede usar directamente:
<Button>
<Grid ... /> <!-- Converted from SVG -->
</Button>
O puede incluirlo en una Viewbox si necesita controlar el tamaño:
<Button>
<Viewbox ...>
<Grid ... /> <!-- Converted from SVG -->
</Viewbox>
</Button>
Usando un lienzo como un icono
Esto es como usar una imagen o cuadrícula, pero como un lienzo no tiene un tamaño fijo, debe especificar el alto y el ancho (a menos que el convertidor SVG ya los haya configurado):
<Button>
<Canvas Height="100" Width="100"> <!-- Converted from SVG, with additions -->
</Canvas>
</Button>
Usando una ruta como un icono
Puede utilizar una ruta de acceso, pero debe establecer el trazo o el llenado 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>
Usando una Geometría como un ícono
Puedes usar una ruta para dibujar tu geometría. Si debe ser acariciado, configure el trazo:
<Button>
<Path Stroke="Red" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
o si debe llenarse, configure el Relleno:
<Button>
<Path Fill="Blue" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
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:
<Button>
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
</Rectangle.Fill>
</Rectangle>
</Button>
Encuadernación de una imagen:
<Button Content="{Binding Image}" />
Encuadernación de una rejilla:
<Button Content="{Binding Grid}" />
Enlazando una Grilla en una Viewbox:
<Button>
<Viewbox ...>
<ContentPresenter Content="{Binding Grid}" />
</Viewbox>
</Button>
Encuadernación de un lienzo:
<Button>
<ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>
Enlazando un camino:
<Button Content="{Binding Path}" /> <!-- Fill or stroke must be set in code unless set by the SVG converter -->
Encuadernación de una geometría:
<Button>
<Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>