Skip to end of metadata
Go to start of metadata

Remarks

UXBusyIndicator is inherited from ISContentControl, which means that it can contain a single object of any types, such as a string, an image, or a panel. For more information about content model, see Content Model Overview.

You use UXBusyIndicator control to provide an easy way to show a busy visual hint on top of the content when the application is in progress executing a long running task, such as retrieving data, logging in, or saving a record.

UXBusyIndicator is designed as a content control, this means that you generally put the content inside the control, such as shown in the following example.

XAML

UXBusyIndicator displays a busy visual hint when the control is busy, which is done by setting the IsBusy property to true. You can also easily add a custom content to the busy indicator, such as showing a "Loading..." text, or other content that suitable to your application's context.

For more information about UXBusyIndicator, see UXBusyIndicator Overview.

Working with BlockUIOnBusy Property

One of the useful features in UXBusyIndicator is the ability to block the content from user interaction when the control is in busy state. This feature is enabled by default, which can be disabled by setting the BlockUIOnBusy property to false.

When enabled, UXBusyIndicator automatically disable the content and show an overlay on the top of the content which gives impression to users that the content cannot be accessed.

The overlay is set to a semi-transparent radial gradient background which is ideal for typical business applications. You can easily customize the background brush by setting the OverlayBackground property. In addition, you can provide more comprehensive styling to the overlay element by specifying a style to the OverlayStyle property.

Working with BusyContent Property and BusyContentPlacement Property

The following example shows how to add a text to the busy content and set the busy mode in Button.Click event.

XAML

In addition to customizing the busy content, there are several layout-related properties that you can configure such as the busy content placement position and the busy content margin. These properties provides an easy way for you to customize common settings without requiring control re-templating. 

By default, the busy content appears below the busy indicator, which is controlled through the BusyContentPlacement property, while the item spacing between the indicator and the content is controlled through the BusyContentMargin property.

Working with BusyLatency Property

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 ellapsed, for instance, after two seconds. This technique also reduces screen flickering which may occur when the busy indicator is displayed and then hidden in short timespan.

UXBusyIndicator introduces busy latency, a feature that allows you to set the timespan to wait before the busy indicator is displayed, when the IsBusy property changes to true. The default value for the busy latency is one second, which you can customize through the BusyLatency property.

The following example shows how to customize the timespan of the busy latency to two seconds.

XAML

Working with HideContentOnBusy Property

In addition to blocking the content, UXBusyIndicator also provides a feature to show only the busy indicator and hide the existing content. This mode is particularly useful in data sensitive scenarios such as in order submission or payment processing. You can enable this mode by setting the HideContentOnBusy property to true.

Although it is possible to enable both BlockUIOnBusy and HideContentOnBusy at the same time, you will need to set only one of the mode in most application scenarios.

The following illustration shows the UXBusyIndicator with the HideContentOnBusy property set to true.

In this mode, the content will show back when the value of the IsBusy property is set to false.

Working with IsBusy Property

UXBusyIndicator displays a busy visual hint when the control is busy, which is done by setting the IsBusy property to true. You can also easily add a custom content to the busy indicator, such as showing a "Loading..." text, or other content that suitable to your application's context.

The following example shows how to add a text to the busy content and set the busy mode in Button.Click event.

XAML
C#

The IsBusy property is a dependency property, which means you can bind it to a property in the ViewModel using MVVM design pattern. This allows you to set the busy mode from the user interaction logic in the ViewModel, track the notification and give feedback as a response. 

For more information on building Silverlight and WPF application with MVVM design pattern, see MVVM Pattern Overview.

For more information about UXBusyIndicator, see UXBusyIndicator Overview.

 

Definition

public class UXBusyIndicator : ISContentControl

Summary

The following table summarizes the members exposed in this class.

Public Constructors

UXBusyIndicator Constructor()Initializes a new instance of UXBusyIndicator class.

Public Properties

BlockUIOnBusyGets or sets a value that indicates whether the content should be blocked fro user interaction when busy.
BusyContentGets or sets the content to display when busy.
BusyContentMarginGets or sets the margin to apply to the busy content element.
BusyContentPlacementGets or sets the placement position of the busy content element, relative to the busy indicator.
BusyContentTemplateGets or sets the template to apply to the busy content element.
BusyIndicatorTemplateGets or sets the busy indicator data template.
BusyLatencyGets or sets the latency, in seconds, before the busy indicator is displayed when UXBusyIndicator is set to true.
DecoratorStyleGets or sets the style to apply to the busy indicator decorator element.
DisableContentOnBusyGets or sets a value indicating whether the content of the UXBusyIndicator control should be disabled when the IsBusy property is true.
HideContentOnBusyGets or sets a value that indicates whether the content should be collapsed when busy.
IndicatorVisibilityGets or sets a value indicating whether the indicator element is visible.
IsBusyGets or sets a value that indicates whether the control is busy.
OverlayBackgroundGets or sets the brush to apply to the overlay background.
OverlayStyleGets or sets the style to apply to the overlay element.

Protected Properties

ProductProduct Info.

Fields

BlockUIOnBusyPropertyIdentifies the BlockUIOnBusy dependency property.
BusyContentMarginPropertyIdentifies the BusyContentMargin dependency property.
BusyContentPlacementPropertyIdentifies the BusyContentPlacement dependency property.
BusyContentPropertyIdentifies the BusyContent dependency property.
BusyContentTemplatePropertyIdentifies the BusyContentTemplate dependency property.
BusyIndicatorTemplatePropertyIdentifies the BusyIndicatorTemplate dependency property.
BusyLatencyPropertyIdentifies the BusyLatency dependency property.
DecoratorStylePropertyIdentifies the BusyIndicatorDecoratorStyle dependency property.
DisableContentOnBusyPropertyIdentifies the DisableContentOnBusy dependency property.
HideContentOnBusyPropertyIdentifies the HideContentOnBusy dependency property.
IndicatorVisibilityPropertyIdentifies the IndicatorVisibility dependency property.
IsBusyChangedEventIdentifies the IsBusyChanged routed event.
IsBusyPropertyIdentifies the IsBusy dependency property.
OverlayBackgroundPropertyIdentifies the OverlayBackground dependency property.
OverlayStylePropertyIdentifies the OverlayStyle dependency property.

Public Methods

InitializeTemplates()Initializes the templates of the UXBusyIndicator control.
OnApplyTemplate()Build the visual tree of the UXBusyIndicator control.

Events

IsBusyChangedOccurs when the UXBusyIndicator property changes.

Public Constructors

public UXBusyIndicator()

Initializes a new instance of UXBusyIndicator class.

Public Properties

public bool BlockUIOnBusy { get; set; }

Gets or sets a value that indicates whether the content should be blocked fro user interaction when busy.

public object BusyContent { get; set; }

Gets or sets the content to display when busy.

public Thickness BusyContentMargin { get; set; }

Gets or sets the margin to apply to the busy content element.

public Dock BusyContentPlacement { get; set; }

Gets or sets the placement position of the busy content element, relative to the busy indicator.

public DataTemplate BusyContentTemplate { get; set; }

Gets or sets the template to apply to the busy content element.

public DataTemplate BusyIndicatorTemplate { get; set; }

Gets or sets the busy indicator data template.

public double BusyLatency { get; set; }

Gets or sets the latency, in seconds, before the busy indicator is displayed when UXBusyIndicator is set to true.

public Style DecoratorStyle { get; set; }

Gets or sets the style to apply to the busy indicator decorator element.

public bool DisableContentOnBusy { get; set; }

Gets or sets a value indicating whether the content of the UXBusyIndicator control should be disabled when the IsBusy property is true.

public bool HideContentOnBusy { get; set; }

Gets or sets a value that indicates whether the content should be collapsed when busy.

public Visibility IndicatorVisibility { get; set; }

Gets or sets a value indicating whether the indicator element is visible.

public bool IsBusy { get; set; }

Gets or sets a value that indicates whether the control is busy.

public Brush OverlayBackground { get; set; }

Gets or sets the brush to apply to the overlay background.

public Style OverlayStyle { get; set; }

Gets or sets the style to apply to the overlay element.

Protected Properties

protected ProductInfo Product { get; }

Product Info.

Fields

public static readonly DependencyProperty BlockUIOnBusyProperty

Identifies the BlockUIOnBusy dependency property.

public static readonly DependencyProperty BusyContentMarginProperty

Identifies the BusyContentMargin dependency property.

public static readonly DependencyProperty BusyContentPlacementProperty

Identifies the BusyContentPlacement dependency property.

public static readonly DependencyProperty BusyContentProperty

Identifies the BusyContent dependency property.

public static readonly DependencyProperty BusyContentTemplateProperty

Identifies the BusyContentTemplate dependency property.

public static readonly DependencyProperty BusyIndicatorTemplateProperty

Identifies the BusyIndicatorTemplate dependency property.

public static readonly DependencyProperty BusyLatencyProperty

Identifies the BusyLatency dependency property.

public static readonly DependencyProperty DecoratorStyleProperty

Identifies the BusyIndicatorDecoratorStyle dependency property.

public static readonly DependencyProperty DisableContentOnBusyProperty

Identifies the DisableContentOnBusy dependency property.

public static readonly DependencyProperty HideContentOnBusyProperty

Identifies the HideContentOnBusy dependency property.

public static readonly DependencyProperty IndicatorVisibilityProperty

Identifies the IndicatorVisibility dependency property.

public static readonly RoutedEvent IsBusyChangedEvent

Identifies the IsBusyChanged routed event.

public static readonly DependencyProperty IsBusyProperty

Identifies the IsBusy dependency property.

public static readonly DependencyProperty OverlayBackgroundProperty

Identifies the OverlayBackground dependency property.

public static readonly DependencyProperty OverlayStyleProperty

Identifies the OverlayStyle dependency property.

Public Methods

public void InitializeTemplates()

Initializes the templates of the UXBusyIndicator control.

public void OnApplyTemplate()

Build the visual tree of the UXBusyIndicator control.

Events

public event ISRoutedEventHandler IsBusyChanged

Occurs when the UXBusyIndicator property changes.

  • No labels