nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Graphics + Add-in Best Practices for Forms

AbelPerez

I'm building my first pro add-in and am currently in the initial stages. I have my tab, groups, and buttons setup. I want to change the button graphics but am having trouble understanding where to get the standard ESRI images. There is a link here DAML ID Reference Icons · Esri/arcgis-pro-sdk Wiki · GitHub but not certain how to view the images within Visual Studio.

Second question is about best practices for Windows Forms within my add-in. with ArcMap i displayed a Form for each of my functions. What is the best practices for Pro? Is it to use the Pro built in panels? Or what object should I use to display to the user? Some of my forms require quite a bit of input.

Rgds

Abel;

Trouver plus de publications taguées avec

Accepted answers

UmaHarano

Hi Abel,

Your button can display any image stored in Pro's ArcGIS.Desktop.Resources.dll. These images are listed in the wiki page on your post.

You can display a Pro button image on your custom button by setting the largeImage and smallImage attribute in the config.daml for the button element like this code snippet below. The snippet below will display Pro's FolderConnection image on a custom button on the ribbon.

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>my_button<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">caption</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>My Button<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">className</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>myButtonClass<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">loadOnClick</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>true<SPAN class="punctuation token">"</SPAN></SPAN> 
<SPAN class="attr-name token">smallImage</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/FolderConnectionAdd16.png<SPAN class="punctuation token">"</SPAN></SPAN> 
<SPAN class="attr-name token">largeImage</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/FolderConnectionAdd32.png<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Another good resource to read for this is the Referencing images from ArcGIS Pro section in the ProGuide: Content and Image resources wiki.

The Pro UI is written using WPF (Windows Presentation Foundation) which is a graphical User interface designed by Microsoft. In Pro, your Add-in can create buttons, dockpanes, panes, ProWindow (dialog) etc using the SDK Item templates. Here are some resources that will help you get started with developing UI with Pro SDK:

1. We have various samples in the ArcGIS-Pro-SDK-Community-Samples repo that can help you.

2. The Pro SDK team has recorded many sessions on YouTube (from previous conferences) that will also help you.

3. On the Pro SDK website, there is a collection of tutorials that can also help: ArcGIS Pro SDK Tutorials

Thanks

Uma

All comments

AbelPerez

That's great info. I did some WPF a while back so ill have to pick it up again.

CharlesMacleod

As Uma stated >>The Pro UI is written using WPF<< and the SDK templates automate the generation of most of the possible UI elements that are supported in Pro (buttons, tools, panes, dockpanes, property pages, property sheets, custom controls, and so on).

However, you can write any of the UI elements by hand - you would just be responsible for deriving from the correct base classes, adding the requisite overloads and so forth, and adding the necessary Config.daml entries. This can be a tedious business to repeat each time you need to add, say a button or a dockpane. That is where the SDK templates come in - to help automate a lot of these repetitive tasks. However, you don't _have_ to use them. You can do it all by hand as you need (for example - copy/pasting or moving existing classes from one add-in project to another).

Also, within WPF, the underlying technology used by the Pro UI, you can host a Winforms control within a WPF user control or window - though this is not a common pattern and is usually done for legacy reasons (eg an old WinForms control provides a specific set of functionality not easily duplicated in WPF or the level of effort is too great to rewrite it).

You can read the Microsoft documentation on WindowsFormHost for more information if you are interested.

AbelPerez

Many thanks. Just to confirm...I cannot use WinForms with the ArcGIS Pro SDK. The GUI elements must be the based on the SDK templates. Is that a correct assumption?

UmaHarano

Hi Abel,

Your button can display any image stored in Pro's ArcGIS.Desktop.Resources.dll. These images are listed in the wiki page on your post.

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>my_button<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">caption</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>My Button<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">className</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>myButtonClass<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">loadOnClick</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>true<SPAN class="punctuation token">"</SPAN></SPAN> 
<SPAN class="attr-name token">smallImage</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/FolderConnectionAdd16.png<SPAN class="punctuation token">"</SPAN></SPAN> 
<SPAN class="attr-name token">largeImage</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/FolderConnectionAdd32.png<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Another good resource to read for this is the Referencing images from ArcGIS Pro section in the ProGuide: Content and Image resources wiki.

1. We have various samples in the ArcGIS-Pro-SDK-Community-Samples repo that can help you.

2. The Pro SDK team has recorded many sessions on YouTube (from previous conferences) that will also help you.

3. On the Pro SDK website, there is a collection of tutorials that can also help: ArcGIS Pro SDK Tutorials

Thanks

Uma

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.