none
Customizing image in a costumer button in word ribbon RRS feed

  • Question

  • Hi all. I am building a word application level addin. The problem is that I want that the buttons I create in the ribbon to show specific images. I made these bitmaps part of the resources, the addin runs ok but for some reason the bitmaps do not show in the buttons.

    Here is my XML file:

     

    <?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" label="myTab">
            <group id="myGroup" label="myGroup">
              <button id="btn1" label="Button" screentip="Button 1" size="large"
                      image="the path to the icon" 
                      onAction="OnBtn1" supertip="a tip" showImage="true"/>
           </group>
          </tab>
        </tabs>
      </ribbon>
    </customUI>

    The icon is a 16x16 bitmap with 16 colors. I can assure that the icon's path is a valid one. But for some reason when I run the addin the icon doesn't show.

    Can anyone help me? Thanks.

    Jorge


    Jorge Teixeira

    Tuesday, October 14, 2014 2:18 PM

Answers

  • Hi Jorge,

    Your xml needs to specify loadImage and in this example "GetItemIcon" is my callback.

    <customUI loadImage="GetItemIcon" xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">
    

    Your ribbon button then needs to reference the image name that is held in your Resources folder.

    <button id="ClkNewDoc" image="PROGreen" getLabel="GetItemLabel" onAction="ClkItemIcon" getVisible="GetItemVisible" getSupertip="GetItemSuperTip" />
    

    Then your callback for the images can look like this:

        Public Function GetItemIcon(ByVal imageName As String) As System.Drawing.Bitmap
            Return My.Resources.ResourceManager.GetObject(imageName)
        End Function
    
    Hope this helps


    Kind Regards, Rich ... http://greatcirclelearning.com

    Tuesday, October 14, 2014 4:55 PM

All replies

  • Hi Jorge,

    Your xml needs to specify loadImage and in this example "GetItemIcon" is my callback.

    <customUI loadImage="GetItemIcon" xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">
    

    Your ribbon button then needs to reference the image name that is held in your Resources folder.

    <button id="ClkNewDoc" image="PROGreen" getLabel="GetItemLabel" onAction="ClkItemIcon" getVisible="GetItemVisible" getSupertip="GetItemSuperTip" />
    

    Then your callback for the images can look like this:

        Public Function GetItemIcon(ByVal imageName As String) As System.Drawing.Bitmap
            Return My.Resources.ResourceManager.GetObject(imageName)
        End Function
    
    Hope this helps


    Kind Regards, Rich ... http://greatcirclelearning.com

    Tuesday, October 14, 2014 4:55 PM
  • Thank you, Rich.

    I tried what you advised but still with no results. I put the GetItemIcon Function together with the other callbacks in the ribbon.vb file. I inserted the loadImage="GetItemIcon" directive and in my button, image is set to myIcon just as it appears in my resources folder. Surely I am missing some detail. Can you see what is missing?

    Something I did not mention before: I must load several images into the ribbon, because myTab includes 3 groups with several user-defined buttons. I do not know if loadImage="GetImageIcon" will load every icon. Must they have a 16x16 format with 16 colors?

    Thanks,

    Jorge


    Jorge Teixeira

    Tuesday, October 14, 2014 6:17 PM
  • Hi Jorge,

    Here's another example from a VSTO add-in of mine running worldwide.

    <?xml version="1.0" encoding="UTF-8"?>
    <customUI loadImage="GetItemIcon" xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">
      <commands>
        <command idMso="FileSaveAs" onAction="ClkSaveAs" />
        <command idMso="FileSave" onAction="ClkSave"/>
      </commands>
      <ribbon>
        <tabs>
          <tab id="LGPTab" getLabel="GetLGPLabel">
            <group id="Group1" getLabel="GetItemLabel" image="LGProVista">
              <button id="ClkNewDoc" image="PRORed" getLabel="GetItemLabel" onAction="ClkItemIcon" getVisible="GetItemVisible" getSupertip="GetItemSuperTip" />
              <button id="ClkOpenDoc" image="PRORed" getLabel="GetItemLabel" onAction="ClkItemIcon" getVisible="GetItemVisible" getSupertip="GetItemSuperTip" />
              <button id="ClkAttachDoc" image="PRORed" getLabel="GetItemLabel" onAction="ClkItemIcon" getVisible="GetItemVisible" getSupertip="GetItemSuperTip" />
            </group>
            <group id="Group2" getLabel="GetItemLabel" image="LGPModuleIcon">
              <button id="ClkNewModule" image="LGPModuleIcon" getLabel="GetItemLabel" onAction="ClkItemIcon" getSupertip="GetItemSuperTip"  />
              <button id="ClkNewLesson" image="LGPLessonIcon" getLabel="GetItemLabel" onAction="ClkItemIcon" getSupertip="GetItemSuperTip"  />
              <button id="ClkContinueLesson" image="LGPLessonContinueIcon" getLabel="GetItemLabel" onAction="ClkItemIcon" getSupertip="GetItemSuperTip"  />
              <button id="ClkNewBreak" image="LGPNewBreakIcon" getLabel="GetItemLabel" onAction="ClkItemIcon" getSupertip="GetItemSuperTip"  showLabel="false" />
              <menu id="Librarian" getLabel="GetItemLabel" getSupertip="GetItemSuperTip"  showImage="false">
                <button id="ClkLabel1" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkInsert" imageMso="ImportSavedImports" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkDelete" imageMso="Delete" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkReorder" imageMso="AdpDiagramArrangeTables" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkArchiveML" imageMso="CopyToFolder" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <menuSeparator id="Separator929" />
                <button id="ClkLabel2" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkCreateMaster" imageMso="FilePublishToSharePoint" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkUpdateMaster" imageMso="UpgradeWorkbook" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkRemoveMaster" imageMso="Delete" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
                <button id="ClkAssocDoc" imageMso="AccessRelinkLists" getLabel="GetItemLabel" onAction="ClkItemIcon" showImage="false"/>
              </menu>
            </group>
    

    The callback is a bit different in this one because we allow the end user to supply their own images based on specs we give them.

        Public Function GetItemIcon(ByVal imageName As String) As System.Drawing.Bitmap
            Try
                If Not System.IO.Directory.Exists(ThisAddIn.LGPRibbon) Then
                    Return My.Resources.ResourceManager.GetObject(imageName)
                End If
                If System.IO.File.Exists(ThisAddIn.LGPRibbon & imageName & ".png") Then
                    Return New System.Drawing.Bitmap(ThisAddIn.LGPRibbon & imageName & ".png")
                Else
                    Return My.Resources.ResourceManager.GetObject(imageName)
                End If
            Catch ex As Exception
                Return My.Resources.ResourceManager.GetObject(imageName)
            End Try
        End Function
    

    I don't use BMP formats, we use PNG with transparency. Most are 32x32 in size and they are RGB/A 32-bit color. I start from an ICO format and save it to the transparent PNG using an icon maker software.

    If you are using BMP formats then they must be 32-bit and not 24-bit formats. 24 is only for Macs.


    Kind Regards, Rich ... http://greatcirclelearning.com

    Tuesday, October 14, 2014 6:43 PM
  • Thank you Rich for the example above. But still I do not know what is missing in my code ... so my problem remains unsolved. If you could tell me what I am not doing or doing wrong, I would be very thankful...

    Jorge


    Jorge Teixeira

    Wednesday, October 15, 2014 12:32 AM
  • My Ribbon.xml file looks like this now:

    <?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 idMso="TabAddIns" label="myTab">
            <group id="myGroup" label="myGroup">
              <button id="btn1" label="Button" screentip="Button 1" size="large"
                      image="name of the icon in resource file" 
                      onAction="OnBtn1" supertip="a tip" showImage="true"/>
           </group>
          </tab>
        </tabs>
      </ribbon>
    </customUI>

    As I said before: the addIn works fine but the problem is that Word does not load button image.


    Jorge Teixeira

    Wednesday, October 15, 2014 12:37 AM
  • If the name of your image file is not "name of the icon in resource file" then that is your problem,

    Do not waste my time showing me pseudo code and asking for help.

    Good luck... I will respond no more.


    Kind Regards, Rich ... http://greatcirclelearning.com

    Wednesday, October 15, 2014 1:33 AM
  • Rich,

    The name of my image file is really the "name of the icon in resource file".

    And Rich: you do not need to be rude. If I am writing pseudo code you simply should not have bothered

    answering me. So, you are wasting your time, not I.

    Jorge


    Jorge Teixeira

    Wednesday, October 15, 2014 4:12 AM
  • A visual studio created solution does not accept blank spaces in the file name. Blanks are converted to underscores and if you are to reference these image files you have to so using the exact name as the solution expects it to be.

    Verify this by opening the image category in your resources panel.

    Note also that the name does not include a full path or extension. It is simply the file name.


    Kind Regards, Rich ... http://greatcirclelearning.com

    Wednesday, October 15, 2014 11:52 AM
  • There are no blank spaces. There are 3 icons in Resources folder:

    "Robots.bmp", "Angels.bmp" and "Demons.bmp". Is XML file I set in btn1, image="Robots", in btn2, image="Angels" and in btn3, image="Demons".

    In Project properties, in Resources they are named Robots, Angels and Demos as expected. I was asked for a value. I set values 1, 2 and 3. Is the problem here?

    Jorge


    Jorge Teixeira

    Thursday, October 16, 2014 3:54 AM
  • If the image you want from your resource file is called "Robots" in the resource file, then your XML code must be like this:

    <button id="btn1" label="Button" screentip="Button 1" size="large" image="Robots" onAction="OnBtn1" supertip="a tip" showImage="true"/>

    Your callback to pickup the "Robots" image from the resource file would look like this:

        Public Function GetItemIcon(ByVal imageName As String) As System.Drawing.Bitmap
            Return My.Resources.ResourceManager.GetObject(imageName)
        End Function
    As for the values you were prompted for in the Project Properties, I do not know, because I don't know what you clicked.


    Kind Regards, Rich ... http://greatcirclelearning.com

    Thursday, October 16, 2014 11:30 AM
  • Well ... it does not work. I put the GetItemIcon function in the Ribbon Callback section of the *.vb file.

    I think that is the right place ... I cannot understand what is missing.

    Thanks

    Jorge


    Jorge Teixeira

    Sunday, October 19, 2014 12:51 AM
  • Hi Jorge,

    I read your post and Rich has been very helpful so far. Are you willing to try a different approach? I wrote a blogpost about what you are trying to accomplish using the CustomUI editor. Take a peek maybe it might help you.

    http://wp.me/p1BOMN-eL

    The customui editor can be downloaded at www.openxmldeveloper.org (no charge). You open your Word document in the CustomUI editor, you see your xml and after that you can follow the steps as i describe them in the blogpost.


    Maurice

    Sunday, October 19, 2014 9:42 PM
  • Hi Rich and Maurice!

    The question is solved now and the suggestions made by Rich were perfectly accurate. In fact things did not work out well at first, because I was loading the icons into the application in an incorrect way. I am sorry to have taken so long to notice that.

    Anyway, thank you Maurice for your approach.

    Jorge


    Jorge Teixeira

    Monday, October 20, 2014 5:42 AM