WPF Image.Source with materialDesign:PackIcon Kind="NewBox" !?!?

[BRRIT2017]

Hi,
does anyone have an idea how to dynamically get an Emage.Spurce with the Material Design icon in C#?

For example:
TestImage.Source = MaterialDesignThemes... ???

Am I missing the connection somehow?
I've been looking for hours...

Best regard Bernd

[nicolaihenriksen]

@BRRIT2017 Is there a particular reason you want it as an ImageSource? The icons are included as Path which are essentially "vector graphics". You could convert this into an ImageSource if you wanted to, but I don't really see why you would want to.

Instead of your TestImage being an Image control, you could simply change it to a PackIcon control, and then set the PackIcon.Kind property directly on there.

[BRRIT2017]

This is my image in WPF:

<Image x:Name="TestImage" Height="20" Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Source="Images/gnome-help.png">
And I want to program that in the background in C# with an icon/image.
Depending on the state of the data, sometimes this, sometimes that.

[nicolaihenriksen]

@BRRIT2017 Ok so it seems like you want an image (e.g. Images/gnome-help.png) in some cases, and then to use a PackIconKind in other cases; dynamically switching out the Image.Source.

I don't think the actual Path data of the PackIconKind is exposed publicly to consumers of the MDIX library, so you may struggle to get that information. If however you get the information, you still need to do a conversion. This gist (not mine) is one way of doing such a conversion. Not really ideal, and perhaps you're better of simply creating png's for the icons that you want?

[BRRIT2017]

The image provided is just an example
It could also be any other.
The picture is just to show what I want.

The MaterialDesign can also be used dynamically as a stack panel or button.
Whether it's a child or something else, I don't care, the main thing is that it works.

Sample SpackPalnel with Material Design:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="82" Width="82" > <materialDesign:PackIcon Kind="NewBox" Foreground="#FF2828B0" Width="72" Height="80" HorizontalAlignment="Center" VerticalAlignment="Center" Focusable="False" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" IsEnabled="False" /> </StackPanel>

[nicolaihenriksen]

@BRRIT2017 Ok. Still not 100% sure I understand what it is you want. But here is what I think you're asking for:

Q: How can I dynamically change the "icon" in code-behind?

If that is the case, we can just use the code you provided above:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="82"  Width="82">
  <materialDesign:PackIcon x:Name="MyPackIcon" Kind="NewBox" Foreground="#FF2828B0" Width="72" Height="80" HorizontalAlignment="Center" VerticalAlignment="Center" Focusable="False" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" IsEnabled="False" />
</StackPanel>

In the above I have added the name "MyPackIcon" to the PackIcon element, which allows it to be referenced from the code-behind. So in the code-behind you would just do something like this:

MyPackIcon.Kind = PackIconKind.GitHub;

That will change the icon from PackIconKind.NewBox to PackIconKind.GitHub and should be reflected in the UI.

[BRRIT2017]

This will not working...

eg.:
TestImage.Source = new MaterialDesignThemes.Wpf.PackIconKind(PackIcon.!?!?!)
I need a source from MeterialDesign...

[nicolaihenriksen]

No, that will not work because PackIcon is NOT an ImageSource; it is a ContentControl. You currently - to my knowledge - have to way of getting PackIconKind converted to an ImageSource natively in the MDIX library.

And I kind of struggle to see the need for it. If you explicitly need to be able to toggle between PackIconKind and an actual image (e.g. a png source), then you could encapsulate this in a ContentControl and simply change the content based on what you want to display.

<ContentControl x:Name="ImageDisplay" />

Then in your code-behind you could set the content:

if (usePackIconKind)
{
  ImageDisplay.Content = new PackIcon { Kind = PackIconKind.GitHub };
}
else
{
  ImageDisplay.Content = new Image("<correct source of image>");
}

[BRRIT2017]

I change not this in XAML:
<ContentControl x:Name="TestImage" Content="Test" Height="20" Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" ></ContentControl>
And this in Codebehind:
TestImage.Content = new PackIcon(PackIconKind.Abacus);
The visual studio give me an Error:
"PacIcon" is not a Constructor"... ?

[BRRIT2017]

Here is the Correct Error Message:
'PackIcon' does not contain a constructor that takes 1 arguments.

[nicolaihenriksen]

@BRRIT2017 Sorry, the syntax was wrong. It is a control so it only has its default constructor. You should use a property initializer instead. I have changed the code in my comment above.

[BRRIT2017]

I got it :-)
TestImage.Content = new MaterialDesignThemes.Wpf.PackIcon
{ Kind = MaterialDesignThemes.Wpf.PackIconKind.ABCOff };
Then it will be work :-)