You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

在Visual Studio 2017的WPF项目中插入SVG等矢量图的方法

嘿,在VS2017的WPF项目里插入SVG矢量图,我给你梳理几个实用的方案,亲测好使:

方案1:将SVG转成XAML资源(原生支持)

WPF本身不直接解析SVG,但可以把SVG转换成XAML格式的DrawingPath,这样就能直接用WPF原生控件渲染了:

  • 找个靠谱的SVG转XAML工具,把你的SVG文件转换成XAML格式的绘图资源。
  • 在项目里新建一个ResourceDictionary(比如命名为SvgResources.xaml),把转换后的XAML代码粘贴进去,记得给每个资源设置唯一的x:Key,示例代码:
<DrawingImage x:Key="SettingsIcon">
    <DrawingImage.Drawing>
        <GeometryDrawing Brush="#FF333333" Geometry="M12,12 L24,24 ..." />
    </DrawingImage.Drawing>
</DrawingImage>
  • 在需要展示图标的地方,用Image控件引用这个资源就行:
<Image Source="{StaticResource SettingsIcon}" Width="40" Height="40" />
方案2:用第三方库直接加载(推荐)

如果不想手动转换,用SharpVectors这个第三方库就能直接加载SVG文件,步骤很简单:

  • 打开VS2017的NuGet包管理器,搜索并安装SharpVectors库。
  • 在要使用SVG的XAML页面里添加命名空间:
xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
  • 然后用SvgViewbox控件直接加载SVG文件,示例:
<svgc:SvgViewbox Source="/Assets/Logo.svg" Width="100" Height="100" />

这里的路径要对应你项目里SVG文件的实际位置,如果是放在Assets文件夹下,这样写就没问题。

方案3:代码动态加载SVG(适合动态场景)

如果需要在代码里动态加载SVG,可以把SVG设为嵌入资源,再通过SharpVectors读取:

  • 把SVG文件添加到项目后,在属性面板里设置其生成操作为“嵌入的资源”。
  • 编写加载方法:
using SharpVectors.Converters;
using SharpVectors.Renderers.Wpf;
using System.Windows.Media;

public ImageSource LoadSvgResource(string resourcePath)
{
    var svgReader = new SvgReader();
    return svgReader.Read(new Uri(resourcePath, UriKind.Relative)) as DrawingImage;
}
  • 然后在代码里给Image控件赋值:
myImageControl.Source = LoadSvgResource("YourProjectName.Assets.Icon.svg");

注意资源路径的格式是“项目名称.文件夹路径.文件名.svg”,比如你的项目叫WpfApp1,SVG放在Assets文件夹下,路径就是WpfApp1.Assets.Icon.svg

内容的提问来源于stack exchange,提问作者Djidjeli Wail

火山引擎 最新活动