none
Setting the Ribbon XML Image Attribute seems to have no effect RRS feed

  • Question

  • I'm working on an Excel 2010 Template.  I've created a Custom Ribbon control.  I need to access built-in functions so the designer is out.  I'd like to specify images from the Resources.resx the way I did in the designer but my attempts to set the image attribute have had no effect.  I've tried the following for an image in <Project>\Resources\Image.png (also Properties.Resources.Image):

    • Image
    • Image.png
    • Resources\Image
    • Resources\Image.png
    • Resources.Image
    • Properties.Resources.Image

    What is a valid value for the image attribute?

    Saturday, December 10, 2011 11:44 AM

Answers

  • Here's how I do it:

    <?xml version="1.0" encoding="UTF-8"?>
    <customUI loadImage="GetItemIcon" xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">
      <ribbon>
        <tabs>
          <tab id="LGPTab" label="LGPro Plus">
            <group id="LGPstart" label="Start" image="LGPro7.bmp">
              <menu id="NewDoc" supertip="Start a new Leader Guide or Participant Guide document." label="New" showImage="false">
                <button id="ClkNewLG" image="LGPro7.bmp" onAction="ClkItemIcon" label="Leader Guide" supertip="Create a new Leader Guide Pro formatted document."  />
                <button id="ClkNewPG" image="PGPro7.bmp" onAction="ClkItemIcon" label="Participant Guide" supertip="Create a new ParticipantGuide Pro formatted document."  />
                <button id="ClkNewEG" image="LGPro7.bmp" onAction="ClkItemIcon" label="eLeader Formatted Guide" supertip="Create a new Leader Guide in the eLeader format for web-based meetings."  />
              </menu>
    

    Note on the "loadImage=" command on the customUI line above. This is the reference to my image load callback.  Also note the the image name in the button id lines can be any name you want, it does not have to be the exact file name from your resource folder.

    My image load callback looks like this:

        Public Function GetItemIcon(ByVal imageName As String) As System.Drawing.Bitmap
    
            Select Case imageName
                Case "zAPPsHelp"
                    Return My.Resources.zAPPsHelp
                Case "Agenda.bmp"
                    Return My.Resources.Agenda
                Case "Assessment.bmp"
                    Return My.Resources.Assessment
    
    

    Finally, if want to use an MSO image I change the xml as per this sample.

              <menu id="Librarian" supertip="LGPro Librarian for unique controls of the Leader Guide and its Modules and Lessons." label="Librarian" showImage="false">
                <button id="ClkLabel1" onAction="ClkItemIcon" label="In the current document ..." showImage="false"/>
                <button id="ClkInsert" imageMso="ImportSavedImports" onAction="ClkItemIcon" label="Insert Archived Modules or Lessons" showImage="false"/>
                <button id="ClkDelete" imageMso="Delete" onAction="ClkItemIcon" label="Delete Modules or Lessons" showImage="false"/>
                <button id="ClkReorder" imageMso="AdpDiagramArrangeTables" onAction="ClkItemIcon" label="Reorder Modules or Lessons" showImage="false"/>
                <button id="ClkArchiveML" imageMso="CopyToFolder" onAction="ClkItemIcon" label="Archive Modules or Lessons" showImage="false"/>
    

    Hope this helps

     

     

     

     

     


    Kind Regards, Rich ... http://greatcirclelearning.com
    • Marked as answer by coren1 Tuesday, December 13, 2011 6:52 PM
    Tuesday, December 13, 2011 1:36 PM
  • @Rich: Thanks for answering my question.

    Here is how I implemented the information...

    Ribbon.xml:

    <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" loadImage="LoadRibbonImages" onLoad="OnRibbonLoad">
      <!-- ... -->
    </customUI>
    

    Ribbon.cs:

    /// <summary>
    /// Loads the ribbon images.
    /// </summary>
    /// <param name="imageName">Name of the image.</param>
    /// <returns>The image from the resource collection if one exists; otherwise null.</returns>
    public Bitmap LoadRibbonImages(string imageName)
    {
        return (Bitmap)Properties.Resources.ResourceManager.GetObject(imageName);
    }

    This is based on a 1:1 association between the image attribute value in the xml file and the name of the image in the resources collection.


    Coren
    • Edited by coren1 Tuesday, December 13, 2011 7:01 PM added code
    • Marked as answer by coren1 Tuesday, December 13, 2011 7:02 PM
    Tuesday, December 13, 2011 6:54 PM

All replies

  • Hi coren1,

     

    Thanks for posting in the MSDN Forum.

     

    Do you want to use the custom image on the ribbon control components via Ribbon Xml?

     

    If it is, please follow these steps:

     

    1.         Right click on the solution explorer.

    2.         Click “Properties” menu item.

    3.         Click “Resources” tab on the Project Properties window.

    4.         Add the image resource.

    5.         Add this snippet into to you Ribbon1.cs.

    6.         Use GetImage method in the Ribbon Xlm

     

    This snippet is a sample for it. I hope it can help you.

    <?xml version="1.0" encoding="UTF-8"?>
    <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad=
    "Ribbon_Load">
      <ribbon>
        <tabs>
          <tab idMso="TabAddIns">
            <group id="MyGroup"
                   label="ExcelTemplate1">
              <button id="Test1" label ="Test1" getImage ="GetImage" size ="large"/>
            </group>
          </tab>
        </tabs>
      </ribbon>
    </customUI>
    

     

            public Bitmap GetImage(Office.IRibbonControl Control)
            {
                switch(Control.Id)
                {
                    case "Test1":
                        return new Bitmap(Properties.Resources.Image1);
                    default :
                        return new Bitmap(Properties.Resources.Image1);
                }
            }
    

     

    (Visual Stuido 2010,Office 2010)

     

    Have a good day,

     

    Tom


    Tom Xu [MSFT]
    MSDN Community Support | Feedback to us
    Monday, December 12, 2011 3:56 AM
    Moderator
  • Yes, I'm trying to place a custom image on a Ribbon control via Ribbon XML. Your response is about the getImage attribute.

    I'll repeat my question since it wasn't answered: What is a valid value for the "image" attribute or in other words, what is an example of the correct use of this attribute.  

    Consider the following from the MSDN reference:

    http://msdn.microsoft.com/en-us/library/microsoft.office.tools.ribbon.ribbonbutton(v=VS.100).aspx states the following options for displaying an image on a RibbonButton instance:

    There are three ways to display an image:

    • Use the Image property. This property gives the most control.

    • Set OfficeImageId to the ID of a built-in Microsoft Office image that you want to display as the icon for the button.

    • Use the ImageName property along with the LoadImage event. This property gives some performance benefits.

    I'm after option 1.  The example the link in the documentation does not show how to use the attribute from Ribbon XML.


    Coren

    • Edited by coren1 Monday, December 12, 2011 5:53 PM greater detail
    Monday, December 12, 2011 4:47 PM
  • Option 3 also does not work for Ribbon XML and of course options 2 is out since I need a custom image.
    Coren
    Monday, December 12, 2011 7:27 PM
  • Clearly these only apply to the Ribbon Designer.  I used something similar to what you suggested by setting the tag attribute to this image name and using the tag to pull the image from the resource manager i.e. 

    (Bitmap)Properties.Resources.ResourceManager.GetObject(control.Tag)



    Coren
    Monday, December 12, 2011 8:44 PM
  • Here's how I do it:

    <?xml version="1.0" encoding="UTF-8"?>
    <customUI loadImage="GetItemIcon" xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">
      <ribbon>
        <tabs>
          <tab id="LGPTab" label="LGPro Plus">
            <group id="LGPstart" label="Start" image="LGPro7.bmp">
              <menu id="NewDoc" supertip="Start a new Leader Guide or Participant Guide document." label="New" showImage="false">
                <button id="ClkNewLG" image="LGPro7.bmp" onAction="ClkItemIcon" label="Leader Guide" supertip="Create a new Leader Guide Pro formatted document."  />
                <button id="ClkNewPG" image="PGPro7.bmp" onAction="ClkItemIcon" label="Participant Guide" supertip="Create a new ParticipantGuide Pro formatted document."  />
                <button id="ClkNewEG" image="LGPro7.bmp" onAction="ClkItemIcon" label="eLeader Formatted Guide" supertip="Create a new Leader Guide in the eLeader format for web-based meetings."  />
              </menu>
    

    Note on the "loadImage=" command on the customUI line above. This is the reference to my image load callback.  Also note the the image name in the button id lines can be any name you want, it does not have to be the exact file name from your resource folder.

    My image load callback looks like this:

        Public Function GetItemIcon(ByVal imageName As String) As System.Drawing.Bitmap
    
            Select Case imageName
                Case "zAPPsHelp"
                    Return My.Resources.zAPPsHelp
                Case "Agenda.bmp"
                    Return My.Resources.Agenda
                Case "Assessment.bmp"
                    Return My.Resources.Assessment
    
    

    Finally, if want to use an MSO image I change the xml as per this sample.

              <menu id="Librarian" supertip="LGPro Librarian for unique controls of the Leader Guide and its Modules and Lessons." label="Librarian" showImage="false">
                <button id="ClkLabel1" onAction="ClkItemIcon" label="In the current document ..." showImage="false"/>
                <button id="ClkInsert" imageMso="ImportSavedImports" onAction="ClkItemIcon" label="Insert Archived Modules or Lessons" showImage="false"/>
                <button id="ClkDelete" imageMso="Delete" onAction="ClkItemIcon" label="Delete Modules or Lessons" showImage="false"/>
                <button id="ClkReorder" imageMso="AdpDiagramArrangeTables" onAction="ClkItemIcon" label="Reorder Modules or Lessons" showImage="false"/>
                <button id="ClkArchiveML" imageMso="CopyToFolder" onAction="ClkItemIcon" label="Archive Modules or Lessons" showImage="false"/>
    

    Hope this helps

     

     

     

     

     


    Kind Regards, Rich ... http://greatcirclelearning.com
    • Marked as answer by coren1 Tuesday, December 13, 2011 6:52 PM
    Tuesday, December 13, 2011 1:36 PM
  • @Rich: Thanks for answering my question.

    Here is how I implemented the information...

    Ribbon.xml:

    <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" loadImage="LoadRibbonImages" onLoad="OnRibbonLoad">
      <!-- ... -->
    </customUI>
    

    Ribbon.cs:

    /// <summary>
    /// Loads the ribbon images.
    /// </summary>
    /// <param name="imageName">Name of the image.</param>
    /// <returns>The image from the resource collection if one exists; otherwise null.</returns>
    public Bitmap LoadRibbonImages(string imageName)
    {
        return (Bitmap)Properties.Resources.ResourceManager.GetObject(imageName);
    }

    This is based on a 1:1 association between the image attribute value in the xml file and the name of the image in the resources collection.


    Coren
    • Edited by coren1 Tuesday, December 13, 2011 7:01 PM added code
    • Marked as answer by coren1 Tuesday, December 13, 2011 7:02 PM
    Tuesday, December 13, 2011 6:54 PM
  • @Rich: In my case your suggestion did not work until I removed the file extension ".bmp" from the image attribute. E.g., instead of  image="LGPro7.bmp" I used image="LGPro7" as shown below:

    <button id="ClkNewLG" image="LGPro7" onAction="ClkItemIcon" label="Leader Guide" supertip="Create a new Leader Guide Pro formatted document."  />

    I'm using WORD 2010 and VSTO 2015. Thanks..Nam


    • Edited by namwam Tuesday, April 19, 2016 4:07 PM added additional content
    Tuesday, April 12, 2016 3:35 AM
  • @namwam The image filename is not always the same as the image name in your Project Properties Resources. In your case you most likely have the LGPro7 in your Resources. 
    Sunday, November 20, 2016 3:55 PM