svg矢量图标在wpf中的使用

这篇具有很好参考价值的文章主要介绍了svg矢量图标在wpf中的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在wpf应用程序开发中,为支持图标的矢量缩放,及在不同分辨率下界面中图标元素的矢量无损缩放,所以常常用到svg图标,那么如果完
美的将svg图标运用到wpf日常的项目开发中呢,这里分享一下我的个人使用经验和详细步骤。

1、SvgToXaml 工具

我经常使用一款开源的svg转xaml的工具,名字就叫做SvgToXaml,非常简单,可以直接把svg矢量图转换为wpf常规的xaml界面脚本,该工具开源,github的地址是 https://github.com/BerndK/SvgToXaml.git
使用方法也很简单,和日常的文件管理器使用方法一样,选中要转换的svg图标后直接就能转成xaml

svg矢量图标在wpf中的使用,.NET,wpf,SVG,矢量图标,xaml
有了xmal后就可以自由发挥了

2、集成到资源字典

接下来我们可以把转换得到了xaml 集成到资源字典中,新建一个IconDictionary.xaml,将xmal拷贝到资源字典中

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <DrawingImage x:Key="svg_Open">
        <DrawingImage.Drawing>
            <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                <GeometryDrawing Brush="#FFF5A623" Geometry="F1 M1024,1024z M0,0z M160.4,908.8C137.7,908.8,119.3,890.8,118.7,868.4L200.5,411.2 200.5,410C200.5,387.1,219.2,368.5,242.3,368.5L916.8,368.5C939.4,368.5,957.9,386.5,958.6,408.9L876.8,866.1 876.8,867.3C876.8,890.2,858.1,908.8,835,908.8L160.4,908.8z" />
                <GeometryDrawing Brush="#FFF5A623" Geometry="F1 M1024,1024z M0,0z M200.6,313.4L855.1,313.4 855.1,248.6C855.1,219.2,833,195.4,805.7,195.4L435.3,195.4 361.2,115.6 114.2,115.6C86.9,115.6,64.8,139.4,64.8,168.8L64.8,807.1 145.6,366.7C145.7,337.3,170.4,313.4,200.6,313.4" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>

    <DrawingImage x:Key="svg_Find">
        <DrawingImage.Drawing>
            <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                <GeometryDrawing Brush="#FFEA5514" Geometry="F1 M1024,1024z M0,0z M950.72,809.28L792.32,650.88C791.36,649.92,790.08,649.6,788.8,648.64A224.032,224.032,0,0,0,834.56,513.28C834.56,389.12 733.44,288 609.28,288 485.12,288 384,389.12 384,513.28 384,637.44 485.12,738.56 609.28,738.56 660.16,738.56 706.88,721.28 744.64,692.8 745.6,693.76 745.92,695.36 746.88,696.32L905.28,854.72C911.68,860.8 919.68,864 928,864 936.32,864 944.32,860.8 950.72,854.72 963.2,842.24 963.2,821.76 950.72,809.28z M416,513.28C416,406.72 502.72,320 609.28,320 715.84,320 802.56,406.72 802.56,513.28 802.56,619.84 715.84,706.56 609.28,706.56 502.72,706.56 416,619.84 416,513.28z" />
                <GeometryDrawing Brush="#FF06071E" Geometry="F1 M1024,1024z M0,0z M80,96L752,96C760.96,96 768,88.96 768,80 768,71.04 760.96,64 752,64L80,64C71.04,64 64,71.04 64,80 64,88.96 71.04,96 80,96z M752,208L80,208C71.04,208 64,215.04 64,224 64,232.96 71.04,240 80,240L752,240C760.96,240 768,232.96 768,224 768,215.04 760.96,208 752,208z M80,384L336,384C344.96,384 352,376.96 352,368 352,359.04 344.96,352 336,352L80,352C71.04,352 64,359.04 64,368 64,376.96 71.04,384 80,384z M80,528L304,528C312.96,528 320,520.96 320,512 320,503.04 312.96,496 304,496L80,496C71.04,496 64,503.04 64,512 64,520.96 71.04,528 80,528z M80,672L336,672C344.96,672 352,664.96 352,656 352,647.04 344.96,640 336,640L80,640C71.04,640 64,647.04 64,656 64,664.96 71.04,672 80,672z M752,784L80,784C71.04,784 64,791.04 64,800 64,808.96 71.04,816 80,816L752,816C760.96,816 768,808.96 768,800 768,791.04 760.96,784 752,784z M752,928L80,928C71.04,928 64,935.04 64,944 64,952.96 71.04,960 80,960L752,960C760.96,960 768,952.96 768,944 768,935.04 760.96,928 752,928z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>
    
</ResourceDictionary>

然后再App.xaml中配置图标的资源字典

<Application x:Class="IconTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--引入资源库-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="IconDictionary.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3、集成到控件中

之后就可以在界面中使用了,例如在按钮中加入矢量图标

        <Button>
            <Button.ToolTip>
                <TextBlock Text="Open" FontSize="14" FontWeight="Bold" />
            </Button.ToolTip>
            <Image Source="{StaticResource svg_Open}" Margin="2,2,0,2" Height="20"></Image>
        </Button>

svg矢量图标在wpf中的使用,.NET,wpf,SVG,矢量图标,xaml

我们可以看到,无论分辨率,和屏幕缩放级别怎么放大和缩小,图标依然是高清的,这就是矢量的魅力。文章来源地址https://www.toymoban.com/news/detail-810730.html

到了这里,关于svg矢量图标在wpf中的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Vue3中使用svg图标

    因为项目很多模块需要使用图标,因此把它封装为全局组件!!! 在src/components目录下创建一个SvgIcon组件:代表如下 在src文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!! 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

    2024年02月05日
    浏览(7)
  • 【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

    使用vite-plugin-svg-icons插件显示本地svg图标 1.安装vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在项目根目录查找vite.config.js,进行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致 项目中使用示例: //menu.icon是路径里面

    2024年02月12日
    浏览(20)
  • 【WPF.NET开发】WPF中的XAML资源

    使用 XAML 中的资源 静态和动态资源 静态资源 动态资源 样式、DataTemplate 和隐式键 资源是可以在应用中的不同位置重复使用的对象。 资源的示例包括画笔和样式。 本概述介绍如何使用 Extensible Application Markup Language (XAML) 中的资源。 你还可以使用代码创建和访问资源。  备注

    2024年01月17日
    浏览(9)
  • 初学前端-记使用阿里图库SVG图标不显示的解决方法

    初学前端-记使用阿里图库SVG图标不显示的解决方法

    使用VUE3+Element-Plus做来制作前端界面,做到左侧菜单栏时遇到了一个困难,添加的SVG图标始终不显示,位置存在,图标的信息也没有问题,但是就是一直显示不出来。  后经多方搜索, 经vue前端项目引入iconfont阿里图标的四种方式_飞歌Fly的博客-CSDN博客的提示在Main.js中导入了

    2024年01月25日
    浏览(7)
  • SVG图标,SVG symbols,SVG use标签

    项目中图标的使用,趋势是使用svg作图标的,优点如下 兼容现有图片能力前提还支持矢量 可读性好,有利于SEO与无障碍 在性能和维护性方面也比iconfont要强很多 怎么在项目中优雅的使用svg图标,下面我们将采用类似雪碧图的做法 1、普通的使用 普通的使用遇到以下的问题:

    2024年02月15日
    浏览(10)
  • html5学习笔记15-内联SVG 可缩放矢量图形

    https://www.runoob.com/html/html5-svg.html SVG 图形的容器。SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万

    2024年02月11日
    浏览(8)
  • vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标

    vue3+vite+ts 通过svg-sprite-loader 插件使用自定义图标

    第一步 首先下载svg插件和fs模块; 后续需要用到 第二步新建文件夹和文件 将下载好的svg文件放入新建好的svg文件夹中 index.vue 代码 这里是创建一个 svg-icon / 组件 index.ts 代码 第三步 打开main.ts 将创建好的 svg-icon / 组件注入到全局组件 第四步 在根目录打开vite.config.ts ** 如果引

    2024年02月15日
    浏览(6)
  • css 实现svg动态图标效果

    css 实现svg动态图标效果

    效果演示:  实现思路:主要是通过css的stroke相关属性来设置实现的。

    2024年02月12日
    浏览(4)
  • 在WPF应用中,结合阿里矢量图标库使用Geometry图标

    在WPF应用中,结合阿里矢量图标库使用Geometry图标

    在我们的SqlSugar开发框架的WPF应端中,有时候我们需要在按钮或者其他界面元素上使用一些图标,框架中我们可以使用 lepoco/wpfui 项目的图标库,也可以使用Font-Awesome-WPF 图标库,另外我们如果喜欢阿里矢量图标库的,也可以通过使用Geometry图标来实现图标的展示,本篇随笔介

    2024年01月25日
    浏览(8)
  • AI绘图实战(十):制作线稿矢量图之包头巾的女人,画矢量图/生成矢量图/导出矢量图/直出svg/vector studio插件使用 | Stable Diffusion成为设计师生产力工具

    AI绘图实战(十):制作线稿矢量图之包头巾的女人,画矢量图/生成矢量图/导出矢量图/直出svg/vector studio插件使用 | Stable Diffusion成为设计师生产力工具

    S:AI能取代设计师么? I :至少在设计行业,目前AI扮演的主要角色还是超级工具,要顶替?除非甲方对设计效果无所畏惧~~ 预先学习 : 安装及其问题解决参考:《Windows安装Stable Diffusion WebUI及问题解决记录》; 运行使用时问题《Windows使用Stable Diffusion时遇到的各种问题整理

    2024年02月09日
    浏览(6)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包