ProGuide Ribbon Tabs and Groups
Language: C#
Subject: Framework
Contributor: ArcGIS Pro SDK Team <arcgisprosdk@esri.com>
Organization: Esri, http://www.esri.com
Date: 04/04/2024
ArcGIS Pro: 3.3
Visual Studio: 2022
Overview
Groups
How to add a popup to a group
How to modify the contents of a group
Subgroups
Tabs
Tab groups
Toolbars
ArcGIS Pro uses the ribbon paradigm popularized by newer versions of Microsoft Office. The ribbon consists of a single fixed toolbar containing one or more tabs. The number of available (visible) tabs may vary dynamically depending on the state of the application. Tabs are activated through user interaction (clicks), or when directed by code running within the application.
Each tab is composed of one or more groups, small rectangular regions having a caption, and containing one or more controls. The representation of controls within groups varies depending on how frequently the control is expected to be used, and is configured declaratively in the DAML customization file. Frequently used controls should be large and obvious, while less frequently used tools should be smaller. In addition, controls are typically paired with a caption to make their function more obvious.
The location of a control within the ribbon, including its size and relative placement, is established using the group and tab elements.
Groups are declared as lists of controls within a groups container element within the module DAML element :
<groups>
<group id="esri_core_DockWindows" caption="Windows" condition="esri_core_MapPane">
<button refID="esri_core_ShowProjectDockPane" size="large" />
</group>
<group id="esri_core_ProjectFile" caption="Project">
<button refID="esri_core_OpenProjectButton" size="large" />
<button refID="esri_core_NewProjectButton" size="middle"/>
<button refID="esri_core_SaveProjectButton" size="middle"/>
<button refID="esri_core_SaveProjectAsButton" size="middle" separator="true"/>
<button refID="esri_core_CloseProjectButton" size="middle"/>
<button refID="esri_core_ProjectSettingsButton" size="middle"/>
</group>
<group id="esri_core_ProjectImport" caption="Import">
<button refID="esri_core_ImportMapButton" size="large" />
</group>
<group id="esri_core_ProjectNewItem" caption="New">
<button refID="esri_core_NewMapButton" size="large" />
</group>
</groups>In the example above, four groups are declared. Note that the button elements refer to previously declared buttons. While the button image is supplied elsewhere in the button declaration, the size of the button is specified on the group. Note that the same button could appear in more than one group. Any control can be added to the group; label controls, checkboxes, editboxes, and so on. The separator attribute can be used to segregate multiple controls in the same group.
The condition attribute is used to control whether or not the group is visible, and thus available. If no condition is specified, the group is always visible.
Groups may optionally support a “more” button—a small link widget located next to the group caption—that is used to show a dialog box where more obscure functions may be accessed. Use the launcherButtonID attribute on the group element to reference a button function.
<group id="esri_mapping_navigateGroup" caption="Navigate"
launcherButtonID="esri_mapping_navigationOptionsButton"
smallImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/3DNavigationTool16.png">
<tool refID="esri_mapping_exploreSplitButton" size="large" />
<button refID="esri_mapping_zoomFullButton" size="small" />
...
</group>
Like controls, existing groups can be modified using DAML files. The following example removes a button from an existing group:
<updateModule refID="esrimappingExtension">
<groups>
<updateGroup refID="ESRImappingFindGroup">
<deleteButton refID="ESRImappingFindButton"/>
</updateGroup>
</groups>
</updateModule>Subgroups are optionally declared inside groups. Subgroups provide finer control over ribbon scaling and ensure that the user experience is optimal when the application window is resized. Each subgroup can hold up to 3 controls.
<subgroups>
<!-- Can only have 3 items in a subgroup-->
<subgroup id="esri_core_editBtns" size="MediumThenSmallWhenSmall" verticalAlignment="Center" >
<button refID="esri_core_editCutButton"/>
<button refID="esri_core_editCopyButton"/>
<button refID="esri_core_editCopyPaths"/>
</subgroup>
</subgroups>A subgroup has two attributes: size and verticalAlignment. verticalAlignment can be "Center" or "Top" (Default)
`size' can be one of the following:
| size Attribute | Description |
|---|---|
| AlwaysLarge | Child controls always use a Large variant size no matter what the ribbon size is. |
| AlwaysMedium | Child controls always use a Medium variant size no matter what the ribbon size is. |
| AlwaysSmall | Child controls always use a Small variant size no matter what the ribbon size is. |
| Default | Child controls use a Large variant size when the ribbon size is Large. They change to a Medium variant size when the ribbon size is Medium. They change to a Small variant size when the ribbon size is Small. This option provides the largest number of variants for child controls. |
| LargeThenMediumWhenMedium | Child controls use a Large variant size when the ribbon size is Large. They change to a Medium variant size when the ribbon size is Medium or Small. |
| LargeThenMediumWhenSmall | Child controls use a Large variant size when the ribbon size is Large or Medium. They change to a Medium variant size when the ribbon size is Small. |
| LargeThenSmallWhenMedium | Child controls use a Large variant size when the ribbon size is Large. They change to a Small variant size when the ribbon size is Medium or Small. |
| LargeThenSmallWhenSmall | Child controls use a Large variant size when the ribbon size is Large or Medium. They change to a Small variant size the ribbon size is Small. |
| MediumThenSmallWhenMedium | Child controls use a Medium variant size when the ribbon size is Large. They change to a Small variant size when the ribbon size is Medium or Small. |
| MediumThenSmallWhenSmall | Child controls use a Medium variant size when the ribbon size is Large or Medium. They change to a Small variant size the ribbon size is Small. |
The Layer group on the Map tab is defined using multiple subGroups within the group.
Here is the group definition.
<group id="esri_mapping_layerGroup" caption="Layer" smallImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/AddContent16.png" keytip="L">
<subgroup refID="esri_mapping_firstLayerSubGroup"/>
<subgroup refID="esri_mapping_secondLayerSubGroup"/>
</group>and the subGroup definitions.
<subgroup id="esri_mapping_firstLayerSubGroup" >
<gallery refID="esri_mapping_basemapGallery" inline="false" size="large" />
<splitButton refID="esri_mapping_addDataSplitButton" />
</subgroup>
<subgroup id="esri_mapping_secondLayerSubGroup" size="MediumThenSmallWhenSmall">
<button refID="esri_mapping_newGraphicsLayerButton" />
</subgroup> You can use the size attribute on the subGroups to manipulate the look and feel of the group.
Large
Medium
Small
Once a group is declared, it can be referenced and placed on tabs. Tabs are declared as lists of groups within a tab's collection element. In the following example, previously declared groups are added to a new tab labeled “Map”.
<tabs>
<tab id="esri_core_MapTab" caption="Map" condition="esri_core_MapPane" keytip="M">
<group refID="esri_core_NavigateGroup" />
<group refID="esri_core_MapGroup" />
<group refID="esri_core_ViewGroup" />
<group refID="esri_core_SelectionGroup"/>
<group refID="esri_core_InquiryGroup"/>
<group refID="esri_core_MapWindowsGroup"/>
</tab>
</tabs>Like controls, a tab’s relevance can be governed using a condition. The condition attribute is used to control whether or not the tab is visible, and thus available. Conditions are not used to control tab activation, only tab availability. If no condition is specified, the tab is always visible.
To support accessibility, an appropriate keytip should be supplied for each tab. The characters chosen should make sense and should conflict with any existing keytips; keytips can consist of multiple characters to disambiguate if necessary.
Collections of related tabs can be grouped together to improve clarity. These collections are called tab groups. In the ribbon displayed below, there is a tab group containing three tabs. Previously at 2x the tab groups supported a caption and a background color.
Tab groups are declared within a tabGroups collection element and consist of an ID. The Tabs are associated with a tab group using the tabGroupID attribute. The DAML below creates the tabs and tab group as displayed above.
<tabGroups>
<tabGroup id="esri_mapping_featureLayerTabGroup">
</tabGroup>
</tabGroups>
<tabs>
<tab id="esri_mapping_featureLayerAppearanceTab" caption="Feature Layer" condition="esri_mapping_onlyFeatureLayersSelectedCondition" tabGroupID="esri_mapping_featureLayerTabGroup" activationCategory="esri_Appearance">
<group refID="esri_mapping_layerScaleVisibilityGroup"/>
<group refID="esri_mapping_layerEffectsGroup" />
<group refID="esri_mapping_layerCompareGroup"/>
<group refID="esri_mapping_layerSymbology" />
<group refID="esri_mapping_layerExtrusion" />
<group refID="esri_mapping_layer3DGroup" />
<group refID="esri_mapping_lightingAndShadingGroup" />
</tab>
<tab id="esri_mapping_labelingTab" caption="Labeling" condition="esri_mapping_onlyFeatureLayersSelectedCondition" tabGroupID="esri_mapping_featureLayerTabGroup" activationCategory="esri_Label">
<group refID="esri_mapping_labelingLayerGroup" />
<group refID="esri_mapping_labelingLabelClassGroup" />
<group refID="esri_mapping_labelingScalesGroup" />
<group refID="esri_mapping_labelingTextSymbolGroup" />
<group refID="esri_mapping_labelingPlacementStyleGroup" />
<group refID="esri_mapping_labelingMapGroup" />
</tab>
<tab id="esri_mapping_featureLayerDataTab" caption="Data" condition="esri_mapping_onlyFeatureLayersSelectedCondition" tabGroupID="esri_mapping_featureLayerTabGroup" activationCategory="esri_Data">
<group refID="esri_mapping_layerDefQueryGroup" />
<group refID="esri_mapping_featureLayerAttributeGroup" />
<group refID="esri_mapping_layerSelectionGroup"/>
<group refID="esri_mapping_designViewGroup"/>
<group refID="esri_mapping_archiveGroup"/>
<group refID="esri_mapping_layerRelationshipsGroup"/>
<group refID="esri_mapping_layerToolsGroup"/>
<group refID="esri_mapping_localFeatureCache"/>
</tab>
</tabs>Tab groups are typically used in situations where the user temporarily enters a mode, such as editing graphic elements. Tab groups are not typically used with tabs that are always visible (global tabs).
The ribbon group supports an inner collection and grouping of buttons into a toolbar. Toolbars are purely declarative and support multiple groups. The group definition describes what the toolbar looks like. Use the appropriate control element with a refID to specify the elements you want to appear in the toolbar. The example below shows a toolbar with several comboboxes and buttons.
<toolbars>
<toolbar id="esri_mapping_labelTextSymbolFontToolbar">
<group>
<customControl refID="esri_mapping_labelClassFontControl"/>
<comboBox refID="esri_mapping_labelTextSymbolFontSizeComboBox" size="small" />
<button refID="esri_mapping_labelTextSymbolIncreaseSizeButton" size="small" />
<button refID="esri_mapping_labelTextSymbolDecreaseSizeButton" size="small" />
</group>
<group>
<comboBox refID="esri_mapping_labelTextSymbolFontStyleComboBox" />
<customControl refID="esri_mapping_labelTextSymbolVariableFontSettings" size="small" />
<customControl refID="esri_mapping_labelTextSymbolColorPicker" size="small" />
</group>
</toolbar>
</toolbars> 