How to bind image to mahapps icon packs? - wpf

Question

How to achieve this either in .XAML or programmatically?
<Image>
<!--<iconPacks:PackIconMaterial Kind="{Binding Status}"/>-->
</Image>

Answer 1

I had same problem.
I am using a package allows only System.Windows.Controls.Image
I solved from C# side.
Lets create a Mahapps Icon
PackIconFontAwesome icon = new PackIconFontAwesome();
icon.Kind = PackIconFontAwesomeKind.AddressBook;
And convert to Geometry
Geometry geo = Geometry.Parse(icon.Data);
GeometryDrawing gd = new GeometryDrawing();
gd.Geometry = geo;
gd.Brush = icon.BorderBrush;
gd.Pen = new Pen(Brushes.White, 100);
icon.Data gives XAML Path of icon Path Markup Syntax
Now we can convert to Image How to: Use a Drawing as an Image Source
DrawingImage geoImage = new DrawingImage(gd);
geoImage.Freeze();
Image img = new Image();
img.Source = geoImage;
Now you can bind where ever you want.

Answer 2

Using a Converter is the easiest way of doing this (expanded on tetralobita's answer) but I didn't see the need to create a bunch of template classes so here is a working version using just one Converter:
namespace MyProject.Converters
{
/// <summary>
/// Converts a <see cref="PackIcon{TKind}" /> to an DrawingImage.
/// Use the ConverterParameter to pass a Brush.
/// </summary>
public class PackIconToImageConverter : IValueConverter
{
/// <summary>
/// Gets or sets the thickness to draw the icon with.
/// </summary>
public double Thickness { get; set; } = 0.25;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
GeometryDrawing geoDrawing = new GeometryDrawing();
geoDrawing.Brush = parameter as Brush ?? Brushes.Black;
geoDrawing.Pen = new Pen(geoDrawing.Brush, Thickness);
if (value is PackIconFontAwesome)
geoDrawing.Geometry = Geometry.Parse((value as PackIcon<PackIconFontAwesomeKind>).Data);
else if (value is PackIconMaterial)
geoDrawing.Geometry = Geometry.Parse((value as PackIcon<PackIconMaterialKind>).Data);
else if (value is PackIconMaterialLight)
geoDrawing.Geometry = Geometry.Parse((value as PackIcon<PackIconEntypoKind>).Data);
else if (value is PackIconModern)
geoDrawing.Geometry = Geometry.Parse((value as PackIcon<PackIconMaterialLightKind>).Data);
else if (value is PackIconEntypo)
geoDrawing.Geometry = Geometry.Parse((value as PackIcon<PackIconEntypoKind>).Data);
else if (value is PackIconOcticons)
geoDrawing.Geometry = Geometry.Parse((value as PackIcon<PackIconOcticonsKind>).Data);
var drawingGroup = new DrawingGroup { Children = { geoDrawing }, Transform = new ScaleTransform(1, -1) };
return new DrawingImage { Drawing = drawingGroup };
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
And then to use the Converter:
Add the Namespace to your .xaml file:
xmlns:converters="clr-namespace:MyProject.Converters"
Then to Display the Icon as an Image:
<Image Source="{Binding Source={icons:PackIconMaterial sitemap},
Converter={converters:PackIconToImageConverter},
ConverterParameter={StaticResource TextBrush}}"/>
Or to use a Dependency Property as in a UserControl or Custom Control add the following to your Control:
/// <summary>
/// Identifies the <see cref="Icon"/> dependency property.
/// </summary>
public static readonly DependencyProperty IconProperty = DependencyProperty.Register(nameof(Icon), typeof(object), typeof(MyControl), new PropertyMetadata(null));
/// <summary>
/// Gets or sets a value that specifies an user specific object which can be used as icon.
/// </summary>
public object Icon {
get { return GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
Then Bind to the Property, in your template add:
<ControlTemplate x:Key="MyControlTemplate" TargetType="{x:Type local:MyControl}">
<Image Source="{TemplateBinding Icon,
Converter={StaticResource IconPackConverter},
ConverterParameter={StaticResource TextBrush}}" />
</ControlTemplate>

Answer 3

Maybe I'm a little too late but I was working on this.
I think that sometimes the solution could be way easier
Create this xmlns on your xaml page:
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
and then...
<Image Source="{Binding Source={iconPacks:BootstrapIconsImage Kind=Upload}}"/>
and the image will show up.
Enjoy coding

Answer 4

Why do you need this in an image? The icons are SVG assets rendered as a font in a custom control. Unless you're trying to do something particularly advanced, you can simply remove the <Image> tags and use the <iconPacks:PackIconMaterial /> control directly as shown here.

Answer 5

There is a better solution which I found it on github, more explanation about the code is here
You can convert it via a converter and use it in XAML like this
ImageSource="{Binding Source={x:Static
iconPacks:PackIconEntypoKind.AddToList}, Converter=
{converters:PackIconEntypoImageSourceConverter}, ConverterParameter=
{StaticResource TextBrush}}"
Converter code is
/// <summary>
/// Converts a <see cref="PackIcon{TKind}" /> to an ImageSource.
/// Use the ConverterParameter to pass a Brush.
/// </summary>
public abstract class PackIconImageSourceConverterBase<TKind> : MarkupExtension, IValueConverter
{
/// <summary>
/// Gets or sets the thickness to draw the icon with.
/// </summary>
public double Thickness { get; set; } = 0.25;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (!(value is TKind))
return null;
var foregroundBrush = parameter as Brush ?? Brushes.Black;
return CreateImageSource(value, foregroundBrush, Thickness);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
return this;
}
protected abstract ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness);
}
/// <summary>
/// Converts a <see cref="PackIcon{TKind}" /> to an ImageSource.
/// Use the ConverterParameter to pass a Brush.
/// </summary>
public class PackIconImageSourceConverter : MarkupExtension, IValueConverter
{
/// <summary>
/// Gets or sets the thickness to draw the icon with.
/// </summary>
public double Thickness { get; set; } = 0.25;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is null)
return null;
if (value is PackIconFontAwesomeKind)
return new PackIconFontAwesomeImageSourceConverter { Thickness = Thickness }.Convert(value, targetType, parameter, culture);
if (value is PackIconMaterialKind)
return new PackIconMaterialImageSourceConverter { Thickness = Thickness }.Convert(value, targetType, parameter, culture);
if (value is PackIconMaterialLightKind)
return new PackIconMaterialLightImageSourceConverter { Thickness = Thickness }.Convert(value, targetType, parameter, culture);
if (value is PackIconModernKind)
return new PackIconModernImageSourceConverter { Thickness = Thickness }.Convert(value, targetType, parameter, culture);
if (value is PackIconEntypoKind)
return new PackIconEntypoImageSourceConverter { Thickness = Thickness }.Convert(value, targetType, parameter, culture);
if (value is PackIconOcticonsKind)
return new PackIconOcticonsImageSourceConverter { Thickness = Thickness }.Convert(value, targetType, parameter, culture);
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
return this;
}
}
public class PackIconEntypoImageSourceConverter : PackIconImageSourceConverterBase<PackIconEntypoKind>
{
protected override ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness)
{
var packIcon = new PackIconEntypo { Kind = (PackIconEntypoKind)value };
var geometryDrawing = new GeometryDrawing
{
Geometry = Geometry.Parse(packIcon.Data),
Brush = foregroundBrush,
Pen = new Pen(foregroundBrush, penThickness)
};
var drawingGroup = new DrawingGroup { Children = { geometryDrawing }, Transform = new ScaleTransform(1, -1) };
return new DrawingImage { Drawing = drawingGroup };
}
}
public class PackIconFontAwesomeImageSourceConverter : PackIconImageSourceConverterBase<PackIconFontAwesomeKind>
{
protected override ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness)
{
var packIcon = new PackIconFontAwesome { Kind = (PackIconFontAwesomeKind)value };
var geometryDrawing = new GeometryDrawing
{
Geometry = Geometry.Parse(packIcon.Data),
Brush = foregroundBrush,
Pen = new Pen(foregroundBrush, penThickness)
};
var drawingGroup = new DrawingGroup { Children = { geometryDrawing }, Transform = new ScaleTransform(1, -1) };
return new DrawingImage { Drawing = drawingGroup };
}
}
public class PackIconMaterialImageSourceConverter : PackIconImageSourceConverterBase<PackIconMaterialKind>
{
protected override ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness)
{
var packIcon = new PackIconMaterial { Kind = (PackIconMaterialKind)value };
var geometryDrawing = new GeometryDrawing
{
Geometry = Geometry.Parse(packIcon.Data),
Brush = foregroundBrush,
Pen = new Pen(foregroundBrush, penThickness)
};
var drawingGroup = new DrawingGroup { Children = { geometryDrawing } };
return new DrawingImage { Drawing = drawingGroup };
}
}
public class PackIconMaterialLightImageSourceConverter : PackIconImageSourceConverterBase<PackIconMaterialLightKind>
{
protected override ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness)
{
var packIcon = new PackIconMaterialLight { Kind = (PackIconMaterialLightKind)value };
var geometryDrawing = new GeometryDrawing
{
Geometry = Geometry.Parse(packIcon.Data),
Brush = foregroundBrush,
Pen = new Pen(foregroundBrush, penThickness)
};
var drawingGroup = new DrawingGroup { Children = { geometryDrawing } };
return new DrawingImage { Drawing = drawingGroup };
}
}
public class PackIconModernImageSourceConverter : PackIconImageSourceConverterBase<PackIconModernKind>
{
protected override ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness)
{
var packIcon = new PackIconModern { Kind = (PackIconModernKind)value };
var geometryDrawing = new GeometryDrawing
{
Geometry = Geometry.Parse(packIcon.Data),
Brush = foregroundBrush,
Pen = new Pen(foregroundBrush, penThickness)
};
var drawingGroup = new DrawingGroup { Children = { geometryDrawing } };
return new DrawingImage { Drawing = drawingGroup };
}
}
public class PackIconOcticonsImageSourceConverter : PackIconImageSourceConverterBase<PackIconOcticonsKind>
{
protected override ImageSource CreateImageSource(object value, Brush foregroundBrush, double penThickness)
{
var packIcon = new PackIconOcticons { Kind = (PackIconOcticonsKind)value };
var geometryDrawing = new GeometryDrawing
{
Geometry = Geometry.Parse(packIcon.Data),
Brush = foregroundBrush,
Pen = new Pen(foregroundBrush, penThickness)
};
var drawingGroup = new DrawingGroup { Children = { geometryDrawing } };
return new DrawingImage { Drawing = drawingGroup };
}
}

Answer 6

I have been successfully using the following XAML-only solution:
<ContentControl Margin="10,2" Background="Blue" Foreground="White"
Content="{iconPacks:Material Kind=GestureTap}"
ToolTip="This is a tooltip"
IsEnabled="{Binding ShouldThisBeEnabled}"
Visibility="{Binding ShouldThisBeVisible, Converter={StaticResource VisibilityFromBool}}" />