Add notification badge icon to Ribbon control in Add-in

Question

We are working on powerpoint add-in. As per requirement, we need to implement notification feature to the add-in application. We are already having some Ribbon button in our Ribbon control. We need to add a badge button in the Ribbon button along with the existing buttons.

Below is the sample badge button we are looking.

I have checked with “Ribbon Button”, Split Button etc. But I couldn’t reach the solution. Will it be a possible requirement?

Is there any way to get the Location of Ribbon button? I have checked the ribbon button properties, but not found any location properties. If we get the location of Ribbon Button we can display notification panel near to ribbon button.

Answer 1

The best way is most probably to provide a callback for the image, and render the notification when returning the image.

Note that you need to switch to XML definition of the ribbon for that (the visual ribbon designer in Visual Studio does not support image callbacks/events, as far as I remember, it supports only trivial "click" event). Use "Export to XML" menu item to export the ribbon to XML, then define a custom image callback.

Here is a somewhat related question: How can I add the images to button using the ribbon xml?

That should do. Note that you need to force repaint when you want to change the notification; for that, you may use "onload" event to capture the ribbon, and call "repaint" method on it.

Below is an almost complete example that shows an auto-incrementing number on a ribbon button.

XML:

<?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">
        <group id="MyGroup" label="My Group">
          <button id="MyButton" size="large" label="Button With Flag"
                  getImage="Ribbon_GetHelloImage" 
                  onAction="Ribbon_SayHello"  />
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>

C#

[ComVisible(true)]
public class Ribbon1 : Office.IRibbonExtensibility
{
    private Office.IRibbonUI ribbon;
    private Timer timer = new Timer();

    public void Ribbon_Load(Office.IRibbonUI ribbonUI)
    {
        this.ribbon = ribbonUI;

        timer.Interval = 1000;
        timer.Start();
        timer.Tick += (sender, args) => ribbon.InvalidateControl("MyButton");
    }

    public Bitmap Ribbon_GetHelloImage(Office.IRibbonControl ctrl)
    {
        var bitmap = new Bitmap(32, 32);
        var flagGraphics = Graphics.FromImage(bitmap);
        flagGraphics.DrawString(DateTime.Now.Second.ToString(), 
            new Font(FontFamily.GenericSansSerif, 10), 
            Brushes.Red, 12, 0);

        return bitmap;
    }

    public void Ribbon_SayHello(Office.IRibbonControl ctrl)
    {
        MessageBox.Show("Hello", "Hello");
    }