Range Control

  • 4 minutes to read

The RangeControl provides a data range selection functionality. In its simplest form, the Range Control can be used to select numeric ranges:

RangeControl-Video-SelectRange

At first glance, the Range Control might resemble a RangeTrackBarControl. However, its ability to select and visualize data ranges is much more flexible. Here is a list of supported features:

  • Multiple ways to select ranges;
  • Animated range selection;
  • Range zooming in and out.
  • Out-of-the-box support for numeric ranges;
  • Ability to implement a custom client that will render the Range Control's client area. Range selection and zooming are automatically supported for custom clients;
  • Horizontal and vertical orientations;
  • Touch screen support.

Range Control Client

Data for the Range Control is provided by a Range Control Client, which must be associated with the Range Control by using the RangeControl.Client property. The client also visualizes data in the Range Control's viewport in a specific manner. Embedded into the Range Control, the client automatically gains support for range selection and zooming.

The following Range Control Clients are available out of the box.

To embed a NumericRangeControlClient, NumericChartRangeControlClient, DateTimeRangeControlClient, DateTimeChartRangeControlClient, or TimeSpanChartRangeControlClient into the Range Control at design time, use the Range Control's smart tag.

When required, you can implement your own Range Control Client that will display data in a custom manner within the Range Control. See the Custom Range Control Client topic to learn more.

RangeControl-CustomClient

Range Selection

A user can select ranges within the Range Control in a number of ways:

Touch screens are also supported by the Range Control. So you can select ranges using your fingers as well.

Range Zooming

An end-user can zoom in and out of visible ranges in the Range Control via the Zoom&Scroll Bar.

RangeControl-ZoomScrollBar

Two Zoom Grips help an end-user to resize the visible range and as such, change the zoom factor. After zooming, the Viewport Scroll Thumb marks the bounds of the visible range within the total range. As the element's name suggests, dragging the Viewport Scroll Thumb shifts the visible range.

RangeControl-Video-ZoomRange

Range Control's Settings

The display of data within the Range Control's viewport is performed by the Range Control Client, not the Range Control itself. Once a Client is added to the Range Control, its customization settings affecting the display of data are exposed via the RangeControl.ClientOptions property.

When using the NumericRangeControlClient, you can customize the total range's bounds via the NumericRangeControlClient.Minimum and NumericRangeControlClient.Maximum properties. You can also customize the minimum increment for range selection via the NumericRangeControlClient.RulerDelta property. All these settings are exposed via the RangeControl.ClientOptions property.

RangeControl-Tut-NumRange-Step4-NumRangeControlClientOptions

The Range Control also provides settings that help you get the control's current state.