How to: Wrap long texts of the DXNavBar items by creating an ItemTemplate

• Jun 07, 2019

This example demonstrates how to wrap an item’s text onto several lines, if this text is too long. To accomplish this, a template of the NavBarViewBase.ItemTemplate type is created at the view level. This template contains a standard TextBlock control whose TextBlock.TextWrapping property is set to Wrap.

View Example

Application.xaml

<Application x:Class="LongNavBarItemText.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Window1.xaml

<Window x:Class="LongNavBarItemText.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar" Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="itemTemplate">
            <TextBlock Text="{Binding Path=Content}" TextWrapping="Wrap" />
        </DataTemplate>
    </Window.Resources>
    <dxn:NavBarControl MaxWidth="200">
        <dxn:NavBarControl.View>
            <dxn:ExplorerBarView ItemTemplate="{StaticResource itemTemplate}" />
        </dxn:NavBarControl.View>
        <dxn:NavBarControl.Groups>
            <dxn:NavBarGroup Header="Group1">
                <dxn:NavBarGroup.Items>
                    <dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText1" />
                    <dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText2" />
                    <dxn:NavBarItem Content="VeryVeryVeryVeryVeryVeryLongText3" />
                </dxn:NavBarGroup.Items>
            </dxn:NavBarGroup>
        </dxn:NavBarControl.Groups>
    </dxn:NavBarControl>
</Window>

Application.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows

Namespace LongNavBarItemText
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application
    End Class
End Namespace

Window1.xaml.vb

Imports Microsoft.VisualBasic
Imports System.Windows

Namespace LongNavBarItemText
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Window1.xaml.cs

using System.Windows;

namespace LongNavBarItemText {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}