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

Question

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

我使用 Syncfusion (https://help.syncfusion.com/wpf/button/overview) 的 ButtonAdv 控件，它需要图标（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}"/>

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

How to set a Segoe MDL font icon as image source in WPF?

c#

wpf

imagesource