How can I add the images to button using the ribbon xml?

Question

How to add the custom images to the ribbon button in the tab and the context menu.

I tried the link Adding Image to ribbon button but no luck :-(. I am designing the addin for Excel. I added this in the header.

    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"  onLoad="Ribbon_Load"   loadImage="Ribbon_LoadImage"> 
    <button id="btn2d" keytip="L" screentip="2D Visualization" supertip="2D Part Visualization" label="2D" size="large"/>
    <contextMenu idMso="ContextMenuCell">
    <button id="btn1" label="my label"/>
    </customUI>

the code snippet

public Bitmap Ribbon_LoadImage(IRibbonControl control)
    {
        switch (control.Id)
        {
            case "btn2": return new Bitmap(Properties.Resources.btn1);
            case "btn3": return new Bitmap(Properties.Resources.btn2);
            case "btn4": return new Bitmap(Properties.Resources.btn3);
            case "btn5": return new Bitmap(Properties.Resources.Filter);
            case "btnOpt6": return new Bitmap(Properties.Resources.Settings);
            case "btnInform7": return new Bitmap(Properties.Resources.Vis);
            case "btnHelpPage": return new Bitmap(Properties.Resources.Help);
        }
        return null;
    }

Please help me in this. I am using .net 4.0 c# VSTO excel addin for Office 2010.

score 37 · Accepted Answer · answered Feb 04 '14 at 10:06

37

You have to use getImage property for each button and the callback should return bitmap.

In Ribbon.xml

<button id="btnLogo" getImage="imageSuper_GetImage" size="large" />

Ribbon.cs

public Bitmap imageSuper_GetImage(IRibbonControl control)
        {
            return Resources.super_logo;
        }

answered Feb 04 '14 at 10:06

Kiru

3,489
1
25
46

This is how I do it too. But any reference on how to use `loadImage` in `customUI`. I got an example which shows it in VBA but couldn't get an example for C#. – skjoshi Feb 21 '15 at 12:43
Do you mean how to call your callback loadImage in your ribbon? Use the getImage as shown in sample code above in answer – Kiru Feb 23 '15 at 10:17
1

I mean do you know why loadImage is there? I could never make it work. I understand and use the getImage as of now. – skjoshi Feb 23 '15 at 17:12
4

I think the idea is that you use `loadImage` to specify the loading method only once, and you use `getImage` to specify any number of loading methods. – Chris Aug 26 '15 at 19:05
1

@Sanju `Chris` is right. What `Chris` is referencing to and what you seem to be looking for is [described here by MSDN with an example](https://msdn.microsoft.com/en-us/library/aa338202.aspx#OfficeCustomizingRibbonUIforDevelopers_Images). Hope this helps. – nam Apr 09 '16 at 17:52
1

But how to I place the super_logo into the Resources? – Daniel Feb 24 '17 at 06:58
3

@Daniel In your Properties folder in your project double click the Resources.resx file. Now just drag an image onto that window. It will automatically switch to the Images view of that resource file and add a reference and it will also add the image to the Resources folder if the project does not contain it yet. – Ron Deijkers Mar 06 '18 at 10:06

score 3 · Answer 2 · edited Jan 02 '21 at 08:19

This is an old post, but I figured I'd add my answer in case anybody is still looking for an example (like I was)...

In Ribbon.xml, loadImage="GetImage" references the callback in Ribbon.cs that will get the image from the resources. In my example below, I am using image="Report_256x" to trigger the callback.

<?xml version="1.0" encoding="UTF-8"?>
<customUI onLoad="Ribbon_Load" xmlns="http://schemas.microsoft.com/office/2009/07/customui" loadImage="GetImage">
    <ribbon>
        <tabs>
            <tab idMso="TabMail">
                <group id="group1" label="Priority Tracker">
                    <button id="btnWIPReport" onAction="btnWIPReport_Click" label="WIP Report" size="large" image="Report_256x"/>
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

The callback that I use in my example looks like this...

public System.Drawing.Image GetImage(string ImageName)
{
    return (System.Drawing.Image)Properties.Resources.ResourceManager.GetObject(ImageName);
}

Is it now possible to use vector graphics here as well (e.g. *.svg)? The default office icons appear to be in vector format but I don't find any information how to use custom vector icons in the ribbon — chriscode, Nov 21 '21 at 23:01

score 1 · Answer 3 · edited Oct 01 '20 at 07:43

1

You Can have the images from LoadImage Function.

You need to write as below:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" 
  loadImage="GetImage">

public stdole.IPictureDisp GetImage(string imageName){
  return
    PictureConverter.IconToPictureDisp(Properties.Resources.MyIcon);
}

edited Oct 01 '20 at 07:43

Dilan

2,610
7
23
33

answered Oct 01 '20 at 03:50

user14371384

11
1

How can I add the images to button using the ribbon xml?

3 Answers3

Linked