[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Collapse]Navigation Controls
   [Expand]Accordion Control
   [Collapse]Navigation Bar
    [Collapse]Views
      View Layout Customization
      Styling View Content Elements
      Templating View Elements
      Scrolling
    [Expand]Groups
    [Expand]Items
     Binding to Data
    [Expand]Visual Elements
    [Expand]Miscellaneous
    [Expand]Member Tables
    [Expand]Examples
     Main Features
     Product Class Structure
    Office Navigation Bar
    TileNav Pane
    Tile Bar
   [Expand]Wizard Control
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

View Layout Customization

This topic provides you with information about different approaches of view layout customization available within the DXNavBar control.

Expanded Orienation of Groups and Items

Within a View, groups can be arranged one after another, either vertically or horizontally. By default, the vertical orientation is used. The group arrangement is controlled by the NavBarViewBase.Orientation property.

Orientation = Vertical Orientation = Horizontal

Within groups of a View, items are arranged as child elements of specific container panels. The manner in which items are stacked within these panels can be controlled via the NavBarViewBase.ItemsPanelOrientation property. By default, items are oriented vertically.

ItemsPanelOrientation = Vertical ItemsPanelOrientation = Horizontal

Note that you can define which panel type (a System.Windows.Controls.Panel descendant) should contain items within groups by creating a template of the NavBarViewBase.ItemsPanelTemplate type. Depending upon the panel type used, the layout of items can be additionally controlled at the panel level via a panel's properties. See the "DXNavbar - Layout Customization" demo to learn more.

Expanded Display Mode of View Content Elements

The DXNavBar allows its content elements (such as group headers or items) to be represented for display purposes, using their captions or associated images, or both. Use the NavBarViewBase.DisplayMode attached property to control by which characteristics different view content elements should be represented. The following options are available via this property: DisplayMode.ImageAndText, DisplayMode.Image and DisplayMode.Text.

DisplayMode = ImageAndText DisplayMode = Image DisplayMode = Text

Note that being an attached property, the NavBarViewBase.DisplayMode can be applied to different child elements of the DXNavBar. Within the DXNavBar, you can apply this property to view, group and item objects by using specific style properties, such as those listed below.

The following markup demonstrates how a common display mode (ImageAndText) can be applied to a View object to affect all groups and items.

Expanded Image and Text Layout Settings

The layout of images and texts displayed within group headers and items can be customized by using the NavBarViewBase.ImageSettings and NavBarViewBase.LayoutSettings attached properties. The NavBarViewBase.ImageSettings property allows the image size and stretch behavior to be defined. The NavBarViewBase.LayoutSettings can be used to specify image and text alignments (vertical, horizontal) and image docking behavior. Using combinations of these property settings, you can manipulate the layout of the DXNavbar control as your application requirements dictate.

Custom Layout Variants Implementation

Custom Layout 1

Custom Layout 2

Note that you can enhance these available layout customization scenarios by implementing styling and templating of view elements.

Is this topic helpful?​​​​​​​