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,一经查实,立即删除!

相关文章

二叉树的基础概念及遍历

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

electron-vite中的ipc通信

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

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

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

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

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

【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测…

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…

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

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

GCC 内联汇编

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

Java设计模式-单例模式(2)

大家好&#xff0c;我是馆长&#xff01;从今天开始馆长开始对java设计模式的创建型模式中的单例、原型、工厂方法、抽象工厂、建造者的单例模式进行讲解和说明。 单例模式&#xff08;Singleton&#xff09; 定义 某个类只能生成一个实例&#xff0c;该类提供了一个全局访问…

houdini rnn

1.3.RNN模型_哔哩哔哩_bilibili 此公式来自于吴恩达P1.3视频 按公式推测rnn内部结构,如有错误&#xff0c;敬请指正

解决系统开发中的跨域问题:CORS、JSONP、Nginx

文章目录 一、概述1.问题场景2.浏览器的同源策略3.解决思路 二、一点准备工作1.创建前端工程12.创建后端工程3.创建前端工程24.跨域问题 三、方法1&#xff1a;使用CORS四、方法2&#xff1a;JSONP五、方法3&#xff1a;Nginx1.安装和启动&#xff08;windows&#xff09;2.使用…

初识VUE

文章目录 Vue是什么1.创建一个Vue实例2.插值表达式{{ }}3.Vue的响应式特性4.开发者工具的安装 Vue是什么 概念&#xff1a;Vue是一个用于构建用户界面的渐进式框架 ①构建用户界面&#xff1a;基于数据渲染出用户看到的界面 ②渐进式&#xff1a;循序渐进 ③ 框架&#xff1…

6.4.4释放音频

6.4.4释放音频 许多Flash动画里的音乐或歌曲非常好听&#xff0c;能不能在没有源文件的情况下把里面的声音文件取出来呢&#xff1f;利用Swf2VideoConverter2可以轻松做到这一点。 1&#xff0e;单击“添加”按钮&#xff0c;在弹出的下拉菜单中选择“添加文件”&#xff0c;…

金蝶云星空表单插件获取单据体数据

文章目录 金蝶云星空表单插件获取单据体数据 金蝶云星空表单插件获取单据体数据 使用标识报错 var thisEntry this.View.Model.DataObject["FEntity"] as DynamicObjectCollection;应该使用实体属性 var thisEntry this.View.Model.DataObject["BillEntry&q…

搜索经典题——填充 9*9矩阵

题目&#xff1a;给定一个九行九列矩阵&#xff0c;填充矩阵元素&#xff0c;要求&#xff1a; 1、每一行每一列&#xff0c;每个小九宫格&#xff08;图片画粗的地方就是&#xff09;不能包含相同元素 2、每一行&#xff0c;每一列&#xff0c;每个小九宫格均会完整出现1-9的数…

【Python爬虫】项目案例讲解,一步步教你爬取淘宝商品数据!

前言 随着互联网时代的到来&#xff0c;人们更加倾向于互联网购物&#xff0c;某宝又是电商行业的巨头&#xff0c;在某宝平台中有很多商家数据&#xff0c;今天带大家使用pythonselenium工具获取这些公开的商家数据 环境介绍&#xff1a; python 3.6pycharmseleniumcsvtime…

vue3 项目中 arguments 对象获取失败问题

问题 在 vue3 项目中 获取到的 arguments 对象与传入实参不符&#xff0c;打印出函数中的 arguments 对象显示如下&#xff1a; 原因 作者仔细回看代码才发现&#xff0c;自己一直用的是 vue3 的组合式写法&#xff0c;函数都是箭头函数&#xff0c;而箭头函数不存在 argumen…

cetos7搭建部署k8s 版本1.28

主机分配 内存最少是4G cpu个数最少两个 IP内存CPU主机名192.168.231.12044K1 192.168.231.12144K2192.168.231.12244K3 关闭防火墙 systemctl stop firewalled 关闭swap vim /etc/fstab 设置主机名称 hostnameset 安装docker 三个主机 初始化集群 在mas…

1432 - 走出迷宫的最少步数-广度优先搜索BFS

代码 #include<bits/stdc.h> using namespace std; char a[51][51]; int r,c; int fx[4]{0,0,1,-1}; int fy[4]{1,-1,0,0}; int tx,ty; struct Node{int x,y,step; }; int bfs(int x,int y){a[x][y]#;queue<Node> q;q.push({x,y,1});while(!q.empty()){Node Curre…