How to correctly load an icon for a button

[DrewD]

Hello, 

I'm following the community samples and am trying to change the icon for my add in button. Its not working however, even though I have two buttons (one 16x16, other 32x32 like in the samples). They are present in both Images and Dark Images folders too, incase that mattered. They just dont load.

The line in the DAML file

<button........ smallImage="Images\tree16.png" largeImage="Images\tree32.png">

However I also use the same images for a window icon elsewhere, and it works perfectly. I've even tried the EvilGenius16/32.png from the samples and still no luck. Meanwhile the GenericButton16/32 png's do work. I cannot find any reference to the Generic buttons anywhere in the entire project though, so I don't know if I'm missing a resource loading step or something.

[Wolf · Accepted solution]

Hi Drew,

 If you want to add an image for your add-in buttons you have to change the 'Build Action' for each image to 'AddInContent'.  You can do that through the image property pane in your solution as shown here: ProGuide-Diagnosing-ArcGIS-Pro-Add-ins

[DrewD]

Thanks Wolf. I had previously thought build action was done in code but couldn't find it, that makes far more sense.

[Amadeus111]

@Wolf I am working with VS2022 and AGP 3.0.3. I dont see AddInContent as an option in Build Actions. Am I missing something here?

[Wolf]

Sorry for the delay but as of ArcGIS Pro 3.0 the build action 'AddInContent' is obsolete.  ProGuide Content and Image Resources · Esri/arcgis-pro-sdk Wiki (github.com)

The replacement is build action 'Content'

[BarbaraSchneider2]

I have exactly the same problem. I set the "Build Action" for each image to "AddInContent", but the images still don't display. What am I doing wrong?

[CharlesMacleod]

Barbara, this might help:

https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-content-and-image-resources

It covers the various options for referencing images in your add-in. Pay close attention to the "image" Uri syntax - in particular the "/" - is it forwards or backwards "\"...? Notice for AddinContent it is backwards "\"....

One option that is not in that guide, but, seeing your post, I will add it, is to use something called a pack Uri. (cm - actually, on review, there is a section there called Referencing images from Arcgis Pro but I will expand it). A pack Uri is a way of referencing content that is contained, as a resource, ~within~ an assembly. A pack Uri looks like this

<Button ...
 largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue32.png">‍‍‍‍‍

(and is a bit unfriendly). If you choose to use a pack Uri from your ~own~ add-in (notice how this one references "ArcGIS.Desktop.Resources" which is the Pro assembly that contains all of the Pro icons) you would do the following:

• Add the image to your add-in project. Assume you add it to the folder called "Images".
• In Visual Studio, on the image properties, set its "Build Action" to Resource
• Change the pack Uri as follows - let's make an assumption that your add-in assembly is called "MyAddin.dll" and the image you added was called "MyImage32.png" and was added into the add-in Images folder:

<Button ... 
   largeImage="pack://application:,,,/MyAddin;component/Images/MyImage32.png">‍‍‍‍‍

One final point: After following these instructions your image may still not show (eg on the button). Why? Well, let's assume that the issue is not syntax, the issue is not incorrect Build Action or path or other user error. Everything is exactly correct but the image still does not show....

The answer is because of delay loading. Add-ins, by default, are delay loaded. This means that they do not actually ~load~ until a user activates them - usually by clicking on a button that is contained within the add-in. At that point in time, and only at that point in time, does the add-in assembly load. Delay loading is done as an optimization technique to only load those assemblies as they are needed....on demand, so to speak....and not all at once at startup. What this means for you is that the image you added as a Resource into your add-in assembly will not have been loaded (until the add-in is loaded) when the Pro ribbon is shown - In other words, you can "see" your button (sans image) but the add-in behind it is, in fact, not loaded and so neither are any of its resources - to include the button image!!!. Alright, well great....but I still need to know how do I get my image loaded and shown on the button on the ribbon!

You have three options:

• Force your add-in to load at Pro initialization. In that case your add-in assembly will be loaded and the image will be immediately available. To do this set the module "autoLoad" property in your Config.daml to "true" (it is false by default).
• Reference an image in a dll that is loaded at start-up (such as the images found in ArcGIS.Desktop.Resources.dll) - Notice that this is what the Pro SDK Item templates do - by default all images are referenced from the Pro resources dll.
• Use AddinContent as the Image "Build Action". AddinContent is a custom build action specifically designed to deal with the delay loading characteristics of add-ins and is installed with the Pro SDK. In a nutshell, if you use "AddinContent ", the image will be referenced from within the add-in zip archive and not from within the assembly. In other words, Pro does not have to load the assembly to access the images built as "AddinContent". Note that the path separators for the image path point backwards "\". The downside with AddinContent is that Images with that build action type, because they live in the zip archive and not in the dll as resources, can only by referenced in the Config.daml and not in a WPF User Control, for example (via a pack Uri). It is a custom content type (we, "Esri" implemented to support delay loading) and is not a WPF resource type.

Again, consult https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-content-and-image-resourcesfor more information and I will update that document to cover provide more details on use of pack Uris in the Config.daml.

[BarbaraSchneider2 · Accepted solution]

Hello Charles,

thank you for your answer. It now works! The following confused me: when you create a new add-in, and create a new button, the images "GenericButtonBlue16" and GenericButtonBlue32" are created in the folder "Images" of the project. However, these images are not used by the Add-In, but the ones in "ArcGIS.Desktop.Resources". This is confusing.

I had to reference my images the following way to make things work (not "pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/Image32.png"):

<!-- Note the backslash -->
<button id="module1_Button1" className="Button1" caption="Button1" largeImage="Images\Image32.png"/>

[AlderMaps]

Thank you! This drove me batty for an hour! I was going to work on my tool and thought "I'll just change the button real quick..." Hour and a half later, found myself on this page, where I finally got everything working. 

[MaxwellS]

I'm chiming in with a potential solution for anyone else who had issues with getting the button show up after trying all of the previously mentioned solutions (I was trying them all to no avail). I set the BuildAction of my image in Visual Studio 2022 to Resource, and named the button's large image as follows:

<Button ...
largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/MyButton32.png">‍‍‍‍‍

Note, rather than using "/MyAddin" as shown here:

"pack://application:,,,/MyAddin;component/Images/MyImage32.png"

 I used "/ArcGIS.Desktop.Resources". Not sure if this will work for anyone else, but I found none of the previously mentioned solutions working for me until I tried this. Hope this helps in some way.