UXNavigationBar is a rich navigation control featuring complete navigation commands such as Refresh, Stop, and Browse Home. Similar to UXJournalButton, the UXNavigationBar works seamlessly with the navigation frame in the same focus scope.

You can easily add more commands to the UXNavigationBar by adding the toolbar button through AdditionalToolGroupTemplate.

Using UXNavigationBar

You use UXNavigationBar to display a bar-like panel dedicated to host navigation-related commands. The UXNavigationBar is typically paired with a navigation host such as UXFrame which serves as the target of the navigation commands. Using UXNavigationBar is easy and straightforward, you simply define an instance of the UXNavigationBar in the page where a navigation host existed.

The UXNavigationBar contains the following built-in elements:

• Back and Forward, represented by a UXJournalButton element.
• Refresh button, which is associated to the Refresh command.
• Stop button, which is associated to the BrowseStop command.
• Home button, which is associated to the BrowseHome command.

For the Home command to work, you specify the HomeUri property to the desired URI, such as shown in the following example.

<Intersoft:UXNavigationBar HomeUri="/About"/>

<Intersoft:UXFrame Source="/Home">
        <Intersoft:UXFrame.UriMapper>
            <Intersoft:UriMapper>
                <Intersoft:UriMapping Uri="/{Page}" MappedUri="/Views/{Page}.xaml"/>
            </Intersoft:UriMapper>
        </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

UXNavigationBar automatically captures the navigation history of the primary navigation host, or the navigation host that explicitly defined in the NavigationTarget property. This is made possible through the efficient use of commanding architecture implemented in ClientUI framework.

To learn more about commanding, see Commanding Overview. To learn more about ClientUI navigation framework and its features, see Navigation Overview.

Adding Custom Commands

UXNavigationBar can be easily extensible by adding your own commands such as buttons, dropdowns, and other UI controls. To add custom commands, you define a DataTemplate that uses UXToolGroup as the container, then assign the data template to the AdditionalToolGroup property of the UXNavigationBar.

The following example shows how to add custom commands in UXNavigationBar by creating AdditionalToolGroupTemplate and assign it to the AdditionalToolGroup property.

<Intersoft:UXPage.Resources>
        <DataTemplate x:Key="AdditionalToolGroupTemplate">
            <Intersoft:UXToolGroup HorizontalAlignment="Right" Margin="0,0,-165,0" d:LayoutOverrides="Height">
                <Intersoft:UXSeparator Style="{StaticResource ToolBarSeparator}"/>
                <Intersoft:UXToolBarButton Content="Write Us An Email" DisplayMode="Image" VerticalAlignment="Center" HorizontalAlignment="Left" Icon="/Intersoft.ClientUI.Samples.NavigationControls;component/Assets/Images/Email.png" ToolTipService.ToolTip="Custom Command 1"/>
                <Intersoft:UXToolBarButton Content="Follow us on Twitter" DisplayMode="Image" VerticalAlignment="Center" HorizontalAlignment="Left" Icon="/Intersoft.ClientUI.Samples.NavigationControls;component/Assets/Images/twitter.png" ToolTipService.ToolTip="Custom Command 2"/>
            </Intersoft:UXToolGroup>
        </DataTemplate>
</Intersoft:UXPage.Resources>

<Intersoft:UXNavigationBar AdditionalToolGroup={StaticResource AdditionalToolGroupTemplate}/>

<Intersoft:UXFrame Source="/Home">
        <Intersoft:UXFrame.UriMapper>
            <Intersoft:UriMapper>
                <Intersoft:UriMapping Uri="/{Page}" MappedUri="/Views/{Page}.xaml"/>
            </Intersoft:UriMapper>
        </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

Customizing Tooltips and Visibility

You can set the tooltips of each predefined button in the UXNavigationBar such as listed below.

• GoBackToolTip
• GoForwardToolTip
• HomeToolTip
• RefreshToolTip
• StopToolTip

In addition, you can also control the visibility of partciular buttons through the following properties.

• ForwardButtonVisibility
• HomeButtonVisibility
• RefreshButtonVisibility
• StopButtonVisibility

Customizing Individual Element Styles

In certain cases, you may want to customize the style of a specific element in the control, for instance, the style of journal button. UXNavigationBar provides an efficient way so that you can assign new style that apply to the journal button in particular, without have to customize the UXNavigationBar control entirely.

The styles that you can set individually are listed in the following.

• JournalButtonStyle
• ToolBarButtonStyle

To learn how to create and customize a style, see Styles and Template Overview.

Customizing UXNavigationBar Appearance

You can easily customize the UXNavigationBar appearance through the following properties.

If you would like to completely customize the control appearance or if you want to change the styles of each visual state, you can edit the template of the control and do the modification accordingly.

To learn how to customize the template and visual states, see Styles and Template Overview.

Samples and Walkthroughs

For the list of ClientUI walkthroughs, see Walkthroughs and How-to Topics.

For the list of ClientUI samples available in local installation, see Locating the Samples in Local Installation.