CODEWITHSUNDEEP
c#wpfimagesource
LiliumCandidum
LiliumCandidum

Reputation: 61

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

I have tried the search function (here and Google of course) and found nothing helpful for my problem.

I use the ButtonAdv control from Syncfusion (https://help.syncfusion.com/wpf/button/overview) and it needs an image source for the icons (LargeIcon, SmallIcon).

I want to use the Segoe MDL2 font icons as image icon for the button. How can I achieve this? In Xamarin.Forms there is something like FontImageSource, but I do not find anything like that for WPF.

I have no line of code (xaml or code behind) right now as I don't know how or where to start. I am happy for every idea or code snippet to find a solution.

Normally you will write something like that for the font icon:

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

And (if you have an image) for the image source something like that:

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

Thank you.

Upvotes: 1

Views: 2894

Answers (2)

G&#225;bor
G&#225;bor

Reputation: 10234

A much simpler solution is to put items like these either into your general theme directory or directly into the resources of your Page or 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" />

You can refer to them from the menu items as:

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

This puts them into a central repository where you can simply change an icon and all menu items referencing this icon will automatically change.

Upvotes: 1

Clemens
Clemens

Reputation: 128070

It is possible, though a bit complicated.

Instead of the GeometryDrawing with a VisualBrush you may perhaps also use a GlyphRunDrawing. However, that looks even more complicated.

<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>

For easier reuse, you may create a StaticResourceExtension like this:

[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);
    }
}

and use it like this:

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

Upvotes: 5

Related Questions