How to display Button with Image

554
6
02-06-2018 05:41 AM
Highlighted
New Contributor II

Hi All,

I want to displays the button with Image same like Attribute window in ArcGIS Pro as shown attached screen shot.

Can someone guide me on this.

Thank you

Reply
0 Kudos
6 Replies
Highlighted
Esri Regular Contributor

Hi,

You can modify the smallImage and largeImage attributes of a button element in an add-in's Config.daml like this below to display the attribute table image:

....
<controls>
   <!-- add your controls here -->
   <button id="AttributeBtn_Attribute" caption="Attribute" className="Attribute"
      loadOnClick="true" smallImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/TableOpen16.png"
      largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/TableOpen32.png">

     <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
   </button>
</controls>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
....

Attribute table image on button

Thanks

Uma

Reply
0 Kudos
Highlighted
New Contributor II

thank you for your response but as you suggested that will be for ribbon.

I want to add icons with text on dock able panel same like attribute table in ArcGIS Pro.

Reply
0 Kudos
Highlighted
Esri Contributor

What is displayed depends on the 'size' of the button.

- small: just the small image

- middle: small image and caption

- large: large image and caption

For example on the Map ribbon, the Show Attributes button in the Selection group is defined as:

<updateGroup refID="esri_mapping_selectionGroup">
  <insertButton refID="esri_editing_ShowAttributes" placeWith="esri_mapping_clearSelectionButton" insert="before" size="middle" />
</updateGroup>
Reply
0 Kudos
Highlighted
New Contributor II

I understand the concept Small, middle and large sizes of caption.

my question is, I have custom button on my custom dock able panel.

Just I want to display Image with button instead of only button.

Finally I am able to make it work using following code,

<Button Width="108"  Name = "buttnx_exprt" Margin="0,1,0,0" HorizontalAlignment="Right" VerticalAlignment="Bottom" Command="{Binding CmdWork_Export}" >
<StackPanel Orientation="Horizontal" Name="klk">
<Image Source="Images\Export.png" />
<TextBlock Text=" Click Here" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>

</Button>

Reply
0 Kudos
Highlighted
Regular Contributor

Hi,

You can use WPF Snoop or WPF Inspector to inspect ESRI styling. You will find which WPF objects ESRI uses and what are property values, events and etc. The same situation was with Docking panel tab controls. You can find more info on another thread.

Reply
0 Kudos
Highlighted
Regular Contributor

Hi,

I have attached printscreen of Tableviewpane and Add field button structure. More detailed information you can find using tools described earlier.

Reply
0 Kudos