Sometimes icons are not drawn when using ObjectToImageConverter

[cschlesiger]

I'm new to the Fluent Ribbon and I'm trying it out by reproducing a common ribbon I have in my applications. I've run into an issue that I don't know is a result of my lack of knowledge of the tool or what. I created a small test application to demonstrate the problem.

When I use the RibbonToolbar I'm finding that if the first item in the LayoutDefinition is a button or toggle button that contains an image, that image is not being drawn. The button is there and usable, but is blank.

Here is my bare-bones test app's XAML. There is no code-behind written. The image on the button Bold is missing. The image on the button Bold2, the second button which is identical to the first, appears as expected. The file Bold.png is a simple 16x16 image containing the familiar B for bold.

<f:Ribbon>
<f:RibbonTabItem Header="Test">
<f:RibbonGroupBox Header="Toolbar">
<f:RibbonToolBar>
<f:RibbonToolBar.LayoutDefinitions>
<f:RibbonToolBarLayoutDefinition>
<f:RibbonToolBarRow>
<f:RibbonToolBarControlDefinition Target="Bold"/>
<f:RibbonToolBarControlDefinition Target="Bold2"/>
</f:RibbonToolBarRow>
</f:RibbonToolBarLayoutDefinition>
</f:RibbonToolBar.LayoutDefinitions>
<f:Button Name="Bold" SizeDefinition="Small" Icon="Bold.png"/>
<f:Button Name="Bold2" SizeDefinition="Small" Icon="Bold.png"/>
</f:RibbonToolBar>
</f:RibbonGroupBox>
</f:RibbonTabItem>
</f:Ribbon>

Can anyone reproduce this bug, if it is one? Or offer me some guidance in how I'm misusing this?

Environment

• Fluent.Ribbon v5.0.2.46
• Windows 10 Pro v1709
• .NET Framework 4.6.2

[batzen]

Hi @cschlesiger.
What's the definition for your icon?

[cschlesiger]

It is a 16x16 straight png image with 32 bit depth. I have tried attaching it here, but it looks like it inserted it in the text at the top here. Hopefully you can download it.

I'm not certain the image format is the problem since this same image works just fine with the second, and all subsequent buttons, drawn on the toolbar. I have also tried other images and the problem remains.

Additionally, I tried putting a ToolBarControlGroupDefinition containing 3 ToggleButtons as the first item in the ToolBarRow. In that case, all 3 buttons did not have their images rendered. It was treating the ControlGroupDefinition as the first item and therefore not rendering it. When I put another Button in front of it as the first item in the row, then that button wouldn't render but the three ToggleButtons in the control group did render because now they were the second item.

In all the cases I was using the same format PNG files generated by the same tool, Axialis IconWorkshop. These images have worked perfectly fine in all of my WPF applications to date (over the course of 10 or more years since WPF came out). They also render fine in all the buttons I used when inserted in the RibbonGroupBox directly instead of through the RibbonToolBar.

Hope this helps identify the issue.

[batzen]

I guess it's not the icon itself but something else.

Just tried to reproduce your issue using the showcase application and by using pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Bold.png as the icon and it works as expected.

You misunderstood my previous question. I was asking for the icon definition in xaml.
The most probable thing going wrong is some shared usage of the icon.
Are there any warnings in the output window during debugging?

[cschlesiger]

Okay, I changed my code to this:

<f:Button Name="Bold" SizeDefinition="Small" Icon="pack://application:,,,/BugTest;component/Bold.png"/>
<f:Button Name="Bold2" SizeDefinition="Small" Icon="Bold.png"/>

And now the image is being drawn correctly. It appears that it is requiring the pack designation for finding the embedded images. My experience has been that it isn't completely necessary to put that in, which is why I was just putting in the relative path. My file "Bold.png" was just located in the root level of the project folder and added to the Visual Studio project with the "Resource" build action.

What seems extremely strange about this behavior is that it is only necessary for the very first item in the RibbonToolBar and not the ones that follow. My second button as shown above is drawing just fine with just the code Icon="Bold.png" and not the Icon="pack://application,,," designation.

Also, there was no unusual error messages in the debug/output window when I ran the program during debugging.

The problem seems resolved. I'll just have to put in the pack stuff for at least the first item in the toolbar.

I'd be interested to hear if you go further with the investigating to see why only the first one requires this.

Thank you very much for your time and help.

[batzen]

I am able to reproduce your issue. In my case the second image isn't drawn.
The issue is caused somewhere in the converter.
Will try to figure out what's causing it and fix it.

[cschlesiger]

Great!