Adding image to Excel ribbon button

[Edward Qiu]

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]

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]

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]

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]

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

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

To view this discussion on the web visit https://groups.google.com/d/msgid/exceldna/b21cfcc1-a297-45ba-bd99-999911d28ec4n%40googlegroups.com.

[Hagai David]

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]

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”.

To view this discussion on the web visit https://groups.google.com/d/msgid/exceldna/7d26db07-9211-4f08-a600-2791337a46can%40googlegroups.com.

[Hagai David]

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 כתב/ה:

[Govert van Drimmelen]

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.

To view this discussion on the web visit https://groups.google.com/d/msgid/exceldna/c2b59da1-55ed-4905-9ac0-edd30436396an%40googlegroups.com.

[Bart Duijndam]

Hi,

Please have a look at this example.

https://andysprague.com/2017/07/03/custom-icons-in-excel-dna-custom-ribbon/
Cheers Bart

[Hagai David]

Worked Thank you ! 

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

[Storm]

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]

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]

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

[Govert van Drimmelen]

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]

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]

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]

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

 

-Govert

To view this discussion on the web visit https://groups.google.com/d/msgid/exceldna/7538e680-0d5c-47b8-8007-f10c6a75c12dn%40googlegroups.com.

[Storm]

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.

[turhan]

is it possible to make the sdk style project file write the image paths into the dynamically created dna file?