NavBarGroup Class

Represents an individual group within the NavBarControl.

Assembly: DevExpress.Xpf.NavBar.v19.1.dll

Declaration

C#
VB.NET

public class NavBarGroup :
    DXFrameworkContentElement,
    INavigationItem,
    INotifyPropertyChanged,
    ICommandSource

Public Class NavBarGroup
    Inherits DXFrameworkContentElement
    Implements INavigationItem,
               INotifyPropertyChanged,
               ICommandSource

The following members return NavBarGroup objects:

Show 12 links

Remarks

A navbar control maintains collections of groups and items. Groups are represented by instances of the NavBarGroup class which can be accessed via the NavBarControl.Groups property. This property returns the NavBarGroupCollection collection which allows you to add and delete groups within the navbar.

Use properties of the NavBarGroup class to specify the appearance and behavior of an individual group. Use the NavBarGroup.Header and NavBarGroup.ImageSource properties to define the caption text of a group and an image to be displayed within the group’s header. A group’s visibility can be controlled via the NavBarGroup.IsVisible property. The content of a group can be defined by either the NavBarGroup.Items or NavBarGroup.Content property, depending upon the NavBarGroup.DisplaySource property setting.

Set the NavBarGroup.IsExpanded property to true to expand a group; set it to false to collapse it. Use the NavBarGroup.SelectedItem or NavBarGroup.SelectedItemIndex property to determine a group’s selected item.

Using the NavBarGroup.VisualStyle property you can define a visual style to be applied to a group. The appearance of a group’s items can be controlled by using the NavBarGroup.ItemVisualStyle property.

To learn more, see the Groups topic.

Example

This example demonstrates how items can be created and customized programmatically within a navbar group.

In this sample, images are defined for the group header and the third group item via the NavBarGroup.ImageSource and NavBarItem.ImageSource properties, respectively. The item image’s layout is customized by assigning the item’s NavBarItem.VisualStyle property with a specific style that makes use of the NavBarViewBase.LayoutSettings attached property’s LayoutSettings.ImageDocking setting.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-programmatically-create-a-navbarcontrol-with-groups-and-items-e1626.

Window1.xaml.cs
Window1.xaml.vb

private void CreateGroup1(NavBarControl navBar){
    NavBarGroup group1 = new NavBarGroup();
    group1.Header = "Items";
    //Display an image within the group's header
    group1.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/folder.png"));

    NavBarItem item1 = new NavBarItem();
    item1.Content = "Home";
    group1.Items.Add(item1);

    NavBarItem item2 = new NavBarItem();
    item2.Content = "Work";
    group1.Items.Add(item2);

    NavBarItem item3 = new NavBarItem();
    item3.Content = "Private";
    //Display an image within the item
    item3.ImageSource = new BitmapImage(new Uri("pack://application:,,,/Images/private.png"));
    //Change item image layout
    Style itemStyle = new Style();
    itemStyle.Setters.Add(new Setter(NavBarViewBase.LayoutSettingsProperty, new LayoutSettings() { ImageDocking = Dock.Right }));
    item3.VisualStyle = itemStyle;
    group1.Items.Add(item3);

    navBar.Groups.Add(group1);
}

Private Sub CreateGroup1(ByVal navBar As NavBarControl)
    Dim group1 As New NavBarGroup()
    group1.Header = "Items"
    'Display an image within the group's header
    group1.ImageSource = New BitmapImage(New Uri("pack://application:,,,/Images/folder.png"))

    Dim item1 As New NavBarItem()
    item1.Content = "Home"
    group1.Items.Add(item1)

    Dim item2 As New NavBarItem()
    item2.Content = "Work"
    group1.Items.Add(item2)

    Dim item3 As New NavBarItem()
    item3.Content = "Private"
    'Display an image within the item
    item3.ImageSource = New BitmapImage(New Uri("pack://application:,,,/Images/private.png"))
    'Change item image layout
    Dim itemStyle As New Style()
    itemStyle.Setters.Add(New Setter(NavBarViewBase.LayoutSettingsProperty, New LayoutSettings() With {.ImageDocking = Dock.Right}))
    item3.VisualStyle = itemStyle
    group1.Items.Add(item3)

    navBar.Groups.Add(group1)
End Sub

The following code snippets (auto-collected from DevExpress Examples) contain references to the NavBarGroup class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

VB.NET
C#

how-to-bind-a-dxnavbar-control-to-an-inotifycollectionchanged-datasource-e1894/VB/Window1.xaml.vb#L12


Private groups As ObservableCollection(Of NavBarGroup)

alternative-theme-for-the-explorerbar-view-e2006/VB/Window1.xaml#L43

<dxn:NavBarControl.Groups>
<dxn:NavBarGroup Header="Group1">
    <dxn:NavBarItem Content="Item1" ImageSource="{StaticResource image1}" />

how-to-synchronize-the-navbar-navigation-pane-expanded-width-with-its-popup-width-e4302/CS/NavBarSample/MainWindow.xaml#L24

<dxn:NavBarControl.Groups>
    <dxn:NavBarGroup Header="Group1" x:Name="firstGroup">
        <dxn:NavBarItem>Item1</dxn:NavBarItem>

how-to-provide-keyboard-navigation-in-navbar-e3809/CS/NavBarAttachedProperty.Example/MainWindow.xaml#L47

<dxn:NavBarControl.Groups>
    <dxn:NavBarGroup Header="Group_1">
        <dxn:NavBarGroup.Items>

how-to-iterate-through-groups-and-toggle-their-expanded-state-e1622/CS/ToggleGroupExpandedState/Window1.xaml#L7

<dxn:NavBarControl.Groups>
    <dxn:NavBarGroup Header="Group1">
        <dxn:NavBarItem>Item1</dxn:NavBarItem>

how-to-use-styles-to-customize-the-appearance-of-groups-and-items-in-navbarcontrol-e1701/VB/VisualStylesOfGroupsAndItems/Window1.xaml#L15


<Style x:Key="GroupStyle" TargetType="dxn:NavBarGroup">
    <Setter Property="ItemLayoutSettings" Value="{dxn:NavBarLayoutSettings TextHorizontalAlignment=Center}" />