Adding image to Excel ribbon button

1129 views
Skip to first unread message

Edward Qiu

unread,
Dec 15, 2016, 1:00:55 AM12/15/16
to Excel-DNA
Hello,
I tried to convert a pure VSTO project to using ExcelRibbon. The button in my original project has an image. However, after I exported the XML from Designer, I do not see any reference to that image. How do I add that image back?
Thanks, Edward

<customUI onLoad="Ribbon_Load" xmlns="http://schemas.microsoft.com/office/2006/01/customui">
    <ribbon>
        <tabs>
            <tab idMso="TabAddIns" label="Test">
                <group id="group1" label="Data Refresh">
                    <splitButton id="splitButton1" size="large">
                        <button id="splitButton1__btn" label="Worksheet" />
                        <menu id="splitButton1__mnu">
                            <button id="MyButton" onAction="onMyButton_Click" label="Test" />
                        </menu>
                    </splitButton>
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

Edward Qiu

unread,
Dec 15, 2016, 12:47:35 PM12/15/16
to Excel-DNA
OK I figured it out.
Basically, the image needs to set inside the DNA file, and add the "image" attribute to the button.
Also, the image needs to be generated to the output directory otherwise it doesn't get packaged.
Do I miss anything else?

Govert van Drimmelen

unread,
Dec 15, 2016, 1:02:48 PM12/15/16
to exce...@googlegroups.com
Hi Edward,

There are two approaches to packing your images:

Approach 1 - Use the Excel-DNA packing feature.

The ExcelRibbon base class has this member:

        // LoadImage helper - to use need to mark loadImage='LoadImage' in the xml.
        // 1. An IPictureDisp
        // 2. A System.Drawing.Bitmap
        // 3. A string containing an imageMso identifier
        // Our default implementation ...
        public virtual object LoadImage(string imageId)
        {
            // Default implementation ...
            return DnaLibrary.GetImage(imageId);
        }

Now DnaLibrary.GetImage(imageId) will check for image files specified in the .dna file, and these can be packed too, similar to reference assemblies.

This allows you to set up your .dna file like this:

<DnaLibrary ....>
  <ExternalLibrary Path="..."   .... />
  <Image Name="Image1" Path="Image1.png" Pack="true" />
  <Image Name="Image2" Path="Image2.png" Pack="true" />

</DnaLibrary>

This will pack those files into the .xll with the regular ExcelDnaPack mechanism.

Then in your ribbon xml you specify you want to use the built-in LoadImage method:

<customUI xmlns='http://schemas.microsoft.com/office/2006/01/customui' loadImage='LoadImage'>
      <ribbon>
        <tabs>
          <tab id='CustomTab' label='My Tab'>
            <group id='SampleGroup' label='My Sample Group'>
              <button id='Button1' label='My Button Label' image='Image1' size='large' onAction='XXX'/>


Approach 2 - Use the assembly resources to pack your image files.
For this case, add the images to your project and mark them as embedded resource.
Then use the standard .NET mechanism to load those resources at runtime (you'll have to Google a bit).
Finally implement your own LoadImage to return the right embedded resource.

Note that there is some misinformation on the Internet about what the LoadImage implementation needs to return. You can directly return a System.Drawing.Bitmap without any funny converter.

The advantage of this approach is that you're using more a standard mechanism for managing resource, so e.g. localization might be easier.

-Govert



From: exce...@googlegroups.com [exce...@googlegroups.com] on behalf of Edward Qiu [edwa...@gmail.com]
Sent: 15 December 2016 07:47 PM
To: Excel-DNA
Subject: [ExcelDna] Re: Adding image to Excel ribbon button

--
You received this message because you are subscribed to the Google Groups "Excel-DNA" group.
To unsubscribe from this group and stop receiving emails from it, send an email to exceldna+u...@googlegroups.com.
To post to this group, send email to exce...@googlegroups.com.
Visit this group at https://groups.google.com/group/exceldna.
For more options, visit https://groups.google.com/d/optout.

Hagai David

unread,
Apr 6, 2022, 1:46:36 PMApr 6
to Excel-DNA
Govert where should I pose it in my code:
         public virtual object LoadImage(string imageId)
        {
            // Default implementation ...
            return DnaLibrary.GetImage(imageId);
        }
<DnaLibrary ....>
  <ExternalLibrary Path="..."   .... />
  <Image Name="Image1" Path="Image1.png" Pack="true" />
  <Image Name="Image2" Path="Image2.png" Pack="true" />

</DnaLibrary>

and in this exmaple should I create images folder  and in my code click "explore all" and then include my image inside my project ? or its only in VB ? 
If you wrote  a code with image in c# using exceldnaxmlschema I be more than thankful to see it :) 

Hagai


ב-יום חמישי, 15 בדצמבר 2016 בשעה 20:02:48 UTC+2, gov...@icon.co.za כתב/ה:

Govert van Drimmelen

unread,
Apr 6, 2022, 2:49:17 PMApr 6
to exce...@googlegroups.com

--------------------------------------------------

Excel-DNA is now registered on GitHub Sponsors.

Your monthly contribution encourages further development and support.

--------------------------------------------------

 

Hi Hagai,

 

The LoadImage code you show is in the ExcelRibbon base class in the ExcelDna.Integration assembly.

In that old post I was just trying to explain _why_ it works to put

    loadImage='LoadImage'

in the xml markup even if you don’t have such a callback in your ribbon implementation class.

It works because that callback is defined in the ExcelRibbon base class.

 

You can add those image files as items in your project, and then mark then as “Copy to Output Directory: Copy if newer”.

You’ll have to experiment a bit with the directories, but if you look at the build output you’ll see whether the ExcelDnaPack step is picking them up successfully.

 

-Govert

Hagai David

unread,
Apr 7, 2022, 10:09:21 AMApr 7
to Excel-DNA
I tried something like that but i get an error that it doesn't know where the picture located...
I don't do it properly look here: 

In assumed i explored the folder with the pictures into my project what should i add into this xllschema ?:

<CustomUI> <customUI xmlns='http://schemas.microsoft.com/office/2009/07/customui'> <ribbon> <tabs> <tab id='tab1' label='My Tab'> <group id='group1' label='My Group'> <button id='button1' label='Say Hello' img="ExcelLogo" onAction='OnSayHelloPressed'/> </group> </tab> </tabs> </ribbon> </customUI> </CustomUI>

where do I guide it where the picture is located ?  
and shouldn't i use  LoadImage?

ב-יום רביעי, 6 באפריל 2022 בשעה 21:49:17 UTC+3, Govert van Drimmelen כתב/ה:

Govert van Drimmelen

unread,
Apr 7, 2022, 10:25:31 AMApr 7
to exce...@googlegroups.com

Hi Hagai,

 

For the Ribbon support you’ll have to work very carefully through the tutorial (even though it’s VB, it is my best attempt at explaining things) and also you have to look very very carefully at all the documents that are linked from: Tutorials/Fundamentals/RibbonBasics at master · Excel-DNA/Tutorials (github.com) and here: Samples/Ribbon at master · Excel-DNA/Samples (github.com)

 

You’ll see some of those documents explain the allowed tags for the ribbon xml, other bits explain how to set up Excel to show you UI errors, and in other parts I try particular bits like how to add an image (Tutorials/Fundamentals/RibbonBasics at master · Excel-DNA/Tutorials (github.com))

 

In the stuff you show, you use a tag called “img” instead of “image”. As you go through the documents and examples, you’ll see that the tags in the ribbon xml are not normal html tags, and for the image you need to say “image”.

Hagai David

unread,
Apr 7, 2022, 12:58:52 PMApr 7
to Excel-DNA
I add a pictrue I think I mix a few things together, what do I do wrong here, how should I write here for entering a picture

ב-יום חמישי, 7 באפריל 2022 בשעה 17:25:31 UTC+3, Govert van Drimmelen כתב/ה:
ERROR.PNG

Govert van Drimmelen

unread,
Apr 7, 2022, 1:07:43 PMApr 7
to exce...@googlegroups.com

You are mixing parts that need to go into two different places.

 

The bottom part where you have <Image … /> is not part of the xml markup for the ribbon.

It goes into your .dna file, which tells Excel-DNA to pack it into the .xll, and also for the ExcelRibbon.LoadImage implementation to find it again.

Bart Duijndam

unread,
Apr 7, 2022, 9:48:38 PMApr 7
to Excel-DNA
Hi,

Please have a look at this example.

Hagai David

unread,
Apr 8, 2022, 10:28:26 AMApr 8
to Excel-DNA
Worked Thank you ! 

ב-יום שישי, 8 באפריל 2022 בשעה 04:48:38 UTC+3, Bart Duijndam כתב/ה:

Storm

unread,
Apr 26, 2022, 11:44:48 AMApr 26
to Excel-DNA
Hi all,

Has anybody else found with the move to .Net 6 that the code in https://andysprague.com/2017/07/03/custom-icons-in-excel-dna-custom-ribbon/ no longer works?

It makes use of System.Drawing and for Windows only projects System.Drawing.Common now seems to be the preferred library but it just no longer generates the icons on my ribbon. 

I've also tried ImageSharp, SkiaSharp, and Microsoft.Maui.Graphics to no avail.

Kind regards
Storm

Storm

unread,
Apr 26, 2022, 11:54:51 AMApr 26
to Excel-DNA
Or rather, to clarify, using "System.Drawing.Common" throws a 'System.Drawing.Common is not supported on this platform.' exception which is odd... because I'm developing on Windows 10...

Storm

unread,
Apr 28, 2022, 10:47:44 AMApr 28
to Excel-DNA

The plot thickens. Trying a different PC I no longer get the same error. But the icons still don't appear.

Govert van Drimmelen

unread,
Apr 28, 2022, 5:15:53 PMApr 28
to Excel-DNA
Hi Storm,

For me the images still work fine in this setting.

Can you check the following:
* Your project's target framework should be "net6.0-windows" and not just "net6.0".
* Your LoadImage callback should have return type 'object'.
* You can then return an object of type System.Drawing.Image.Bitmap from this function.
* I'm not sure what the format restrictions might be. But this .png file works: ExcelDna/m.png at master · Excel-DNA/ExcelDna (github.com)

Over time we'll update more of the samples to .Net 6, but if you're still stuck write back and I can try to post something more coherent.

-Govert

Storm

unread,
Apr 29, 2022, 7:45:04 AMApr 29
to Excel-DNA
Thanks Govert.

I decided to try "LoadImage" and "GetCustomUI", as in your example, and got it to work. Up till now I've been trying GetImage which hasn't been successful.

Storm

unread,
Apr 29, 2022, 12:44:21 PMApr 29
to Excel-DNA
Okay, I got it to work with 'GetImage' as well.

The crux of the issue is it seems that Net 6 requires the line <Image Name="M" Path="M.png" Pack="true" /> in .dna file.

Govert van Drimmelen

unread,
Apr 29, 2022, 12:46:29 PMApr 29
to exce...@googlegroups.com

Have you perhaps changed the method signature, from returning “Bitmap” to returning “Object”?

 

-Govert

Storm

unread,
May 3, 2022, 6:50:14 AMMay 3
to Excel-DNA

Hi Govert,

Yes I did. I stand corrected you don't need the line <Image Name="M" Path="M.png" Pack="true" /> but it does seem like you now need to copy the resource image to you output folder.
Reply all
Reply to author
Forward
0 new messages