VSTO & .NET & Excel

March 2, 2009

Using Custom Images in Ribbon UI Solutions

Filed under: .NET & Excel, VSTO & Excel — Dennis M Wallentin @ 5:10 pm

Although the number of built-in images in Excel is large we still may want to use custom images. Because it exist a great number of inexpensive commercial images packages it is not justified to spend our time to create customized images.

So the question is which image format to use? The Ribbon drawing engine is designed to work best with full-color (24-bit) images that also have an alpha channel to control each pixel’s transparency. Since the PNG file format supports an alpha channel and produces relatively small files, it is the best alternative. The preferred sizes of custom images are either 16×16 (small size) or 32×32 (large size).

The first step is to add the selected images to a project’s resources and then create the code to use them. Adding images to the resources is not an issue and the first figure shows the added images for the case.resources1

 

The next screen shot shows the content of the Ribbon.xml file which is also added to the resources of the project:

ribbonxml

The following screen shot shows the class Ribbon.vb:

ribbonclass

The key to the solution is the function GetImage which uses the System.Drawing namespace to return Bitmap objects.

The next screen shot shows ThisAddin class of the VSTO Add-in I use for the case:

thisaddin

 

When running the above code the customized Ribbon UI solutions looks like the following:

running

Looking on the solution it reveals nothing extraordinary in order to use custom images in Ribbon UI solutions.  

Kind regards,
Dennis

(If we only have access to images in the GIF or BMP or JPEG file format then we can apply the same approach as with the PNG images.)

Advertisements

12 Comments »

  1. Hi Dennis,
    Are there any advantages of doing it manually over using the designer?

    Comment by Ross — March 3, 2009 @ 1:54 pm

    • Ross,
      I like to have control and therefore I usually don’t use designers or wizards. In addition, no Ribbon XML is generated to handle the custom images so that’s is no advantage compared with the manually approach.

      Kind regards,
      Dennis

      Comment by Dennis Wallentin — March 3, 2009 @ 8:30 pm

  2. Ah, good point though about the drag-and-drop Ribbon customizer in VSTO. I don’t use VSTO myself, so I forgot about it! (And what a beautiful thing it is, btw.)

    Your “manual” approach, Dennis, is also a nice, clean example for .NET guys like me that don’t make use of VSTO.

    Superb article Dennis,
    Mike

    Comment by Mike Rosenblum — March 11, 2009 @ 10:42 pm

    • Hey Mike 🙂

      Thanks for Your kind words. The Visual Ribbon Designer is good but I expect that it will be improved in the next version (4.0).

      Kind regards,
      Dennis

      Comment by Dennis Wallentin — March 12, 2009 @ 12:35 am

  3. Dear Dennis,

    Thanks so much for your clear and simple example.

    Frits

    Comment by Frits Egmond — March 13, 2009 @ 7:37 pm

  4. Hi, I use ribbon xml and I dont know how I can use control programmatically.
    Ex: I want to enable/disable button that has id = XBC.
    In Ribbon Designer I can do this easily but with ribbon XML. I cannot do that.

    Comment by Tai — July 31, 2009 @ 9:46 am

  5. Hi Dennis,

    Nice article, most helpful. I do have one question though. How should I handle having multiple image sizes for the ribbon bar buttons? For example, if I create a large ribbon bar button (therefore 32×32) and the user chooses to place the button onto the Quick Access toolbar (the little area in the title bar in word/excel) this will, by default, show the button with a 16×16 image, however as this is a poorly resized version of the 32×32 image and so it looks terrible! Is there any way to specify multiple icon sizes for the button?

    Many thanks,

    Ade.

    Comment by ade — May 17, 2011 @ 10:26 am

    • Hi,

      I cannot see that we can make a dynamic image viewing. In other words we are forced to use 16×16 or 32×32. Most images can be viewed in both sizes without losing their resolution but custom images, especially older, may only have one size.

      Now that I come to think of it it’s quite remarkable that we still are so limited.

      Kind regards,
      Dennis

      Comment by Dennis Wallentin — May 17, 2011 @ 1:08 pm

  6. Hi Denis,

    I initially used VSTO to create the addin and it worked fine. Then I realized that I needed to use custom images per the design and the VSTO way of adding images did not suffice. So I generated the XML version of the VSTO ribbon with the accomodating cs file. I followed your steps above, and now my addin won’t show up at all. Any tips?

    Comment by Oliver — June 9, 2011 @ 9:49 pm

    • Hi,
      Whenever I face a situation like Yours I go back and create a very simpel solution for testing.

      Why it doesn’t shows up can be related to several things:
      The add-in has been “blacklisted” by Excel due to issues running it.
      The add-in is loaded but the the XML-file is not read. If You run Excel 2007 and later You can turn on a setting in Excel that tells You if Excel has any issues reading the XML-file. The setting is named “Show add-in’s user interface error”.

      Kind regards,
      Dennis

      Comment by Dennis Wallentin — June 10, 2011 @ 3:23 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: