svg矢量图标在wpf中的使用

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

步骤

        • 1、SvgToXaml 工具
        • 2、集成到资源字典
        • 3、集成到控件中

1、SvgToXaml 工具

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

在这里插入图片描述

我们可以看到,无论分辨率,和屏幕缩放级别怎么放大和缩小,图标依然是高清的,这就是矢量的魅力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635571.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

58 C++ 解决future只能取得一次结果的问题。--shared_future解决方案。

一 前提&#xff1a;future.get()方法只能获得一次 前面我们学习了使用async 启动异步任务&#xff0c;返回值使用 future<T> 获取的方案。 前面我们也学习了使用 promise<T> pro, 然后通过 pro.setvalue(tempvalue),最后通过 pro.getfuture()得到future。 然后…

二叉树的基础概念及遍历

二叉树(Binary Tree)的基础 1、树的概念 1、树的概念 树是一种非线性的数据结构&#xff0c;是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合&#xff0c;将它称为树&#xff0c;是因为在形状上像一颗倒着的树&#xff0c;如下图所示就是一颗二叉…

ROS2中python定时器的使用示例

创建定时器 self.timer self.create_timer(1.0, self.callback)函数定义 def create_timer(self,timer_period_sec: float,callback: Callable,callback_group: CallbackGroup None,clock: Clock None,) -> Timer:timer_period_sec: 定时执行时间间隔(s) callback: 回调…

electron-vite中的ipc通信

1. 概述 再electron中&#xff0c;进程间的通信通过ipcMain和ipcRenderer模块&#xff0c;这些通道是任意和双向的 1.1. 什么是上下文隔离进程 ipc通道是通过预加载脚本绑定到window对象的electron对象属性上的 2. 通信方式 2.1. ipcMain&#xff08;也就是渲染进程向主进…

R303 指纹识别模块硬件接口说明

1.外部接口尺寸图 2.USB通讯 3.串行通讯

修改大型二进制库内部函数名的bash 脚本及其解释

1.大型lib库重命名函数名字 迭代的方式对于大型二进制库改名字的功能脚本 会将源文件中的函数 add_(...) 修改成 nubia_add_(...) 的方式来调用 此脚本分配来修改&#xff0c;可以避免突破资源限制 ulimit -a&#xff1b; 保存为&#xff1a;redef_func_name_01.sh chmod…

VUE组件--动态组件、组件保持存活、异步组件

动态组件 有些场景可能会需要在多个组件之间进行来回切换&#xff0c;在vue中则使用<component :is"..."> 来实现组件间的来回切换 // App.vue <template><component :is"tabComponent"></component><button click"change…

第4周:Pytorch——综合应用和实战项目 Day 28-30: 学习资源和社区参与

第4周&#xff1a;综合应用和实战项目 Day 28-30: 学习资源和社区参与 在这个阶段&#xff0c;我们将探索更多的学习资源并鼓励参与PyTorch和TensorFlow的社区&#xff0c;以进一步提升技术和融入开发者社群。 学习资源&#xff1a; 论文&#xff1a;阅读最新的机器学习和深度…

【实战教程】ThinkPHP6分页功能轻松实现,让你的网站更高效!

ThinkPHP是一款非常流行的PHP开发框架&#xff0c;其最新版本ThinkPHP6在性能和易用性方面都得到了很大的改善。分页功能是网页开发中非常常见的功能&#xff0c;而ThinkPHP6也提供了非常方便的分页方法。本文将介绍如何实现ThinkPHP6的分页功能。 一、了解分页功能 在Web应用…

Spring FactoryBean

FactoryBean 是 Spring 框架中的一个高级接口&#xff0c;用于声明一个 Spring bean&#xff0c;它本身作为一个工厂可以创建其他的对象。这个机制常用于框架集成&#xff0c;例如用来创建复杂的第三方库实例&#xff0c;或者创建需要大量配置的对象。 实现 FactoryBean 接口的…

【JavaEE进阶】 SpringBoot配置⽂件

文章目录 &#x1f340;配置⽂件的作⽤&#x1f334;SpringBoot配置⽂件&#x1f38b;配置⽂件的格式&#x1f384;properties配置⽂件&#x1f6a9;properties基本语法&#x1f6a9;读取配置⽂件&#x1f6a9;properties的缺点 &#x1f333;yml配置⽂件yml基本语法&#x1f6…

TestCaseAssiant使用说明

目录 说明 工具界面 功能描述 Xmind转测试用例 测试组件 测试用例 用例优先级 用例前提 用例操作步骤 用例期望结果 Excel测试用例转Testlink xml 用例模板 使用技巧: TestLink Xml转Excel测试用例 说明 本文为小编之前博文中介绍的工具使用说明 Xmind转Excel测…

【亲测解决】Timedelta is not defined

问题 今天编写Python代码&#xff0c;出现问题如下&#xff1a; Timedelta is not defined解决方案 from datetime import timedelta1、参考&#xff0c; https://stackoverflow.com/questions/16782682/timedelta-is-not-defined

uniapp 小程序 使用 new FormData 报错,is not defined 问题解决(没解决)

new FormData 只适用于web端&#xff0c;uniapp 小程序不适用&#xff0c;这里当时也卡了一下&#xff0c;随便用个js文件发现其实FormData也使用不了&#xff0c;所以如果要配置formData 的格式 无法使用FormData,会报 FormData is not defined. 解决 原文 原文 原文 1.安装…

python tkinter 最简洁的计算器按钮排列

代码如下&#xff0c;只要再加上按键绑定事件函数&#xff0c;计算器既可使用了。 import tkinter as tk from tkinter.ttk import Separator,Buttonif __name__ __main__:Buttons [[%,CE,C,←],[1/x,x,√x,],[7, 8, 9, x],[4, 5, 6, -],[1, 2, 3, ],[, 0, ., ]]root tk.T…

MySQL作业 (4) 数据表综合练习

数据表综合练习 题目&#xff1a;1.查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数1.1查询同时存在" 01 "课程和" 02 "课程的情况1.2查询存在" 01 "课程但可能不存在" 02 "课程的情况(不存在时显示为 n…

2024年阿里云优惠券和代金券领取,活动整理服务器价格表

2024阿里云优惠活动&#xff0c;免费领取阿里云优惠代金券&#xff0c;阿里云优惠活动大全和云服务器优惠价格表&#xff0c;阿里云ECS服务器优惠价99元一年起&#xff0c;轻量服务器优惠价61元一年&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云优惠券免费领取、优惠活…

智能数据采集网关如何助力制造企业生产提效

随着工业4.0的推进&#xff0c;制造业正面临着一场数据革命。某高端制造企业为了提高生产效率、降低运营成本&#xff0c;决定引入智能数据采集网关&#xff0c;以实现生产过程的智能化管理。 该高端制造企业主要从事精密机械零件的生产。在传统生产模式下&#xff0c;生产过程…

Python算法题集_字母异位词分组

本文为Python算法题集之一的代码示例 题目49&#xff1a;字母异位词分组 说明&#xff1a;给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起&#xff0c;可以按任意顺序返回结果列表 字母异位词 &#xff1a;是由重新排列原单词所有字母得到的新单词 使用同步数…

GCC 内联汇编

LINUX下的汇编入门 AT&T风格 汇编 和GCC风格汇编 汇编代码的调试 前面写了三篇,是自我摸索三篇,摸着石头过河,有些或许是错误的细节,不必在意! 今天我们直接用GCC编译C语言代码,且在C语言里面内嵌AT&T风格的汇编! 前三篇大家了解即可,我们重点放在内嵌汇编里,简单快…