UI Controls

UI Controls

Intersoft ClientUI® provides a rich library of controls that support user interface (UI) development, ranging from essential user information controls such as label, glass label, ellipsis text, progress bar, to advanced UI controls such as image loader, field label and media player.

Live Demo Gallery Watch Video

Busy Indicator

Busy Mode

UXBusyIndicator displays busy visual hint when IsBusy property is set to true. You can easily add a custom content to the busy indicator according to your need. Additionally, several layout related properties are available, such as determining the content placement, margin, and more.

Block Content When Busy

The main objective of UXBusyIndicator is to block the content from user interactions when the control is in busy state. It displays a customizable, semi-transparent overlay with gradient background on top of the content.

Hide Content

In data sensitive applications, it is important to keep information secure. UXBusyIndicator embraces this feature by hiding the content instead of blocking it with a semi-transparent overlay.

Busy Latency

In many cases, data processing or application tasks may complete faster than expected. The performance varies on a number of factors such as hardware configuration, network speed, and more. In a good sense of user experience, you may want to display the busy indicator only after a certain timespan has elapsed, for instance, after two seconds. This approach also reduces screen flickering which may occur when the busy indicator is displayed and then hidden in short time span.

Supports Routed Events

UXBusyIndicator provides IsBusyChanged event which occurs when the IsBusy property changes. The IsBusyChanged is a routed event with bubbling strategy, which means that you can flexibly handling the event anywhere in the tree node.

Customizable Busy Indicator Template

UXBusyIndicator includes a predefined busy indicator that shows a modern indeterminate spinner design. While this design suits to just any application types, you may often run into a scenario where you need to use other type of busy indicators, such as a progress bar. You can completely replace the default indicator with your custom design by providing a custom data template.

Customizable Appearance

UXBusyIndicator provides dozens of styling properties for easy appearance customization, such as background, corner radius, border, and more. Template editing is supported for more advanced customization.

Back to top

Call Out

Content Control

Unlike traditional tooltip control, Callout is designed to host various types of content, in addition to text and images. The unique feature of Callout is its easy configuration, such as corner radius setting with automatic margin, enabling you to achieve rich Callout design without trading-off functionality.

Customize Appearance

Create impressive balloon-type user interface with CallOut. Use the available properties to configure its appearance, such as background, border brush, stroke thickness and more.

Customize Pointer Appearance

The best thing about CallOut is the completely customizable pointer shape and appearance through simple property sets. You can define whether to show or hide the pointer, define the pointer position, change the pointer points, and more.

CallOut Effects

CallOut offers two types of effect properties, CallOutEffect and Effect. The difference between both is that CallOutEffect property applies to the CallOut shape only. CallOutEffect applies to the entire control’s element.

Use Target Element

Another key feature is the ability to specify TargetElement. By specifying the TargetElement property through element binding, CallOut automatically adjusts the pointer's position to the center point of the particular element.

Back to top

Ellipsis Text

Customize Ellipsis Position

EllipsisText is a label control with automatic text trimming mechanism. When the text exceeds the control dimension, it will trim the text and automatically add an ellipsis indicator to the text. You can customize its positioning, whether it is before, after, or in between the strings.

Customize Tooltip Appearance

When strings are trimmed using EllipsisText, a tooltip will appear as you hover on the element which displays the actual text. In addition to the default tooltip style, you can also use the standard Silverlight tooltip by changing the TooltipUIMode property to basic.

Back to top

Field Label

Content Control with Header

FieldLabel is a unique control that is based on Headered Content model, which mean a FieldLabel is comprised of a Header and a Content that accept any type of objects. FieldLabel simplifies data field definition in form-based application, allowing you to quickly create a neat form layout without tedious code.

Customizable Header Layout

Various settings are available to customize the header layout. You can specify the header display mode, adjust the header position, show or hide the header, and set the header margin.

Content Focus on Click

When FieldLabel is used to host content with input controls or any controls that support focus, it will smartly focuses on the particular control when the header is clicked. This behavior can be disabled using the available property.

Easy Styling

FieldLabel exposes Header and Content as a standalone control, thus you can easily style in a single XAML resource.

Customizable Appearance

The rich appearance customization lets you design and build a more personalized FieldLabel using the provided properties, such as: background, border customizations, and more.

Back to top

Glass Label

Content Control with ImageContent Model

GlassLabel is beyond ordinary label control – it lets you host any types of object, such as a text, an image, or even a panel. The ImageContent model lets you specify the image and content through the available properties.

Customize Appearance

With rich appearance customization, you can design and build a more personalized GlassLabel using the provided properties, such as background, corner radius, border customizations, and more.

Back to top

Image Loader

Customizable Behavior

Image Loader is an innovative control that shows image loading process for embedded, internal and external image. It also lets you set a default image when the real image is being loaded or completely disable and hide the progress bar indicator. A fully-loaded image is shown with fade-in animation and the progress bar will be faded-out.

Load Image to another Element

Image Loader supports the capability to redirect the loaded image to another image element. The most fundamental scenario that uses this feature is when you load a UI element’s background image.

Customizable Appearance

The rich appearance customization lets you deliver a more personalized ImageLoader using the provided properties. Basically, Image Loader consists of two elements, the image placeholder and UXProgressBar, both with individual customizations.

Back to top

Stylish Label

Content Control with ImageContent Model

StylishLabel is beyond ordinary label control – it lets you host any types of object, such as a text, an image, or even a panel. The ImageContent model lets you specify the image and content through the available properties.

Customizable Appearance

The rich appearance customization lets you design and build a more personalized StylishLabel using the provided properties, such as: background, corner radius, border customizations, and more.

Back to top

Progress Bar

Dual Progress Mode

UXProgressBar is a rich, Aero-style progress bar control supporting determinate and indeterminate modes. Use it in indeterminate mode to represent a longer asynchronous operation such as checking updates or downloading progress.

Change ProgressText Format

This fundamental setting lets you change the progress text instead of using the default one. This setting is only applicable for determinate mode.

Customizable Appearance

The rich appearance customization lets you design and build a more personalized UXProgressBar using the provided properties, such as background, border customization, progress bar highlight and more.

Back to top

Video Player

Playback Mode

Video Player provides two modes, Buffering and Pre-download. Buffering mode enables video to be streamed directly when played for the first time. There is no restriction in this mode and you can assign any sources to the control. In Pre-download mode, video will be downloaded before playing it. A progress bar is shown to indicate the download progress. As it completes, the video will be played automatically. In this mode, you need to set the security access of the designated source as it uses WebClient class from Silverlight core runtime.

Back to top

Close window
back back back forwardforwardforward