UWP项目中加载svg矢量图

最新推荐文章于 2025-02-11 13:55:12 发布

原创最新推荐文章于 2025-02-11 13:55:12 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#矢量图 #svg #UWP

UWP 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了解决UWP应用中按钮图片显示不清晰的问题，通过使用Mntone.SvgForXaml库加载矢量图来提高图片质量，并提供了具体的实现步骤和注意事项。

最近在项目中显示按钮图片时，总是感觉图片显示不清晰，所以打算加载矢量图显示按钮图片。UWP本身是不支持矢量图的加载的，需要转换为path图自绘。目前主要有两种实现该效果。第一种方法是获取矢量图中的点的位置，然后在程序中直接使用path绘图。第二种方法是调用库的方法去实现矢量图加载。显而易见，第二种方法更容易一些。

在网上找到一个开源的矢量图加载库Mntone.SvgForXaml，使用方法也很简单。在NuGet中添加Mntone.SvgForXaml和Win2d.uwp两个库。

在xmal文件中添加命名空间

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    <svg:SvgImage x:Name="SvgControl"/>
</Grid>

在对应的cs中写入要加载的图片名称。

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/magnifier28.svg"));

    await this.SvgControl.LoadFileAsync(file);
}

在此有一点需要注意，由于矢量图都是加载到内存中，所以使用完后需要卸载，否则会一直消耗内存资源

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
     this.SvgControl.SafeUnload();
}

程序运行后效果如下
这里写图片描述