未加星标

Font icons in UWP using Segoe MDL2 and Segoe UI

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
Overview

While developing a UWP app to customize the Microsoft Band, I realized, there was no way to retrieve icons from the default band tiles, therefore I decided to go the old way of displaying icons, that is using images. Now, since it is a Universal Platform Application , it is expected to work across many different windows 10 platforms and screen sizes. One solution is to use an image file as an icon, which is pretty common, however, the image gets pixelated when the image and the screen size increases. We can use different icon files for different screen sizes, however, it is too much of hassle.

An easier solution I found is to use font icons, already predefined in the fonts Segoe MDL2 Assets and Segoe UI Symbol , the best part is you can bind the font size to a particular value, depending upon the screen size everything else is taken care of. Another benefit of using font icons is that, in case you change the theme from light to dark, the icons are updated as well, depending on the theme.

Segoe MDL2 Assetsis a Windows 10 font that replaces Windows 8/8.1 font Segoe UI Symbols . Some of the Segoe MDL2 Assets icons are also available through Symbol Enumeration , which I will discuss in this post as well. For list of symbols, available refer to this MSDN article Segoe MDL2 icons

Using TextBlock

TextBlock is a FrameworkElement control that is used to display small amounts of text. We set the Text property of the TextBlock control to the Unicode Value of the symbol we want to use. In our example below we have different symbols as the Text property.

Using Segoe MDL2 Assets

<TextBlock Text=" " FontFamily="Segoe MDL2 Assets" />

Using Segoe UI Symbols

<TextBlock Text=" " FontFamily="Segoe UI Symbol" />

Using FontIcon

FontIcon is a generalized version of SymbolIcon , that inherits from IconElement class. It is pretty similar to the TextBlock control, however, we set the Glyph property instead of Text property in the case of FontIcon control. Instead of using a predefined set of symbols from Segoe MDL2 Assets , you can specify the Unicode value and choose from the list of available icons. You can even specify a different font, such as Segoe UI Symbols and specify respective Unicode value.

Using Segoe MDL2 Assets

<FontIcon Glyph=" " FontFamily="Segoe MDL2 Assets" />

Using Segoe UI Symbols

<FontIcon Glyph=" " FontFamily="Segoe UI Symbol" />

Using SymbolIcon

Both the SymbolIcon and FontIcon inherit from the same class IconElement , however SymbolIcon is constrained to a predefined set of Segoe MDL2 icons.

Using Segoe MDL2 Assets

<SymbolIcon Symbol="Favorite" /> <SymbolIcon Symbol="Camera" /> <SymbolIcon Symbol="Mail" />

Display font icons using C#

Font icons can also be displayed very easily using C# by updating the respective code behind file. Just update the respective Gylph or Text property of the control you want to display the font icons in. The only difference in C# is that the Unicode value is escaped differently using ‘\u’.

FontIconCS.Glyph += "\uE1D0"; txtFontIconCS.Text += "\uE1D0";

Icons in action

This is how Segoe MDL2 and Segoe UI font icons look on a UWP app.


Font icons in UWP using Segoe MDL2 and Segoe UI
Source Code

You can find the source code at Github fontIcons repo along with the Visual Studio 2015 solution.

Final note

The best part about font icons is that you don’t have to worry about pixelated icons anymore. :)

If you still face any problems or have any questions, feel free to leave a comment and I will be happy to help. Cheers :)

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: C#WindowsUWVisual StudioVisual StudiGitSDN
分页:12
转载请注明
本文标题:Font icons in UWP using Segoe MDL2 and Segoe UI
本站链接:http://www.codesec.net/view/479833.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(49)