Customizing the Addin Icon and Menu Button

There are a few different ways you can specify icons for to be displayed on the toolbar for your addin. Addin icons are sequentially added to the end of the rightmost toolbar.

You'll notice that the icons on the toolbar have varying icons. The first three icons are image icons, while the last two are FontAwesome icons.

Specifying Icons in the Addin

The basic process of adding icons is done as part of the OnApplicationStart() operation:

The following uses a FontAwesomeIcon and optional color:

public override void OnApplicationStart()
{
    base.OnApplicationStart();

    Id = "PasteCodeAsGist";

    AddinMenuItem = new AddInMenuItem(this)
    {
        Caption = "Gist",
        FontawesomeIcon = FontAwesomeIcon.Github,
        FontawesomeIconColor = "#247CAC"
    };

    MenuItems.Add(AddinMenuItem);            
}

Alternately you can also specify an ImageSource. Instead of the Fontawesome properties set the IconImageSource property instead:

AddinMenuItem = new AddInMenuItem(this)
{
    Caption = "Gist",
    FontawesomeIcon = FontAwesomeIcon.Github,
    FontawesomeIconColor = "#247CAC"
}

try 
{
  AddinMenuItem.IconImageSource = new ImageSourceConverter()
        .ConvertFromString("pack://application:,,,/GistIntegrationAddin;component/icon_22.png") 
        as ImageSource
}
catch{ }

Image Resources

We recommend when you use image resources that you also specify a FontAwesome icon and put the image retrieval into a try/catch block. Should the image retrieval fail, your addin will still load with the FontAwesome icon as a fall back.

Threading Issue

Markdown Monster performs initial addin loading asynchronously on a separate thread, so when the icons are initially attached, you may not be on the UI thread. This can in some cases cause odd behavior with WPF when loading images from external resources. If you run into trouble with this, see the section on post-processing images in the OnWindowLoaded() event.

Modifying the Menu Button and Image Icon

The above options allow you to assign either a font-awesome icon or a simple image resource. If you need to perform additional modification on either the icon or the menu item itself you can do this in the OnWindowLoaded() event which provides access to the Menu Button via the Addin.MenuItemButton property.

The following example completely replaces the existing icon with a new icon image source and explicitly manipulates the menu button size:

public override void OnWindowLoaded()
{
    var mButtonContent = AddinMenuItem.MenuItemButton?.Content;
    if (mButtonContent != null)
    {
        var image = (Image) mButtonContent;
        image.Source = ImageAwesome.CreateImageSource(FontAwesomeIcon.GithubAlt, new BrushConverter().ConvertFrom("#247CAC") as Brush);
        image.Height = 22;
        image.Width = 22;
    }

See also

Attach additional Menu Items from your Addin

© West Wind Technologies, 2019 • Updated: 12/04/17
Comment or report problem with topic