UWP学习札记——在应用中使用Windows10风格图标

发表于 分类于 ， 阅读次数： 本文字数： 824 阅读时长 ≈ 1 分钟

在 Windows 中，微软引入了许多全新的设计模式，比如——（饱受争议的）汉堡包图标。 汉堡包图标在上一节已经介绍过了，这一节呢，就来说一说和它一起的其他图标的使用方法。

其是，在 Windows 10 中已经内置了 Segoe MDL2 Assets 字体，利用这一字体，可以简单做出很多 Windows10 风格的图标，而且这些都是矢量图，完全不用害怕失真~ 简单来举个例子：

XAML

1
<Button Name="Add" FontFamily="Segoe MDL2 Assets" Content="&#xE710;"/>

其中，FontFamily 指向 Segoe MDL2 Assets 字体，Content（有的元素为 Text 属性）设置为图标的代号即可。设置图标大小有两种方法，一种是像文字一样设置 FontSize，另一种可以像图片一样设置 Width 和 Height。

CSharp

1
2
3
4
Button btn = new Button();
Windows.UI.Xaml.Media.FontFamily font = new Windows.UI.Xaml.Media.FontFamily("Segoe MDL2 Assets");
btn.FontFamily = font;
btn.Content="\xE710";

原理差不多，只是 Content 里面转义用\，而不是用&#;，而字体需要新建一个字体的类，它在 Windows.UI.Xaml.Media 命名空间里面。

图标资源

这个网站可以找到 Segoe MDL2 Assets 字体中全部的图标：http://modernicons.io/segoe-mdl2/cheatsheet/

微软官方指南：https://msdn.microsoft.com/zh-cn/library/windows/apps/jj841126.aspx

相关文章