View Layout Customization

• May 22, 2020
• 3 minutes to read

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

Orienation of Groups and Items

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

Orientation = Vertical	Orientation = Horizontal

Within groups, 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 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 panel's properties.

Display Mode of View Content Elements

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.

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

• View Level: NavBarViewBase.GroupVisualStyle, NavBarViewBase.ItemVisualStyle
• Group Level: NavBarGroup.VisualStyle, NavBarGroup.ItemVisualStyle
• Item Level: NavBarItem.VisualStyle

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

XAML

<UserControl.Resources>
    <!-- A common display mode for all groups and items -->
    <Style x:Key="commonDisplayMode" TargetType="ButtonBase">
        <Setter Property="dxn:NavBarViewBase.DisplayMode" Value="Text"/>
    </Style>
</UserControl.Resources>

<dxn:NavBarControl x:Name="NavBar" >
    <dxn:NavBarControl.View>
        <dxn:ExplorerBarView GroupVisualStyle="{StaticResource commonDisplayMode}" ItemVisualStyle="{StaticResource commonDisplayMode}"/>
    </dxn:NavBarControl.View>
    ...
</dxn:NavBarControl>

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	XAML <UserControl.Resources> <!-- A common layout style for all groups --> <Style x:Key="commonGroupStyle" TargetType="ButtonBase"> <Setter Property="dxnb:NavBarViewBase.ImageSettings"> <Setter.Value> <dxnb:ImageSettings Width="40" Height="40"></dxnb:ImageSettings> </Setter.Value> </Setter> <Setter Property="dxnb:NavBarViewBase.LayoutSettings"> <Setter.Value> <dxnb:LayoutSettings TextHorizontalAlignment="Center"></dxnb:LayoutSettings> </Setter.Value> </Setter> </Style> <!-- A common layout style for all items --> <Style x:Key="commonItemStyle" TargetType="ButtonBase"> <Setter Property="dxnb:NavBarViewBase.ImageSettings"> <Setter.Value> <dxnb:ImageSettings Width="48" Height="48"/> </Setter.Value> </Setter> <Setter Property="dxnb:NavBarViewBase.LayoutSettings"> <Setter.Value> <dxnb:LayoutSettings ImageDocking="Top" TextHorizontalAlignment="Center" ImageHorizontalAlignment="Center"></dxnb:LayoutSettings> </Setter.Value> </Setter> </Style> </UserControl.Resources> ... <dxnb:NavBarControl.View> <dxnb:ExplorerBarView GroupVisualStyle="{StaticResource commonGroupStyle}" ItemVisualStyle="{StaticResource commonItemStyle}"/> </dxnb:NavBarControl.View>
Custom Layout 2	XAML <UserControl.Resources> <!-- A common layout style for all groups --> <Style x:Key="commonGroupStyle" TargetType="ButtonBase"> <Setter Property="dxnb:NavBarViewBase.ImageSettings"> <Setter.Value> <dxnb:ImageSettings Width="32" Height="32"/> </Setter.Value> </Setter> </Style> <!-- A common layout style for all items --> <Style x:Key="commonItemStyle" TargetType="ButtonBase"> <Setter Property="dxnb:NavBarViewBase.LayoutSettings"> <Setter.Value> <dxnb:LayoutSettings ImageDocking="Right" TextHorizontalAlignment="Right"/> </Setter.Value> </Setter> </Style> </UserControl.Resources> ... <dxnb:NavBarControl.View> <dxnb:ExplorerBarView GroupVisualStyle="{StaticResource commonGroupStyle}" ItemVisualStyle="{StaticResource commonItemStyle}"/> </dxnb:NavBarControl.View>

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