UWP 使用SVG (ttf,otf)的两种方式

1. 直接使用

像传统图片一样,将svg文件添加到工程中,文件的属性为"Content"

在xaml中作为Image的source直接引用

这种方式只能在uwp中使用。

以下重点介绍, 将svg作为字体使用的方式,这种方式既可以在wpf中使用也可以在uwp中使用。

2. 作为字体的方式

随着富文本发展,程序界面将图标作为字体使用的原因和好处都有很多,对于wpf和uwp的UI,除了传说中提升性能外,最直接的好处是使用图标可以像文本内容一样处理,对于支持动态主题的UI,不再因为不同颜色而需要多套不同颜色的图标资源。

1)那么如何做:

如何从svg的文件得到字体文件:

一般程序员从美工得到的图标资源是svg文件,有很多在线工具可以将svg文件转为字体,这里推荐一款比较好用的https://icomoon.io/app/#/select

将转换好的结果下载下来,得到以下文件结构,

         将fonts 文件夹下的 .ttf 文件添加到工程中,文件属性为"Content"

怎么使用字体文件:

在全局资源字典中声明为字体资源:

打开 “demo.html" 文件,会看到这样类似这样的项,最左边是图标的原型,下面是Unicode编码,这编码是该图标的唯一的标识。

在xaml中使用该图标

或者

 

如果在cs代码中使用这个标识时,需要这么写

那么相应的xaml就可以这样使用:

 

FontIcon是uwp才支持的标签, TextBlock和wpf中使用方式是一样的。

2 需要注意的问题:

并不是任何情况都需要将svg转为fonticon的,对于富彩色的,不需要和背景整合的图片资源,应该还是直接以svg的方式使用。

参考:

https://cloud.tencent.com/developer/article/1342012

https://www.cnblogs.com/mycing/p/5658355.html

Uwp fontICon

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.fonticon?view=winrt-19041

Seoge MDL2 icons

https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font#how-do-i-get-this-font

https://stackoverflow.com/questions/51542582/uwp-text-cant-show-correctly-in-some-font-when-change-it-in-code-especially-ic

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Visual Studio UWP(Universal Windows Platform)是一种开发应用程序的方式,它可以让开发者使用统一的代码库来创建适用于多种Windows设备的应用程序,包括PC、手机、平板和Xbox等。 使用Visual Studio UWP进行开发,可以享受以下优势: 1. 统一的代码库:可以使用C#、C++或JavaScript等语言编写应用程序,并且可以在不同的设备上共享代码。 2. 自适应布局:UWP应用程序可以根据不同设备的屏幕大小和分辨率进行自适应布局,以提供最佳的用户体验。 3. 强大的API支持:UWP提供了丰富的API库,包括UI控件、文件系统、网络通信等功能,方便开发者实现各种功能需求。 4. 应用商店分发:UWP应用程序可以通过Microsoft Store进行分发和更新,方便用户获取和管理应用程序。 在Visual Studio中使用UWP进行开发,可以按照以下步骤进行: 1. 安装Visual Studio:首先需要安装Visual Studio开发环境,确保选择安装UWP开发工具组件。 2. 创建新项目:在Visual Studio中选择“新建项目”,然后选择“Visual C#”或“Visual C++”下的“Windows Universal”模板,选择适合的应用程序类型。 3. 开发应用程序:根据需求使用XAML和C#(或C++)进行界面设计和逻辑编写,可以使用Visual Studio提供的可视化设计器和代码编辑器。 4. 调试和测试:使用Visual Studio提供的调试工具进行应用程序的调试和测试,可以在模拟器或真实设备上运行应用程序。 5. 打包和发布:完成开发后,可以使用Visual Studio提供的打包工具将应用程序打包为安装包,并上传到Microsoft Store进行发布。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值