WPF原生并不支持svg矢量图。但是WPF原生的画形状工具的使用方式与SVG非常相似。
以该图片为例:
这个图片的形状是这样的:
在这段svg代码里面,主体的就是那一段特别长的path标签,它包含的4段“M”开头的数据分别定义了这四个方块。
而在WPF中,有着用法完全相同的path标签。所以用法也很简单,只要在WPF中创建一段
但是,这种方法有一个问题:
这段svg代码的对应图形如下:
可以很明显的发现,这段代码和上一个相比,增加了Line、rect两类元素,分别对应的是分隔的横线和内部的两点两横。他们的数据方式也与path截然不同,难以直接转化。
不过,所幸市面上有很多成熟的矢量图转化(和编辑)软件。例如开源的inkscape。用inkscape打开该svg文件,然后保存为xaml格式,我们就得到了以下代码:
毫无疑问,xaml文件作为WPF本身的主体文件当然是完美符合语法的。
接下来,只要在WPF中创建一个用户控件,然后用这里的整块代替原本的,就获得了一个矢量的用户控件,可以被别的模块调用。
——但是注意,似乎是因为svg和xaml的格式不同,第一是xaml里面对小数点后的数据支持很差,虽然支持小数点后一位,但是实际调整时很可能根本没有变化,或者变化方式不仅离散而且变化临界点很奇怪。 但是在设计器里没法正确显示这个规模的变化(实际运行后是正常修改了的)。
第二是个别元素的位置会发生奇怪的偏移(可能是因为小数点)。
因此,需要看着设计界面对元素稍作修正。当然如果从一开始制作的svg就不包含小数点就再好不过了。