euse’s Blog

Todos los que han desarrollado add-ins para Word saben que pueden agregar botones y demás componentes a la ribbon que están desarrollando y asignarle una imagen prediseñada, utilizando uno de los atributos que poseen los componentes, este atributo es imageMso en donde especificamos el nombre de la imagen que posee el paquete Office que queremos utilizar.

Pero! ¿Cómo hacer si queremos utilizar nuestras propias imágenes? En esta oportunidad vamos a ver como utilizar imágenes personalizadas en los botones del add-in que ustedes pueden desarrollar.

Implementando

Lo primero que debemos hacer es setear uno de los atributos de la customUI, loadImage. Esta define el callback que se utiliza para cargar nuestras imágenes personalizadas. En este ejemplo vamos a asignarle al atributo loadImage el valor GetImage, que será el método encargado de cargar nuestras imágenes personalizadas.

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

El esqueleto de este callback es el siguiente:

public object loadImage(string imageId)

Ahora, una vez que hemos seteado el atributo loadImage y conocemos el esqueleto del callback, pasamos a implementar nuestro método GetImage para empezar a utilizar nuestras imágenes personalizadas.

Primero debemos agregar la referencia a System.Drawing en nuestro proyecto.

using System.Drawing;

Y luego implementamos la funcionalidad:

public Bitmap GetImage(string imageName)
{
    Assembly assembly = Assembly.GetExecutingAssembly();
    string[] resourceNames = assembly.GetManifestResourceNames();
    Stream stream = assembly.GetManifestResourceStream
                                (“CustomImagesSample.Images.“ + imageName);

    return new Bitmap(stream);
}

Este método lo que hace es leer de nuestro assembly la imagen embebida, instancia un bitmap y lo devuelve.

El método se puede implementar de distintas maneras para leer nuestra imagen personalizada, lo mas importante es setear el atributo loadImage y seguir el esqueleto del callback.

Una vez que implementamos nuestro metodo GetImage remplazamos el atributo imageMso por el atributo image al cual le asignamos el nombre de nuestra imagen, tal como se ve en el código:

<toggleButton id=”toggleButton1″
                        size=”large”
                        label=”My Button”
                        screentip=”My Button Screentip”
                        onAction=”OnToggleButton1″
                        image=”custom.jpg” />

Ahora cuando corramos nuestra aplicación, en la ribbon aparecerá el botón con nuestra imagen personalizada:

Espero que este post les sea de utilidad, aquí les dejo el código.

Saludos!