现代操作系统应用开发：UWP——应用图标的实现方法

背景

应用程序很多时候需要图标，这里介绍两种常用的方法：

• 使用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="&#xE700;"/>

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等项目中。