有人可以描述推荐的逐步操作步骤吗?
编辑:
第1步。将SVG转换为XAML ...就这么简单
第2步。怎么办?
Answers:
您的技术将取决于SVG到XAML转换器生成的XAML对象。它会产生图纸吗?一个图像?网格?画布?一条路径?几何?在每种情况下,您的技术都会有所不同。
在下面的示例中,我将假定您在按钮上使用图标,这是最常见的情况,但是请注意,对于任何ContentControl,相同的技术都适用。
使用工程图作为图标
若要使用绘图,请使用DrawingBrush绘制适当大小的矩形:
<Button>
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<Drawing ... /> <!-- Converted from SVG -->
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Button>
使用图像作为图标
图像可以直接使用:
<Button>
<Image ... /> <!-- Converted from SVG -->
</Button>
使用网格作为图标
网格可以直接使用:
<Button>
<Grid ... /> <!-- Converted from SVG -->
</Button>
或者,如果需要控制大小,则可以将其包含在“视图”框中:
<Button>
<Viewbox ...>
<Grid ... /> <!-- Converted from SVG -->
</Viewbox>
</Button>
使用画布作为图标
这就像使用图像或网格一样,但是由于画布没有固定的大小,因此您需要指定高度和宽度(除非SVG转换器已经设置了高度和宽度):
<Button>
<Canvas Height="100" Width="100"> <!-- Converted from SVG, with additions -->
</Canvas>
</Button>
使用路径作为图标
您可以使用路径,但是必须设置笔触或显式填充:
<Button>
<Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>
要么
<Button>
<Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>
使用几何作为图标
您可以使用路径绘制几何图形。如果应该对其进行笔划,请设置笔划:
<Button>
<Path Stroke="Red" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
或者如果应该填充,请设置填充:
<Button>
<Path Fill="Blue" Width="100" Height="100">
<Path.Data>
<Geometry ... /> <!-- Converted from SVG -->
</Path.Data>
</Path>
</Button>
如何进行数据绑定
如果要在代码中执行SVG-> XAML转换,并希望使用数据绑定显示结果XAML,请使用以下方法之一:
绑定工程图:
<Button>
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
</Rectangle.Fill>
</Rectangle>
</Button>
绑定图像:
<Button Content="{Binding Image}" />
绑定网格:
<Button Content="{Binding Grid}" />
在视图框中绑定网格:
<Button>
<Viewbox ...>
<ContentPresenter Content="{Binding Grid}" />
</Viewbox>
</Button>
绑定画布:
<Button>
<ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>
绑定路径:
<Button Content="{Binding Path}" /> <!-- Fill or stroke must be set in code unless set by the SVG converter -->
绑定几何:
<Button>
<Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>
<ResourceDictionary><DataTemplate x:Key="MyIconTemplate"><Canvas ... /></DataTemplate></ResourceDictionary>
... <Button><ContentPresenter ContentTemplate="{StaticResource MyIconTemplate}" /></Button>
。
<ResourceDictionary><VisualBrush x:Key="MyBrush"><VisualBrush.Visual><Canvas x:Key="MyCanvas" ... /></VisualBrush.Visual></VisualBrush></ResourceDictionary>
...绘制 <Button><Rectangle Fill="{StaticResource MyBrush}" Width="..." Height="..." /></Button>
。这比较难,因为您还必须确保已测量/布置了画布,并且必须对宽度/高度进行硬编码(或为矩形使用模板)。
Canvas
对象,我应将SVG放在哪里?这很重要,因为我的SVG都在静态资源中,因此我需要将它们嵌入...
Install-Package SharpVectors
<UserControl xmlns:svgc="http://sharpvectors.codeplex.com/svgc">
<svgc:SvgViewbox Source="/Icons/icon.svg"/>
</UserControl>
Windows 10内部版本15063“创建者更新”本机支持针对Windows 10的UWP / UAP应用程序的SVG图像(尽管有些陷阱)。
如果您的应用程序是WPF应用程序,而不是UWP / UAP,则仍然可以使用此API(在经历了很多麻烦之后):Windows 10 build 17763“ October 2018 Update”引入了XAML孤岛的概念(作为“预览”技术,但我相信应用商店中允许;在所有情况下,Windows 10 build 18362“ May 2019 Update” XAML岛不再是预览功能,完全受支持),您可以在WPF中使用UWP API和控件应用程序。
您需要首先添加对WinRT API的引用,并使用与用户数据或系统进行交互的某些Windows 10 API(例如,从Windows 10 UWP Webview中的磁盘加载映像,或使用Toast通知API来显示Toast),您还需要将WPF应用程序与程序包身份相关联,如此处所示(在Visual Studio 2019中非常容易)。Windows.UI.Xaml.Media.Imaging.SvgImageSource
但是,使用该类不是必需的。
用法(如果您使用的是UWP,或者已按照上述说明进行操作,并在WPF下添加了XAML岛支持),则Source
只需<Image />
将设置为到SVG的路径即可。这等效于使用SvgImageSource
,如下所示:
<Image>
<Image.Source>
<SvgImageSource UriSource="Assets/svg/icon.svg" />
</Image.Source>
</Image>
但是,以这种方式(通过XAML)加载的SVG图像可能会加载锯齿/锯齿。一种解决方法是指定一个RasterizePixelHeight
或RasterizePixelWidth
值为实际高度/宽度的两倍以上的值:
<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->
可以通过在基本映像SvgImageSource
的ImageOpened
事件中创建一个新值来动态地解决此问题:
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;
在非高dpi的屏幕上,混叠可能很难看到,但是这里尝试说明这一点。
这是上面代码的结果:一个Image
使用initial SvgImageSource
,Image
下面一个使用在ImageOpened
事件中创建的SvgImageSource :
这是顶部图像的放大视图:
而这是底部(抗锯齿,正确)图像的放大视图:
(您需要在新标签页中打开图像并以完整尺寸查看,以欣赏它们之间的区别)
使用SvgImage或SvgImageConverter扩展,SvgImageConverter支持绑定。请参阅以下链接,以获取展示这两个扩展的示例。
https://github.com/ElinamLLC/SharpVectors/tree/master/TutorialSamples/ControlSamplesWpf
另一种选择是dotnetprojects SVGImage
这允许直接在xaml中本地使用.svg文件。
好的部分是,它只有一个组件,大约需要100k。与sharpvectors相比,sharpvectors的文件要大得多。
用法:
...
xmlns:svg1="clr-namespace:SVGImage.SVG;assembly=DotNetProjects.SVGImage"
...
<svg1:SVGImage Name="mySVGImage" Source="/MyDemoApp;component/Resources/MyImage.svg"/>
...
就这样。
看到:
我们可以直接使用SVG代码中的路径代码:
<Path>
<Path.Data>
<PathGeometry Figures="M52.8,105l-1.9,4.1c ...