Set transparent icon with RibbonX API in Excel not working - excel

Question

I am trying to set a transparent icon for my Excel add-in with the RibbonX API. This is my XML:
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" loadImage="gui_LoadImage">
<ribbon>
<tabs>
<tab id="CBtab" label="2019CBMaster">
<group id="visualizationGroup" label="Visualization">
<button id="btnHistogram" label ="Press here" enabled="true" screentip="Press and see how magic happens" image="icn_btnHistogram.jpg" size="large"/>
</group>
<group id="NewGroup" label="2019NewGroup" >
<box id="bxBo">
<button id="btnNew" label="Press" image="icn_btnHisto.jpg" size="large"/>
<menu id="mnMenu" image="btn_img_random.jpg">
</menu>
</box>
</group>
</tab>
</tabs>
</ribbon>
</customUI>
this is the sub that is setting the picture: for my testing purposes, it ignores the xml parameters and simply loads a 'fixed' picture:
Sub gui_LoadImage(ImageName As String, ByRef Image)
Set Image = stdole.LoadPicture("C:\Office 2010 Developer Resources\icons\gg.ico")
End Sub
I saved gg.ico in GIMP as 24 bpp and 1 bit alpha ico file. I also tried external ico-s and they did not display as well.
As you have understood from above, the icons are not displayed as if they were completely transparent.
Could you help?
Also, is this RibbonX API still supported? I am wondering because I have difficulties doing a pretty basic thing and can find little to no documentation. If not, what are the modern frameworks for developing Excel Add-ins with customizable ribbons?
Thank you.

Answer 1

Custom Ribbon UI icons can be transparent. I believe they must be .png files. Here are details on the UI Ribbon icon settings, which includes transparent backgrounds.
https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-icons
REVISION
In custom UI editor, you can import your image files and then just reference the file names in the XML code. The file type and whether or not the image itself has a transparent background is what I believe determines whether or not it appears transparently on the ribbon. This is what the XML would look like. <button id="customButton1" label="Label 1" size="large" onAction="Macro1" image="picture1" /> 
In looking at your XML code, I see that you have the file extension included in with the images. I do not include the file extensions with my custom image icons. In the Custom UI editor that I linked, you can add import the image file, which appears in the side pane, then you reference only the file name in the XML (no file extension). I also believe is the file type itself and whether or not the image actually has a transparent background that determines whether or not it appears transparently in the ribbon. jpg files cannot be transparent, so that may be your problem right there. If your UI editor cannot accommodate PNG files, try using GIF. The icons are so small; image quality shouldn't be an issue.
Here is an example:
<splitButton id="splitButton2" size="large" >
<button id="InsertTools" label="Insert" image="InsertTools_Transparent" />
<menu id="menu2">
<button id="buttonInsertMultiSheets" onAction="ModRibbon.Run_InsertMultipleSheets" label="Insert Multiple Sheets" screentip="Add multiple worksheets at one time. An input box will appear for you to enter the number of sheets to be added." image="WorksheetAddMultipleSheets" />
</menu>
</splitButton>
Here are some of my personal notes from when I was learning that may or may not be helpful for you.
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
<backstage>
<button id="MyCustomButton1" label="My Macro"
imageMso="HappyFace" isDefinitive="true" onAction="ModRibbon.Run_Macro1"/>
<!-- 'button id' each must be unique -->
<!-- 'My Macro' is the text that will appear on your button -->
<!-- Use 'imageMso' or 'image' to include a picture on your button. -->
<!-- 'imageMso' uses built-in Office images; do not insert into this file as icons. -->
<!-- 'image' uses your own image as your button's icon. Insert it into this file as an icon. -->
<!-- 'HappyFace' is the name of the built-in Office image (for custom images, enter the file name). -->
<!-- 'ModRibbon' is the name of the VBA module in which you will paste this call-back sub. You can name this anything. -->
<!-- 'Run_' is a custom prefix added to the macro name, so you don't have to rename your macros. -->
<!-- 'Macro1' is the macro that should be run when the button is clicked. -->
</backstage>
</customUI>
With the Custom UI editor I use, the callback would be:
'Callback for buttonInsertMultiSheets onAction
Sub Run_InsertMultipleSheets(control As IRibbonControl)
End Sub
From your code, it looks like you need a call to load the image as well, so the customUI control has two callbacks:
Sub LoadImage (imageID As String, ByRef image)
Sub OnLoad(ribbon As IRibbonUI)
If you also have a [Content_Types].xml, then the default type is PNG and you need to add a line at the very end of the file, but before , and then save your changes.
<Default Extension="jpg" ContentType="application/octet-stream"/>

Answer 2

The recommended file format for icons on the Ribbon UI is PNG. Microsoft Office Ribbons and toolbars support ICO, BMP and ICO files. So, I'd suggest converting your VBA macros to the COM add-in where you can easily load such images.
You may find the Graphics formats for Microsoft Office add-ins article helpful. The Fluent UI is described in depth in the following series of articles:
Customizing the 2007 Office Fluent Ribbon for Developers (Part 1 of 3)
Customizing the 2007 Office Fluent Ribbon for Developers (Part 2 of 3)
Customizing the 2007 Office Fluent Ribbon for Developers (Part 3 of 3)