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

在 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

请鼓励我的原创文章