Adding custom Ribbon menu in MS Office using C#

- Mohankumar Devasigamani

Hope readers might have gone through my previous post which helps you to better understand on how to create MS Office add-ins.

    Note: As per my previous blog post, I sticked on MS Visual Studio 2010 & MS Office 2010.

Creating the add-in project
Click here to refer my pervious blog post.

Adding Reference to the project

• Open MS Office add-in project (CSSSampleAddin)
• Right-click on Reference folder in add-in project ->Go to Add Reference
• Add Reference window will appear.

         Click COM tab. Select Microsoft Office 14.0 Object Library, Microsoft Office Core and then click OK

Creating the Ribbon menu Customization XML File

• Right-click on project -> Add -> New Item
• Select XML file and name it as RibbonMenu.xml ->Click Add
• Edit and add the below XML content to the XML file.

<?xml version="1.0" encoding="utf-8" ?>

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

<ribbon>

  <tabs>

   <tab id="tab1" label="CSS Corp Demo">

    <group id="group1" label="CSS Group">

     <menu id="menu1" label="Drop Down" itemSize="large" 

               getScreentip="GetScreenTip" supertip="This is a super tip   

               for the menu." image="star">

      <button id="uxSearchButton" image="search"   

      getDescription="GetDescription"

       </menu>

   </group>

  </tab>

</tabs>

</ribbon>

</customUI>

• Save the file.

Set the RibbonMenu.xml as embedded resource

• Right-click on the RibbonMenu.xml file -> Properties
• Change Build Action property to Embedded Resource
• Go to CSSSampleAddin project properties -> Select Resource tab
• Select file option, and drag and drop the xml file -> Save the properties

Start writing the code

Open Connect.cs and add below lines in top of the class file

using Microsoft.Office.Core;

using Word = Microsoft.Office.Interop.Word;

Create instance of Word and implement the IRibbonExtensibility interface. Edit / Modify the existing code as below

private Word.Application applicationObject;

Edit /Modify the first line of OnConnection() method as below

applicationObject = (Word.Application)application;

Inherited the IRibbonExtensibility in Connect class

public class Connect : Object, Extensibility.IDTExtensibility2, IRibbonExtensibility

Right-click on implemented interface and click Implement Interface, and then click Implement Interface Explicitly that will add IRibbonExtensibility.GetCustomUI method. Add the below line GetCustimUI method.

return Properties.Resources.Ribbon;

Now almost your demo add-in is ready for test. Before testing add the image for custom ribbon menu.

Adding your own image file

• Right-click on project -> Add -> New Item
• Select Bitmap file ->Browse your image -> Click Add
• To embed the image, please follow the same steps that we did for XML file.

For example here i have added two images named search and star. You can see those two images below .

Add the below method in connect class

public IPictureDisp GetImage(string imageName)

{

 IPictureDisp dispImage = null;

 switch (imageName)

 {

  case "search":

  dispImage = PictureConverter.ImageToPictureDisp

              (Properties.Resources.search);

  break;

  case "star":

  dispImage = PictureConverter.ImageToPictureDisp

              (Properties.Resources.star);

  break;

 }

return dispImage;

}

Include the below class in the same file.

internal class PictureConverter : AxHost

{

 private PictureConverter() : base(String.Empty) { }

 static public IPictureDisp ImageToPictureDisp(Image image)

 {

    return (IPictureDisp)GetIPictureDispFromPicture(image);

 }

 static public IPictureDisp IconToPictureDisp(Icon icon)

 {

   return ImageToPictureDisp(icon.ToBitmap());

 }

 static public Image PictureDispToImage(IPictureDisp picture)

 {

   return GetPictureFromIPicture(picture);

 }

}

GetImage method will be already referred from RibbonMenu.xml file.

          Right time to test demo project. Build the CSSSampleAddin project. Go to project properties  Select Debug and set Start external program to Word, 

by default word exe located in C:\Program Files\Microsoft Office\Office14\WINWORD.EXE

Run the add-in project, you will be able to see the customized Ribbon menu.

Write the method to handle click event of Search button.

public void Search(Microsoft.Office.Core.IRibbonControl control)

{

MessageBox.Show("User has clicked Search button.", "CSS Corp Demo");

}

I hope this post helped you to know how ribbon menu can be added to Microsoft Word. Similarly the same process can be used to add ribbon menu to any of the Microsoft Word Office tools (Excel,Access etc.) As I mentioned in my previous blog. In Further you can setup project to create msi /exe which will help you to create add-in in other machine.

Note: Await and stay tuned for my next post "List to be checked out while MS Office add-ins are not getting loaded".

Create your own MS Office add-ins using .Net

-Mohankumar Deivasigamani

Introduction

      Here I am sharing the steps that will guide you to create a simple MS Office add-in using Microsoft Visual Studio. For further explanation lets take Visual Studio 2010 and MS Office 2010.

Prerequisites

You must have the following items to be installed

1. MS Visual Studio 2010 (You can also use 2005 / 2008)
2. Microsoft .Net Framework 3 (minimum 2.0 up to 4.5)
3. Office PIA (Primary Interop Assemblies)

Start creating add-ins

• Open MS Visual Studio 2010 > Select New Project > Other Project Types > Extensibility

• Now choose Shared Add-in project Template as shown above.
• Enter the project name and solution name in the appropriate fields and click ok.

Configuration Wizard

Wizard screen will guide you following steps

1. Press Next in the welcome add-in wizard
2. Select the programming Language which you want to develop. (C#)
3. Select the application host (Word / Visio / Publisher / Project / Power Point /Outlook / Info Page /Excel /Access)
4. Enter name and description of your add-in
5. Choose Add-in option
6. Click the finish button to create new MS Office add-in and setup project for selected host application.

Projects created

Two projects will be created automatically as follows

1. Add-in project (CSSSampleAddin)
2. Setup project (CSSSampleAddinSeup)

Add-in gets installed, which is highlighted in the screen displayed below.

Now you can start writing your code to build add-in menu in OnConnection() method of Connect.cs class file. Further you can setup project to create msi /exe which will help you to create add-in other machine.

Note: Await for my next post which will help you to create Ribbon menu in MS Office Word

Android & its UI

 -Kalimuthu Rengaswamy

Now a days Smart Phones playing a vital role in IT industry with their innovative applications and OS updates. I am on my toes for getting Android latest version Ice-cream-sandwich which totally updated with many stunning features.

        Probably many of you might be using Android or any other smart phone, which are provided with their own App stores. When you thought of an Application, the first thing you will be expecting is good UI. Right! Android has provided developers with many widgets and necessary layouts. Android done all its part and now UI entirely depends on the developers ability.

People use the Smart mobiles for various purposes, for example security, entertainment, gaming, casual and so on. All persons may not concentrate on UI but many people do. Android is provided with both 2D and 3D graphic engines.

        Lets go little depth in this topic, every activity in the application is designed using the XML coding. As I specified previously, android is providing all the necessary widgets,layouts, composites, media&images in its framework, making developers easy.

If we go little more deeper Android is provided with these following layouts:

• Frame Layout
• Absolute Layout
• Linear Layout
• Table Layout
• Relative Layout

Developers uses this according to their convenience and purpose. For the time being I will be explaining only about Relative layout which is most used in general.

Relative layout :

In a relative layout every element arranges itself relative to a parent control or other control.

In this relative layout control place in two way

1. relative to their container
2. relative to other controls 

Relative to their container 

In this type controls are relative to container place in layout. It flow some properties android:layout_alignParentTop, Bottom, Right or Left to true. This aligns the Top,Bottom,Right or Left side of the control to the Top, Bottom, Right or Left side of the container respectively.

• android:layout_centerVertical: The control should be positioned vertically in the center of the container.
• android:layout_centerHorizontal: The control should be positioned horizontally in the center of the container.
• android:layout_centerInParent: The control should be positioned both vertically and horizontally in the middle of the container.

Example :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

android:id="@+id/widget30"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

<Button

android:id="@+id/widget31"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true">

</Button>

</RelativeLayout>

   

Position Relative to other control positions:

     In this type controls are relative to other control place in layout. It follow some properties

• android:layout_above: the widget should be placed above the referenced widget.
• android:layout_below: The widget should be placed below the referenced widget.
• android:layout_toRightOf: The widget should be placed to the right of the referenced widget.
• android:layout_toLeftOf: The widget should be placed above the referenced widget.

Example :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

android:id="@+id/widget30"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

<Buttonandroid:id="@+id/widget34"android:text="Button3" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_below="@+id/widget35" android:layout_alignLeft="@+id/widget35" android:layout_marginTop="165dp">

</Button>

<Buttonandroid:id="@+id/button2"android:text="Button4" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_alignBaseline="@+id/widget34" android:layout_alignBottom="@+id/widget34"android:layout_alignLeft="@+id/button1"></Button>

<Buttonandroid:id="@+id/widget35"android:text="Button1" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_alignParentTop="true" android:layout_alignParentLeft="true"android:layout_marginLeft="60dp" android:layout_marginTop="171dp"></Button>

<Buttonandroid:id="@+id/button1"android:text="Button2" android:layout_height="wrap_content" android:layout_width="wrap_content"android:layout_alignBaseline="@+id/widget35" android:layout_alignBottom="@+id/widget35"android:layout_alignParentRight="true" android:layout_marginRight="58dp"></Button>

</RelativeLayout>

This is just a introduction to the android application development. Hope it was helpful. Await and keep following for the next post.