背景
应用程序很多时候需要图标,这里介绍两种常用的方法:
- 使用Segoe MDL2 Assets 提供的图标库简易实现
- 使用Microsoft Expression Design自己 绘制
Segoe MDL2 Assets
如果使用 C#/VB/C++ 和 XAML 开发应用,可通过 Symbol 枚举使用 Segoe MDL2 Assets 中的指定字形。
<SymbolIcon Symbol="GlobalNavigationButton"/>
但是Symbol 枚举提供的图标有限,如果想使用 Symbol 枚举中未包含的 Segoe MDL2 Assets 字体的字形,可使用 FontIcon。
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
FontIcon
提供的图标还是比较全面的,全部可以使用的图标可以参考官方文档
自己绘制Icon图标
有时候,如果没法找到我们想要的图标的时候,这个时候我们就可以考虑自己绘制图标了:
第一步,下载Microsoft Expression Design
微软官方有免费版本,足够使用了,直接下载就好,传送门
第二步,绘制自己想要的图标
绘制好图标之后,菜单栏选择 File–>Export
右边可以设置对应的导出参数,这个看一下就明白了。
我的导出结果:
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="800" Height="600" Clip="F1 M 0,0L 800,0L 800,600L 0,600L 0,0">
<Canvas x:Name="Layer_1" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
<Ellipse x:Name="Ellipse" Width="438" Height="423" Canvas.Left="181.5" Canvas.Top="85.4999" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
<Path x:Name="Path" Width="232" Height="267.736" Canvas.Left="324.5" Canvas.Top="174.132" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 556,308L 325,174.632L 325,441.368L 556,308 Z "/>
</Canvas>
</Canvas>
然后就可以使用这段代码提供的path绘制我们的图标了,比如说我们使用该图标创建一个按钮:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<Button HorizontalAlignment="Stretch" VerticalAlignment="Center" Padding="0" Width="40" Height="40" Background="Transparent">
<Grid>
<Ellipse Fill="Red" Height="35" Width="35" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center">
</Ellipse>
<!-- 这里的Data就是上面生成的代码里的Data -->
<Path Data="F1 M 556,308L 325,174.632L 325,441.368L 556,308 Z" Stretch="Uniform" Fill="White" Width="14" Height="14" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform TranslateX="1"/>
</Path.RenderTransform>
</Path>
</Grid>
</Button>
</Grid>
效果如下:
FYI
这里的图标的data path除了可以应用在UWP项目里,实际上也可以用在Android,WPF等项目中。