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更新后）。

编辑：我知道如何更改文字颜色，我想弄清楚如何获得＆＃34;部分填充＆＃34; - 效果（截图中的蓝色，黑色和黄色）。

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://docs.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font

，可以通过直接在彼此之上绘制字形来实现分层和着色效果。

Answer 2

你可以将一个gliph放在另一个gliph上并以这种方式着色。例如：

<Grid>
    <FontIcon Foreground="#f8d876" FontFamily="Segoe MDL2 Assets" Glyph="&#xE8D5;" />
    <FontIcon  FontFamily="Segoe MDL2 Assets" Glyph="&#xE8B7;" />
</Grid>

结果：

Answer 3

我做了这个并且它有效：

我在按钮下添加了一个网格，添加了两个带有 MDL 2 图标的标签，并通过一些对齐方式使其成为一个带有圆形背景的帮助按钮！

<Button>
  <Grid>
    <Label Content='&#xEA3B;' Foreground="#FFBFBEBF" />
    <Label Content='&#xE897;' Foreground="#FF0066FF" FontSize="18" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
  </Grid>
</Button>

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

3 个答案: