How to: Navigate groups by making them active in the Navigation Pane view

• Jun 07, 2019
• 2 minutes to read

In this example, a simple navigation interface is implemented using standard Button controls to activate groups within the NavBarControl. Note that navigation to the first and last groups is performed by executing specific commands of the NavbarControl. Navigation between the previous and next groups is implemented by changing the NavBarControl.ActiveGroup property. The NavBarViewBase.ActiveGroupChanged event is handled to determine the availability state of navigation buttons.

The following image shows the implemented interface.

View Example

Window1.xaml

<DockPanel>
    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
        <Button Name="btnFirst" Command="dxn:NavBarCommands.SetActiveGroup" CommandTarget="{Binding Path=View, ElementName=navBarControl1}" CommandParameter="{Binding ElementName=firstGroup}">First Group</Button>
        <Button Name="btnNext" Click="button_Click">Next Group</Button>        
        <Button Name="btnPrev" Click="button_Click">Prev Group</Button>
        <Button Name="btnLast" Command="dxn:NavBarCommands.SetActiveGroup" CommandTarget="{Binding Path=View, ElementName=navBarControl1}" CommandParameter="{Binding ElementName=lastGroup}">Last Group</Button>
    </StackPanel>

    <dxn:NavBarControl Name="navBarControl1">
        <dxn:NavBarControl.View>
            <dxn:NavigationPaneView ActiveGroupChanged="NavigationPaneView_ActiveGroupChanged" />
        </dxn:NavBarControl.View>

        <dxn:NavBarControl.Groups>
            <dxn:NavBarGroup Header="Group1" x:Name="firstGroup">
                <dxn:NavBarItem>Item1</dxn:NavBarItem>
            </dxn:NavBarGroup>
        <dxn:NavBarGroup Header="Group2">
            <dxn:NavBarItem>Item1</dxn:NavBarItem>
            <dxn:NavBarItem>Item2</dxn:NavBarItem>
        </dxn:NavBarGroup>
        <dxn:NavBarGroup Header="Group3">
            <dxn:NavBarItem>Item1</dxn:NavBarItem>
            <dxn:NavBarItem>Item2</dxn:NavBarItem>
            <dxn:NavBarItem>Item3</dxn:NavBarItem>
        </dxn:NavBarGroup>
        <dxn:NavBarGroup Header="Group4" x:Name="lastGroup">
            <dxn:NavBarItem>Item1</dxn:NavBarItem>
            <dxn:NavBarItem>Item2</dxn:NavBarItem>
            <dxn:NavBarItem>Item3</dxn:NavBarItem>
            <dxn:NavBarItem>Item4</dxn:NavBarItem>
        </dxn:NavBarGroup>
    </dxn:NavBarControl.Groups>
</dxn:NavBarControl>

</DockPanel>

Window1.xaml.vb

Public Sub New()
    InitializeComponent()
    CheckButtonAvailability()
End Sub

Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim activegroupIndex As Integer = navBarControl1.Groups.IndexOf(navBarControl1.ActiveGroup)
    If sender Is btnNext Then
        navBarControl1.ActiveGroup = navBarControl1.Groups(activegroupIndex + 1)
    End If
    If sender Is btnPrev Then
        navBarControl1.ActiveGroup = navBarControl1.Groups(activegroupIndex - 1)
    End If
End Sub

Private Sub CheckButtonAvailability()
    btnNext.IsEnabled = Not(navBarControl1.Groups.IndexOf(navBarControl1.ActiveGroup) = navBarControl1.Groups.Count - 1)
    btnPrev.IsEnabled = Not(navBarControl1.Groups.IndexOf(navBarControl1.ActiveGroup) = 0)
End Sub

Private Sub NavigationPaneView_ActiveGroupChanged(ByVal sender As Object, ByVal e As NavBarActiveGroupChangedEventArgs)
    CheckButtonAvailability()
End Sub

Window1.xaml.cs

public Window1(){
    InitializeComponent();
    CheckButtonAvailability();
}

private void button_Click(object sender, RoutedEventArgs e){
    int activegroupIndex = navBarControl1.Groups.IndexOf(navBarControl1.ActiveGroup);
    if (sender == btnNext) navBarControl1.ActiveGroup = navBarControl1.Groups[activegroupIndex + 1];
    if (sender == btnPrev) navBarControl1.ActiveGroup = navBarControl1.Groups[activegroupIndex - 1];
}

private void CheckButtonAvailability(){
    btnNext.IsEnabled = !(navBarControl1.Groups.IndexOf(navBarControl1.ActiveGroup) == navBarControl1.Groups.Count - 1);
    btnPrev.IsEnabled = !(navBarControl1.Groups.IndexOf(navBarControl1.ActiveGroup) == 0);
}

private void NavigationPaneView_ActiveGroupChanged(object sender, NavBarActiveGroupChangedEventArgs e){
    CheckButtonAvailability();
}