图标字体

现代新式应用设计中，图标常常占有和说明性文字同等重要的地位，为了选择和自己应用风格一致、且有足够数量的图标库常常让人很伤脑筋。
好在WinUI系列提供一套官方的图标库——Segoe Fluent Icons，和Fluent Design十分匹配，可以在Gallery中Design guidance/Iconography选项找到图标预览。

虽然软件示例中只提供了FontIcon（继承于IconElement）的形式，
但实际上常用还有FontIconSource（继承于IconSource）。
两者的区别在于基类IconElement是继承于DependencyObject，所以它是一个控件，可以接直接放在XAML树中（如作为Button的Content）；
而IconSource只是一个元素、标志，不能直接放在XAML树中，只能放在某个控件的属性里（如作为TeachingTip的IconSource）。

一般来说，名为Icon的属性，类型都是IconElement；名为IconSource的属性，类型都是IconSource。

若想使用这种字体的图标，有几种类型可以使用：

SymbolIcon/SymbolIconSource

该类的优点是通过枚举类型属性Symbol来设置图标类型。
缺点也很明显，枚举数量只有197，也就是只有197种图标，远远不能满足需要。

FontIcon/FontIconSource

该类也是Gallery中推荐使用的图标库。数量达到1403个之多，并且以后可能还会增长，
但对于涉及功能较多的大项目仍有些捉襟见肘。
但看到Gallery中的示例也可以发现，该类使用十六进制字符指定所需的图标，形如：

<AppBarButton>
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE8FB;" /> <!--Accept-->
    </AppBarButton.Icon>
</AppBarButton>

这样写不仅丑陋，无效信息多占了两行（SymbolIcon也有这个问题）；而且可读性很差，以后看完全不知道这里写的是什么图标，使用注释又过于累赘。

在CommunityToolkit中，提供了一种用标记扩展实现的简单写法。诚然解决了第一个问题，但可读性问题仍然存在：

<AppBarButton Icon="{ui:FontIcon Glyph=&#xE102;}" xmlns:ui="using:CommunityToolkit.WinUI" />

下面这个库将解决以上所有的问题：

FluentIcons

写过web的读者们也许接触过fluentui-system-icons这个库。它虽然不是系统自带的，但它目前已拥有2543个之多的图标数已然成为选择它的理由，并且数量还在不断增加。
而且该图标还拥有正常、细、填充三种样式和大、小两种版式，足够满足大多数情况的需要。

[!NOTE]
fluentui-system-icons并不完全覆盖Segoe Fluent Icons，尤其和操作系统强相关的（Windows设置中出现的那些）图标缺失较多。但仍瑕不掩瑜，而且必要时也可以混用部分Segoe Fluent Icons字体。

fluentui-system-icons字体符号的命名也很考究。拥有某种元素的符号名称中一定包含元素的名称。例如：图标的主体主题是箭头的，一定以Arrow开头，后面跟着箭头的描述（如ArrowUp、ArrowTrending）；描述完图标的主体，就继续描述图标右下角的元素（若有）。例如：右下角是一个小对勾的符号，一定以Checkmark结尾（如ArrowTrendingCheckmark）。这样IDE的智能补全就得以充分发挥它的用处。

FluentIcons是一个开源库包装了该字体。这个库充分考虑了API设计，支持以上的两种写法，使用可读性更好的枚举作为类型，使用起来十分舒服。

<CommandBar xmlns:fluent="using:FluentIcons.WinUI">
    <AppBarButton>
        <AppBarButton.Icon>
            <fluent:SymbolIcon Symbol="Checkmark" />
        </AppBarButton.Icon>
    </AppBarButton>
    <AppBarButton Icon="{fluent:SymbolIcon Symbol=Checkmark}" />
</CommandBar>

此外由于该字体中，和Segoe Fluent Icons形态更相似的大版式并不是默认字体，所以FluentIcons提供了一个App的扩展方法以指定使用大版式字体：

using FluentIcons.WinUI;
...
public App()
{
    this.UseSegoeMetrics();
    ...
}

个人认为唯一的缺点是Symbol/SymbolIcon/SymbolIconSource的命名与官方库中的冲突，导致需要使用类型别名来指定。但仍然无法让我放弃使用它。

PathIcon

当需要用到某些有版权的图标时，显然上面任何一个库都无能为力了。这时我们可以用单色的SVG：PathIcon来实现。

在SimpleIcons里有大量商标矢量图可以直接使用，只需要复制它的内容，并粘贴到PathIcon.Data属性中即可显示。