Navigation Controls

Navigation Controls

Intersoft ClientUI® includes a powerful navigation framework consisting of several key components and UI controls that works seamlessly together to deliver consistent and reliable navigation experiences throughout the application.

Live Demo Gallery Watch Video

Familiar Windows Explorer-style User Interface

Be the first to create rich business applications with Windows Explorer style navigation user interface. Designed with sleek visual styles and intuitive interface, UXBreadCrumb significantly simplifies the navigation system in your business application by combining the address bar and menu functionality in a single place. This allows users to perform navigation in a simple point-and-click manner which ultimately leads to improved user experiences.

Smart Resizing and AutoFit

One of the best features in UXBreadCrumb is its smart resizing and auto fit feature similar to the behaviors in Windows Explorer. When the paths of the current address has exceeded the boundary of the UXBreadCrumb control, it will automatically remove the exceeding paths from the first to last order, and adjust the remaining paths into ellipsis text. Thanks to this smart built-in feature, you can build enterprise-grade business applications without worrying the depth of the navigation hierarchy.

One Click Editing

Although UXBreadCrumb is best operated with the mouse device, it also supports paths editing through keyboard. When enabled, users can enter edit mode with a single click. In addition, users can also activate the edit mode by either clicking the icon, pressing F2 key, or clicking an empty area/space. The available paths will be automatically retrieved from the sitemap as users type into the textbox.

Load-on-Demand

Designed to support the most demanding scenarios, UXBreadCrumb comes with built-in load-on-demand feature for better performance and scalability. This feature is particularly useful to improve the overall performance when the assigned data source is relatively large. It's also useful when the structure of the application is dynamic based on data at runtime. In such case, UXBreadcrumb will request the items as they are needed, and you can supply the items back to the control through a ViewModel implementation.

Customizable Style/Templates

UXBreadCumb provides various visual customizations. You can set the available properties to achieve the desired styles background and more. You can also edit the control’s template for complete customization using Microsoft Blend.

Rich Interactivity Features

UXBreadCrumb comes with comprehensive interactivity features that comply with ISO standards specification. Users can press the left or right arrow keys to navigate between path items, or F2 key to activate the editing mode. When the dropdown is shown, users can quickly select a location and press Enter to perform navigation.


In addition, UXBreadCrumb also implements single-click menu discovery. When users clicked on the arrow dropdown, the available child items for the particular path will be listed in the menu. In this state, users can hover on the other paths to discover the available items with simple mouse movement. Ultimately, this allow users to discover, explore and navigate in an intuitive "point-and-click" manner.

Back to top

Page Navigation

UXHyperlinkButton implements navigation source architecture to support ClientUI Navigation Framework by exposing NavigationUri and TargetName. UXHyperlinkButton is designed to facilitate the navigation between pages in the supported navigation host such as UXFrame and UXNavigationWindow.

External URI Navigation

In addition to the local page navigation, UXNavigationButton can be used for external URI, such as a web page. Standard safety and security web protocol are supported, such as http, https, and mailto. You can also specify where the page will be displayed.

External XAP Navigation

One of the most advanced features in ClientUI navigation framework is the seamless integration with the application framework, providing powerful navigation capability to the external application package using the same semantics and API used in navigation framework. This enables rapid composite application with on-demand XAP package loading mechanism.

Automatic State Synchronization

UXNavigationButton automatically activates the particular button associated to the currently navigated page and consistently deactivates the other buttons. This handful feature enables you to quickly add a new page and integrates it to the existing navigation frame without code. Regardless of the navigation source, the automatic state synchronization also recognizes navigation from browser’s address bar, history, or bookmark.

Customizable Appearance

UXHyperlinkButton is easy to style through various available properties, such as background, border brush, and more. Complete customization is also made possible through template.

Back to top

Core Navigation Component

UXFrame acts as the container for the navigable content and facilitates the navigation between pages. It supports navigation within the local assembly and external application package (XAP). Built upon ClientUI Framework, UXFrame delivers consistent navigation experiences across multiple nested navigation frames.

Visual Transitions

Visual Transitions provides visual hints for user showing the page navigation. With dozens of predefined animation library, you can easily add stunning visual transition to your navigation frame. You can also tweak this behavior further, for instances, using different transition for default, back, and forward navigation; change the transition duration; or detecting the navigation direction.

Friendly Error Page

Deliver a professionally finished application with streamlined error management. When an exception is caught during the navigation process, such as page not found, UXFrame immediately shows a friendly error page instead of an annoying JavaScript error message. The error page can be customized with your own XAML template.

Journal-aware Child Navigation

One of the powerful features in UXFrame is the full support for nested child navigation. Child navigation refers to the use of UXFrame inside a page which is hosted by an upper level of frames. More importantly, UXFrame also supports browser journal integration for the child level navigation, which is not supported in Silverlight's built-in or other navigation frameworks.

Integration with ClientUI Application Framework

ClientUI extends its navigation framework and integrates to its application framework to provide a seamless navigation capability to load the external application package using the same semantics and API as in the navigation framework. As a result, you can rapidly create composite navigation application, capable to navigate to pages in an external package without writing extensive code.

Role-based Security

Security is one of the most critical issues in every line-of-business scenarios. UXFrame is enhanced with user authentication and role-based security to protect the application and data. With single sign-on authentication, you can streamline the authentication implementation in your line-of-business applications. This allows one-time authentication for accessing all pages within the application. For developer, UXFrame includes authentication tracking using IsAuthenticating property.

Busy State Management

With the built-in busy state management, you can quickly create navigation applications with rich user experiences. The busy indicator gives visual hints to the users when an operation is in progress, such as data loading or update. The busy indicator is also easily customizable with your own XAML template.

Back to top

Journal Button

Elegant back-forward Navigation

UXJournalButton is a full-featured navigation control themed in Aero glass-style appearance providing built-in Back and Forward command to the navigation frame. If your page consists of multiple navigation frames, you set the NavigationTarget property to the name of the desired navigation frame.

Navigation History

The seamless navigation history synchronization enables multiple back and forth navigation, similar to the back and forward button in any internet browsers. More importantly, this feature works with navigation frame and navigation window through advanced event routing and commanding for loosely-coupled UI design pattern.

Customizable Tooltip

Tooltip is an important visual indicator informing user on a specific UI element, in this case the back and forward button. You can set the tooltip to something your users might feel more familiar or completely disable it.

Customizable Appearance

UXJournalButton provides various visual customizations. You can use the available properties to set the desired styles, such as the background, corner radius, border brush, and more. You can also edit the control’s template for complete customization.

Back to top

Full-fledge Navigation Bar

UXNavigationBar is a rich navigation control featuring complete navigation commands such as Back and Forward, Refresh, Stop, and Home button. Like UXJournalButton, UXNavigationBar also manages the navigation history of the primary host.

Add Custom Command

UXNavigationBar facilitates adding a new custom command through data template. The custom commands are automatically hosted in the UXToolGroup to provide a consistent styling with the built-in commands.

Customizable Tooltip

Tooltip is an important visual indicator informing user on a specific UI element, for example the back and forward button. You can set the tooltip to something your users might feel more familiar or completely disable it.

Customizable Individual Element Styles

To accommodate certain scenarios where you need to customize the style of a specific element in the control, UXNavigationBar provides an efficient way for you to assign a new style applied to the specific element without customizing the entire control.

Customizable Appearance

UXNavigationBar provides various visual customizations. You can set the available properties to achieve the desired styles background, corner radius, and more. You can also edit the control’s template for complete customization.

Back to top

Treeview

Selection Mode

UXTreeView is a hierarchical data visualization control with single and multiple item selection capability. Single mode lets you select an item at a time. In multiple mode, use the combination of CTRL or/and SHIFT key with mouse click or Enter or Spacebar key. Additionally, you can use keyboard to move from an item to another one. In Single mode, an item is automatically selected as user navigates.

Data Binding

UXTreeView provides data binding capability to easily bind linear or hierarchical data. You can use hierarchical data template mode for advanced binding by specifying ItemSource and ItemTemplate properties. UXTreeView also provides more simplified binding without template differentiation. You need to create a generic style for UXTreeViewItem and assign it to ItemContainerStyle property.

Commanding

Create consistent and reliable user experiences through ClientUI’s commanding infrastructure. It enables you to build loosely-coupled Silverlight and WPF applications by wiring your custom business logic and bind it through MVVM pattern. This results in high code reusability, better application stability, and long-term maintainability.

Node Editing

UXTreeView sports a built-in node editing capability. When the property is enabled, user can press F2 on the selected item to trigger the editing mode. By default, UXTextBox is the default editing control. For more advanced customization, you can substitute the editing control, for example using UXNumericUpDown by customizing the ItemEditTemplate property. You must bind the property to the control defined in the ItemEditTemplate property.

Check Box

To accommodate its innate nature as a hierarchical data visualization control, UXTreeView offers the unique TriState check box. It adds an intermediary state between checked and unchecked called indeterminate. Indeterminate state occurs when a parent node with partially checked child nodes. All checked nodes can be accessed from CheckedItems property.

Visual Animation

By default, UXTreeView applies sliding animation during the item expand and collapse to provide smooth and compelling user experiences. In certain cases where animation is not preferred, you can disable it by setting the EnableSlidingAnimation property to false.

Text Search

Text search is a unique feature that lets user to locate a specific node based on the typed characters in the hierarchical tree. This feature is property controlled and can be easily enabled as necessary.

Advanced Load-on-Demand

To address performance issue and provide better scalability, UXTreeView implements Load-on-Demand technique. This feature is particularly useful to improve the overall performance especially when the assigned data source is huge. This feature can be easily enabled via property. To achieve greater performance, UXTreeView offers two Load-on-Demand modes, Automatic Mode and Custom Mode. In Automatic Mode, UXTreeView automatically processes the child item by looking up the requested node in the hierarchy from the given data source. In Custom Mode, the child data retrieval is completely delegated to your application’s logic.

Drag Drop Capability

Based upon ClientUI’s DragDrop Framework, UXTreeView offers consistent drag and drop capability. Click here to learn more about ClientUI’s DragDrop behavior.

Customizable Appearance

UXTreeView supports easy appearance customization through the available properties such as the background, corner radius, border, and more. You can also easily customize the tree line visibility. Control and template editing is also supported for more comprehensive customization.

Back to top

Page Navigation

UXNavigationButton implements navigation source architecture to support ClientUI Navigation Framework by exposing NavigationUri and TargetName. UXNavigationButton is designed to facilitate the navigation between pages in the supported navigation host such as UXFrame and UXNavigationWindow.

External URI Navigation

In addition to the local page navigation, UXNavigationButton can be used for external URI, such as a web page. Standard safety and security web protocol are supported, such as: http, https, and mailto. You can also specify where the page will be displayed.

External XAP Navigation

One of the most advanced feature in ClientUI solid navigation framework is the seamless integration with the application framework to provide powerful navigation capability to the external application package using the same semantics and API used in navigation framework. This enables rapid composite application with on-demand XAP package loading mechanism.

Automatic State Synchronization

UXNavigationButton automatically activates the particular button associated to the currently navigated page and consistently deactivates the other buttons. This handful feature enables you to quickly add a new page and integrates it to the existing navigation frame without code. Regardless of the navigation source, the automatic state synchronization also recognizes navigation from browser’s address bar, history, or bookmark.

Customizable Appearance

UXHyperlinkButton is easy to style through various available properties, such as background, border brush, and more. Complete customization using template is also made possible.

Back to top

Window Presentation Model

Built upon the ClientUI windowing framework, UXNavigationWindow offers the same windowing presentation model and exposes the same rich features and capabilities as in UXWindow such as rich window interactions, corner-mode resizing, focus scope, activation and deactivation, desktop integration, and much more. It also adds a built-in navigation capability, allowing local pages navigation within the UXNavigationWindow.

Built-in Navigation Capability

Unlike other window controls, UXNavigationWindow adds a built-in navigation capability so that user can navigate between local pages within the UXNavigationWindow. With the provided back and forward journal button, users can conveniently browse through the navigation history.

Integrated with UXDesktop

As a family member of UXWindow, UXNavigationWindow leverages the power of the UXDesktop and the shell integration feature. When used with UXDesktop, you can open multiple navigation windows at the same time, with each navigation window having their own navigation frame.

Customizable Appearance

UXNavigationWindow supports easy appearance customization through the available properties such as the background, corner radius, border, and more. Control and template editing is also supported for more comprehensive customization.

Back to top

Tab Controls

Extended Designer Features

With the WYSIWYG designer extension, working with UXTabControl is easy and fast as it allows you to interact with the control directly in the designer surface. When you clicked on a tab header, it will activate the associated content as if it were in runtime. Any properties and content changes are persisted directly to the control’s XAML markup.

Tab Strip Placement

The flexibility to position the tab strip is one of its unique features. Not only you can place it on top or bottom of the control, you can set it to left and right as well.

Content Source

As a container control, UXTabControl offers various ways to provide content. You can use inline XAML content as its source, or an external XAML. Using external XAML is ideal for larger business application with many modular pages, enabling changes to be made on the source XAML without affecting the UXTabControl. Built upon ClientUI’s powerful navigation framework, UXTabControl inherits all its powerful features, such as on-demand XAP download, error pages, shell integration, and more.

Page Transition and Navigation Direction

UXTabControl provides an advanced feature to automatically detect the direction of the current navigation process. This feature automatically determines the navigation direction of the target selection relative to the current active selection. When enabled, UXTabControl will apply visual transition based on the navigation direction.

User Experience Features

UXTabControl is designed with strong compliance to usability standards as defined in ISO 9241, which includes visual hint for keyboard focus, navigation between tab headers and across the content using keyboard device. When a tab item is focused using keyboard, user can use directional arrow keys to move between tabs.

Customizable Appearance

UXTabControl is easy to style through various available properties, such as the background, border brush, border thickness and more. Complete customization can be achieved through template editing.

Back to top

Close window
back back back forwardforwardforward