如何在WPF中将Segoe MDL字体图标设置为图像源？

Question

我尝试过搜索功能（当然还有谷歌），但发现对我的问题没有任何帮助。

我使用 Syncfusion 中的 ButtonAdv 控件 (https://help.syncfusion.com/wpf/button/overview)，它需要图标的图像源（LargeIcon、SmallIcon）。

我想使用 Segoe MDL2 字体图标作为按钮的图像图标。 我怎样才能实现这个目标？ 在 Xamarin.Forms 中有类似 FontImageSource 的东西，但我没有找到 WPF 类似的东西。

我现在没有任何代码行（xaml 或代码隐藏），因为我不知道如何或从哪里开始。我很高兴每个想法或代码片段都能找到解决方案。

通常你会为字体图标写类似的内容：

<SomeControl>
    <ui:FontIcon Glyph="&#xE8C6;" Foreground="Black" />
</SomeControl>

并且（如果您有图像）图像源类似：

<ButtonAdv LargeIcon="{StaticResource someImage}" />

谢谢你。

Answer 1

这是可能的，虽然有点复杂。

除了使用 VisualBrush 的 GeometryDrawing 之外，您还可以使用 GlyphRunDrawing。然而，这看起来更复杂。

<Image Stretch="None">
    <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Brush>
                        <VisualBrush Stretch="Uniform">
                            <VisualBrush.Visual>
                                <TextBlock FontFamily="Segoe MDL2 Assets"
                                           Text="&#xE8C6;"/>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </GeometryDrawing.Brush>
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="0,0,32,32"/>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>

---

为了更轻松地重用，您可以创建一个如下所示的 StaticResourceExtension：

[MarkupExtensionReturnType(typeof(DrawingImage))]
public class IconImageExtension : StaticResourceExtension
{
    private static readonly FontFamily fontFamily
        = new FontFamily("Segoe MDL2 Assets");

    public int SymbolCode { get; set; }

    public double SymbolSize { get; set; } = 16;

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var textBlock = new TextBlock
        {
            FontFamily = fontFamily,
            Text = char.ConvertFromUtf32(SymbolCode)
        };

        var brush = new VisualBrush
        {
            Visual = textBlock,
            Stretch = Stretch.Uniform
        };

        var drawing = new GeometryDrawing
        {
            Brush = brush,
            Geometry = new RectangleGeometry(
                new Rect(0, 0, SymbolSize, SymbolSize))
        };

        return new DrawingImage(drawing);
    }
}

并像这样使用它：

<Image Stretch="None"
       Source="{local:IconImage SymbolSize=32, SymbolCode=0xE8C6}"/>

Answer 2

一个更简单的解决方案是将此类项目放入您的通用主题目录中或直接放入您的

Page

或

Window

的资源中：

<TextBlock x:Key="IconEdit" Text="&#xE70F;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center" />
<TextBlock x:Key="IconNew" Text="&#xE710;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center" />
<TextBlock x:Key="IconDelete" Text="&#xE74D;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center" Foreground="Crimson" />

您可以从菜单项中引用它们：

<MenuItem Header="Edit" Icon="{StaticResource IconEdit}" />

这会将它们放入一个中央存储库中，您只需更改图标即可，引用该图标的所有菜单项都会自动更改。