Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Binding to Data

  • 2 minutes to read

The DXNavBar control can obtain group and item information from a data source. For this purpose, you can use the NavBarControl.ItemsSource property - to specify the source of the data, and the NavBarControl.GroupDescription property - to specify the name of a data source field, by which the values of data source items should be grouped within the NavBarControl.

#Example of Data Binding

Below is a simple example that demonstrates how a NavBarControl can be easily bound to a simple, plain data table containing two columns (“Group” and “Item”) and how the NavBarControl visualizes the table data by grouping them by the “Group” column values.

In this example, a table with the following data content is created:

Group Item
Group 1 Item 1-1
Group 1 Item 1-2
Group 1 Item 1-3
Group 2 Item 2-1
Group 2 Item 2-2
Group 2 Item 2-3

Note that in the code below, the created data source object is defined as the data context for the window. Particular properties of group and item objects are bound to the required data using styles.

<Window x:Class="NavBarBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar">
    <Grid>
        <dxn:NavBarControl Name="navBarControl1" ItemsSource="{Binding}" GroupDescription="Group">
            <dxn:NavBarControl.Resources>
                <Style TargetType="dxn:NavBarGroup">
                    <Setter Property="Header" Value="{Binding}"/>
                </Style>
                <Style TargetType="dxn:NavBarItem">
                    <Setter Property="Content" Value="{Binding Path=Item}"/>
                </Style>
            </dxn:NavBarControl.Resources>
        </dxn:NavBarControl>
    </Grid>
</Window>

The following image illustrates the result.

BindingToData_Example.png