wpf - 如何在 WPF 中为 Segoe MDL2 图标着色？

Question

我正在寻找一种为 Segoe MDL2 图标添加颜色的方法。我的应用程序中的字形当前是 TextBlock 资源，定义如下:

<TextBlock x:Key="PenSymbol" x:Shared="False" FontFamily="Segoe MDL2 Assets" Text="&#xE76D;" FontSize="16" TextOptions.TextRenderingMode="Grayscale"/>

我想要的效果是左边3个图标中的效果:

这是 Window 10 Sketchpad 中工具栏的屏幕截图(应用 Creators 更新后)。

编辑:我知道如何更改文本颜色，我正在尝试找出如何获得“部分填充”效果(屏幕截图中的蓝色、黑色和黄色)。

Edit2:需要显示 2 个不同的字形才能实现此效果。背景所需的字形已在上次更新中添加到 Segoe MDL2 字体中。感谢mm8为我指明了正确的方向。

XAML:

<Style x:Key="SymbolText" TargetType="{x:Type TextBlock}">
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="TextAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
    <Setter Property="TextOptions.TextRenderingMode" Value="Grayscale"/>
</Style>

<StackPanel Orientation="Horizontal">
    <Grid Margin="4">
        <TextBlock Text="&#xE88F;" Style="{StaticResource SymbolText}" Foreground="OrangeRed"/>
        <TextBlock Text="&#xE76D;" Style="{StaticResource SymbolText}"/>
    </Grid>
    <Grid Margin="4">
        <TextBlock Text="&#xF0C6;" Style="{StaticResource SymbolText}" Foreground="LightGreen"/>
        <TextBlock Text="&#xED63;" Style="{StaticResource SymbolText}"/>
    </Grid>
    <Grid Margin="4">
        <TextBlock Text="&#xE891;" Style="{StaticResource SymbolText}" Foreground="LightBlue"/>
        <TextBlock Text="&#xE193;" Style="{StaticResource SymbolText}"/>
    </Grid>
</StackPanel>

结果:

Answer 1

将Foreground属性设置为Brush:

<TextBlock x:Key="PenSymbol" x:Shared="False" Foreground="Red" FontFamily="Segoe MDL2 Assets" Text="&#xE76D;" FontSize="16"/>

另外，可以通过直接在彼此之上绘制字形来实现分层和着色效果，如 MSDN 文档中所述:https://learn.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font