Templating View Elements
- 3 minutes to read
Using templates provided by the DXNavBar control, you can completely replace the look and feel of view elements, while maintaining their existing behavior. For some view elements (such as group headers, items), templates can be defined at different object levels at the same time (for instance, at the view level and at the group level). In this case, templates created at a lower level in the logical tree take precedence over other templates for the same element (that is, a template defined at the group level has precedence over the same element template created at the view level).
In this topic, common templates (which are available under all views) and templates specific to Navigation Pane Views are listed.
Common Templates
Template properties listed in this section can always be used within the DXNavBar control, regardless of the applied view type.
Group Header Templates
- At the view level, use the NavBarViewBase.HeaderTemplate and NavBarViewBase.HeaderTemplateSelector properties. You can also define a common visual layout of group headers by using the NavBarViewBase.GroupHeaderTemplate property.
- At the group level, use the NavBarGroup.HeaderTemplate, NavBarGroup.HeaderTemplateSelector and NavBarGroup.ActualHeaderTemplateSelector properties. A group’s visual layout can also be customized using the NavBarGroup.GroupHeaderTemplate and NavBarGroup.ActualGroupHeaderTemplate properties.
Group Content Template
At the group level, the NavBarGroup.ContentTemplate property can be used to define the appearance of the group content represented by a group’s NavBarGroup.Content property if the NavBarGroup.DisplaySource property of the group is set to DisplaySource.Content.
Item Templates
- At the view level, use the NavBarViewBase.ItemTemplate and NavBarViewBase.ItemTemplateSelector properties.
- At the group level, use the NavBarGroup.ItemTemplate, NavBarGroup.ItemTemplateSelector and NavBarGroup.ActualItemTemplateSelector properties.
- At the item level, use the NavBarItem.Template property.
Item Panel Template
Each group arranges its items by stacking them within a specific container panel. At the view level, the NavBarViewBase.ItemsPanelTemplate property can be used to replace the panel type used within groups by default, with the required panel type (which should be a descendant of the Panel type).
Navigation Pane View Specific Templates
Below are the listed templates, available only if the Navigation Pane View is applied to the DXNavBar.
Group Button Templates
- At the view level, use the NavigationPaneView.GroupButtonTemplate and NavigationPaneView.GroupButtonTemplateSelector properties.
- At the group level, use the NavBarGroup.NavPaneGroupButtonTemplate and NavBarGroup.ActualNavPaneGroupButtonTemplateSelector properties.
Collapsed Pane Template
At the view level, use the NavigationPaneView.CollapsedTemplate property to define a template for the pane when it’s in the collapsed state.
Expanded Pane Template
At the view level, use the NavigationPaneView.ExpandedTemplate property to define a template for the pane when it’s in the expanded state.
Overflow Group Templates
- At the view level, use the NavigationPaneView.OverflowGroupTemplate and NavigationPaneView.OverflowGroupTemplateSelector properties.
- At the group level, use the NavBarGroup.NavPaneOverflowGroupTemplate and NavBarGroup.ActualNavPaneOverflowGroupTemplateSelector properties.
Collapsed Pane Item Templates
At the group level, use the NavBarGroup.CollapsedNavPaneItemsTemplate and NavBarGroup.CollapsedNavPaneItemsTemplateSelector properties.
Peek Form Templates
At the group level, use the NavBarGroup.PeekFormTemplate and NavBarGroup.PeekFormTemplateSelector properties.