Advanced Content Controls

Intersoft ClientUI® includes a vast collection of state-of-the-art Silverlight content controls to enhance your application with great user experiences. These advanced Silverlight content controls fully comply with the ISO-standards in usability, enabling developers and UX designers to rapidly add great presentation.

Live Demo Gallery Watch Video

Advanced Content Controls

Accordion

Single and Multiple Selection Mode

Depending on your application requirement, UXAccordion comes with four adjustable item selection modes, one, one or more, zero or one, and zero or more. ‘One’ means only one accordion item can be selected at a time. ‘One or more’ triggers the multiple selection. User can select one or more items at a time. ‘Zero or one’ selection mode enables you to select and deselect an item at a time. ‘Zero or more’ mode is similar to ‘zero or one’, but instead of selecting one item, user can select as many items as he/she wants.

Full Keyboard Support

The full keyboard support delivers a more natural way for users to navigate across accordion item. Use your keyboard’s arrow keys to move between items. In ‘One’ selection mode, navigating to an item immediately select it.
Use spacebar to select or unselect an item.

MVVM-ready Architecture

UXAccordion supports linear and hierarchical data binding for advanced line-of-business application. You can use the member path properties or ItemTemplate for more advanced binding technique.

Drag-drop Support

Built upon ClientUI’s fluid drag-drop framework, UXAccordion lets you easily enable drag and drop operations to the items with just a few property sets. You can drag an item within an accordion option or across another option. More advanced customization on the drag-drop behaviors are available through declarative property set, or through programmatic routed events and API calls.

Back to top

Interactive Call Out

Customizable Animation

UXCallOut is a unique content control that displays a callout shape on the top of other elements. It also provides you the capability to adjust the animation effect such as changing the display or hide animation; enable or disable the fade-in/out animation; customize the slide direction and more.

Flexible UXCallOut Positioning

With the ability to adjust the UXCallOut’s object positioning, you are able to maximize your screen estate without worrying the callout might appear in a wrong direction, or incorrectly overlapping other important elements.

Customizable Mouse Action

You can take full control when to show or hide callout control based on the mouse action. The default setting is to show callout on mouse enter. This means that the callout will be shown as it enters the target element. You can further adjust the callout behaviors, for example, hiding the callout’s instance on mouse leave.

Back to top

Item List

Multi-purpose Item Control

UXItemControls is a lightweight item control with customizable panel and item. You can easily change its layout using any panels derived from Panel class, such as UXGridPanel, DockPanel, WrapPanel, and more. Learn more about ClientUI panels.

Template and Style Selector

You can completely customize its item appearance by defining the item’s template. UXItemsControl is useful in various UI scenarios that host a collection of similar item types, such as a collection of field labels and input controls in form application. More advanced item customization can be elegantly achieved through item template selector and style selector.

Back to top

List Box

Single and Multiple Selection Mode

UXListBox provides three selection modes, Single, Multiple, and Extended. In Single mode, user can only select one item at a time. Multiple selection mode lets user select one or more items. A click on an item to select and another click on the item to deselect. Extended mode combines the use of multiple keyboard gestures, pressing CTRL and/or SHIFT to perform multiple selections similar to Windows operating system.

Full Keyboard Support

UXListBox implements full keyboard support for great usability, allowing users to interact with the list box in natural way. Use the arrow key to navigate between items, spacebar to select/deselect an item, or combine the CTRL and/or SHIFT with mouse click to select a range of items.

Text Search

UXListBox implements usability features that users to instantly locate a certain item based on the pressed character of the keyboard input device. Called text search, this feature is particularly useful in list controls that operate in read-only mode. The text search feature is sophisticatedly implemented according to user experience standards, which supports smart item searching behavior based on multiple characters captured by the keyboard input device. Learn more information about ClientUI user experience features.

MVVM-ready Architecture

UXListBox is designed with a solid architecture that allows you to bind a collection of data using loosely-coupled approach such as MVVM design pattern. UXListBox provides comprehensive member properties that related to data binding and selection such as DisplayMemberPath, SelectedValuePath and more.

Drag-drop Support

Built upon ClientUI’s fluid drag-drop framework, UXListBox lets you easily enable drag and drop operations to the items with just a few property sets. You can drag an item within the list box to re-arrange the item, or drag it to other droppable controls to move the item. More advanced customization on the drag-drop behaviors are available through declarative property sets, or through routed events and programmatic API calls.

Back to top

Resizable Pane

Plug-and-Play Control Architecture

UXResizablePane is a versatile content control with fluid resizing container employing a lightweight manager-less UI architecture. It enables you to wrap an existing element into a resizable layout without requiring major layout revamp. Users can drag the resize thumb to easily adjust the control’s dimension.

Built-in Expand/Collapse

In addition to the resizing behavior, UXResizablePane comes with a handy expand/collapse button to quickly toggle the layout. When integrated with expandable controls such as UXNavigationPane, UXResizablePane will leave few pixels when collapsed, allowing users to click on the Quick Access button to easily reveal the content in a floating popup.

Customizable Position

The various dock positioning enables you to achieve flexible layout depending on your application’s requirements. The positioning value is determined by the resize thumb location. By default the value is Right, which means the resize thumb is located on the right side of the container. You can customize the dock to Left, Top, or Bottom position.

Customizable Appearance

Additional adjustment on the appearance is provided. You can set collapse the control initially, hide the expand collapse button, and even hide the entire header bar.

Using UXResizablePane in a Popup

In addition to the engine behind UXNavigationPane’s expand collapse behavior; you can also use UXResizablePane with a popup control. It provides horizontal and vertical layout resizing capability to any floating popup. Use the available property to restrict the resizing direction.

Focus Scope

UXResizablePane is among the content controls in ClientUI that implements focus scope architecture. This means that input controls within the UXResizablePane would be logically grouped to provide focus related functions such as modal input, default button, group options, and more.

Back to top

Rich Predefined Animation

UXPopup control has built-in support for the animations that are typically associated with behaviors like fade-in and slide-in. You can activate these animations and customize many of the animation behaviors such as slide direction – all with property sets.

Flexible Positioning

You can put any content to be hosted in UXPopup, and you can display it anywhere desired, whether it's relative or absolute based on the preferred position. UXPopup supports a wealth relative positioning modes such as Bottom, BottomLeft, BottomRight, CenterParent, and more.

Easy Target Configuration

Another powerful feature of UXPopup is that you can easily assign the popup to any UIElement and defines a set of rules that determines when the popup should be opened and closed. UXPopup provides comprehensive properties for the target configuration such as TargetMouseEnterAction, TargetShowLatency, TargetContent and much more.

Automatic Screen Edge Alignment

UXPopup can align to the edge of the screen by repositioning itself so the entire content is visible on the screen. When this occurs, the distance between the target origin and popup alignment point might differ from the values of horizontal offset and vertical offset. Furthermore, UXPopup can reposition itself to ensure its entire content is visible.

Back to top

Content Scroller

Modern Design

UXScroller lets you host scrollable content in style. The modern minimalist design fits in every content neatly with two buttons, place on both sides for easy navigation.

Configurable Scroll Mode

Adding to its beautiful design, UXScroller offers two types of scroll behavior. You can set the control to perform scrolling either during mouse down or mouse over. You can also determine whether the control should scroll automatically based on the content dimension, or manually set the amount of scrolling value through a property set.

Customizable Appearance

UXScrollViewer 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

Built-in Expand/Collapse

UXNavigationPane is a state-of-the-art navigation control with unique tabbed interface and built-in expand/collapse capability. Modeled after Outlook 2010, users can easily collapse and resize the control to maximize the screen estate; or expand it to the original state when needed.

Compact Screen Mode

The compact screen mode offers more space for main application while preserving the navigation pane capability. When minimized, users can click on the Quick Access button. The content of the selected navigation pane item will be shown in a floating, resizable popup interface.

Customizable Elements

Customization is one of the control’s key strength for example customizing the visible items. Designed with fluid UI design, UXNavigationPane displays many items without compromising the application’s layout. Use the VisibleItemCount property to control the total displayed items. The rest of the items are placed in the footer element or context menu.

Page Navigation

UXNavigationPane implements navigation source architecture to support ClientUI Navigation Framework by exposing navigation-related properties such as NavigationUri and TargetName. It 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, UXNavigationPane 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 an external application package.. With identical semantics and API used in the navigation framework, you can rapidly create composite applications with on-demand XAP package loading mechanism.

Automatic Navigation Synchronization

Unlike other ClientUI navigation controls, UXNavigationPane offers non-linear navigation synchronization. For example, consider a mail client scenario that uses UXNavigationPane as its central navigation system which contains two navigation pane items, Mail and Contacts, each with different content. UXNavigationPane is designed to handle various incoming URLs like /Mail, /Mail/Inbox, /Mail/Outbox, and so forth, which automatically select the Mail navigation pane and the associated content item. And best of all, this time-saving feature is built right into the control so you don’t have to write a single line of code to maintain the navigation synchronization.

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.

Back to top

Scroll Viewer

Rich Visual Styles

Unlike Silverlight’s scroll viewer, UXScrollViewer sports modern visual styles with stunning animation and behaviors applied to its scrollbar element. For instances, the scrollbar’s buttons will be highlighted when the mouse cursor is over the scrollbar thumb, allowing users to easily realize the current state of the scrollbar.

Scroll Bar Visibility

UXScrollViewer provides customizable scrollbar visibility setting. You can choose to completely disable the scroll bar, or use auto mode to show or hide the scrollbar as necessary. You can also hide the scroll bar, while still maintaining the scroll behavior. Use this setting if you want to specifically lead user to a part of the content directly or if you want to implement a customized content scrolling behavior.

Customizable Appearance

UXScrollViewer 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

Close window
back back back forwardforwardforward