Apply custom icons to Ribbon Menu Controls

In this post we will be focusing on how to apply custom icons of your choice to the controls that you have created in the Ribbon Menu of Outlook.

You can use the imageMso property of the controls and put any of the default provided icons.Microsoft by default provide a vast set of icons for applying on the controls.You can find this list here.

But some times because of client requirements or any other reason we require to place our own custom icon like the company logo or anything. In this post we will be discussing on how to achieve it.

Addin

You have to save the custom icons that you want to show on the controls in your application resources then provide the loadImage attribute to the CustomUI of your ribbon file and then image tag in your individual controls.

<?xml version=”1.0″ encoding=”UTF-8″?>
<customUI xmlns=”http://schemas.microsoft.com/office/2009/07/customui&#8221; onLoad=”Ribbon_Load” loadImage=”GetImage” >
<ribbon>
<tabs>
<tab idMso=”TabMail”>
<group id=”MyPreferenceGroup”
label=”MyMenu”>
<button id=”btnPreferences” size=”large”  onAction=”btnPreferences_click” image=”Preference”/>
</group>
</tab>
<tab idMso=”TabNewMailMessage”>
<group id=”MyAttachGroup” label=”YOYO”>
<button id=”btnAttach” size=”large” onAction=”btnAttach_click” image=”Attach”/>
<button id=”btnSetting” size=”large” onAction=”btnSettings_click” image=”Settings”/>
</group>
</tab>
</tabs>
</ribbon>
</customUI>

Now you can see in the above code we have three buttons having image tags and in the custom UI tag we have loadImage=”GetImage” attribute.

Now on the server side of the ribbon we will implement the GetImage method.

public stdole.IPictureDisp GetImage(string strImageName)
{
try
{
switch (strImageName)
{
case Preference:
return PictureConverter.IconToPictureDisp(Properties.Resources.preferences_settings);
case Attach:
return PictureConverter.IconToPictureDisp(Properties.Resources.Attach);
case Settings:
return PictureConverter.IconToPictureDisp(Properties.Resources.Settings);
default:
return PictureConverter.IconToPictureDisp(Properties.Resources.preferences_settings);
}
}
catch (Exception ex)
{
LogWriter.LogErrorMessage(ex);
return PictureConverter.IconToPictureDisp(Properties.Resources.preferences_settings);
}
}

In the above method you can see based on the input means from which button(out of three) this call is made we are returning the corresponding image.

Now basically the icons stored in application resources will be of .ico extension but we need to convert them to the DISP, for this purpose we create a picture converter as shown below.

internal class PictureConverter : AxHost
{
private PictureConverter() : base(String.Empty) { }

static public stdole.IPictureDisp ImageToPictureDisp(Image image)
{
return (stdole.IPictureDisp)GetIPictureDispFromPicture(image);
}

static public stdole.IPictureDisp IconToPictureDisp(Icon icon)
{
return ImageToPictureDisp(icon.ToBitmap());
}

static public Image PictureDispToImage(stdole.IPictureDisp picture)
{
return GetPictureFromIPicture(picture);
}
}

So this is how one can apply icons of his choice on the Ribbon menu controls. If there are more controls then the cases in the switch statement will increase accordingly.

Hope this helps.

 

Advertisements

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