Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Collapse]Scheduler (legacy)
   [Expand]Overview
   [Expand]Getting Started
   [Expand]Fundamentals
   [Collapse]Visual Elements
    [Expand]Scheduler Control (legacy)
     Dialogs
     RangeControl (legacy)
     Date Navigator (legacy)
   [Expand]Examples
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

RangeControl (legacy)

Note

You are viewing documentation for the legacy WPF Scheduler control. If you're starting a new project, we strongly recommend that you use a new control declared in the DevExpress.Xpf.Scheduling namespace. If you decide to upgrade an existing project in order to switch to the updated scheduler control, see the Migration Guidelines document.

RangeControl is a control designed to help end-users select intervals and data ranges. When it is integrated with the SchedulerControl, it behaves like the timeline track bar, and allows quick timeline navigation and selection of date intervals.

The picture below illustrates a Range Control bound to a Scheduler Control.

The elements of the RangeControl are described below.

Expanded Viewport

The visual area that represents the time range that is currently visible in the Range Control. To change the visible time range in the viewport, do the following:

  • Scroll the mouse wheel or drag the Viewport Scroll Thumb.
  • Use Zoom Grips to stretch and reduce Range Control scales, and change the visible range.

Expanded Scales

Rulers with different time scales that are displayed at the top of the Range Control when it is bound to the SchedulerControl. Range Control scales specify a timeline to be used by end-users for navigating within the current view of the SchedulerControl.

Expanded Intervals

The most detailed scale divides the viewport area into intervals. Each interval displays information about appointment data contained within the corresponding time interval in the scheduler (via appointment thumbnails representing the number of appointments). Use the ScaleBasedRangeControlClientOptions.MinIntervalWidth property to specify the minimum interval width that can be displayed when resizing or zooming the viewport.

Expanded Selected Range

The time span selected by an end-user. It is highlighted in the RangeControl viewport and marked by Selection Thumbs.

There is two-way synchronization between the Range Control's selected range and the time interval that is visible in the SchedulerControl view. Changing the visible interval or active view of the scheduler automatically selects the corresponding range in the Range Control, and vice versa - selecting a time range in the Range Control changes the scheduler's visible interval and optionally switches the active view. To disable automatic synchronization, set the SchedulerOptionsRangeControl.AutoAdjustMode to false. To intercept auto adjustment, handle the SchedulerControl.RangeControlAutoAdjusting event.

The selected range can include a single time interval or multiple time intervals defined by the most detailed scale.

You can navigate through the scheduler and change its visible interval by selecting the time range in the Range Control in the following ways:

  • To select a single interval, click the required interval area.
  • To select continuous intervals, click and drag the mouse.
  • To resize the selected range in both directions, drag the Selection Thumbs.
  • To select another range by moving the currently Selected Range, drag the Selected Range area or Selection Scroll Thumb.
  • To select the corresponding time range, click the scale header.

Expanded Range

The total range that is available in the Range Control. Its boundaries are specified by the ScaleBasedRangeControlClientOptions.RangeMinimum and ScaleBasedRangeControlClientOptions.RangeMaximum properties.

Expanded Zoom&Scroll Bar

Indicates the visible and selected ranges within the total range of the Range Control. Use the visual elements of the Zoom&Scroll Bar to scroll and zoom the visible range, and move the selected range.

  • Selection Scroll Thumb - marks the selected range within the total range. Scroll it to move the selected range.
  • Viewport Scroll Thumb - marks the visible range within the total range. Scroll the Viewport Scroll Thumb by dragging it, or resize it via the Zoom Grips to change the visible range.
  • Zoom Grip - the outer edges of the Viewport Scroll Thumb. Use them to zoom in to and zoom out of the visible range.

Expanded Appointment Thumbnails

When bound to the SchedulerControl, the Range Control displays appointment data in its viewport. Each Range Control interval shows colored Appointment Thumbnails that represent appointment labels in the corresponding time interval of the scheduler.

The color of the thumbnail is the same as the label color of the corresponding appointment. To paint a thumbnail with a custom color, bind the thumbnail template to a custom color converter, as illustrated in the How to: Set the Color of the RangeControl Thumbnails (legacy) example.

The order in which thumbnails are displayed may differ from the order in which appointments are shown in the view. When the SchedulerControl uses Timeline View, the following criteria are applied to place thumbnails from bottom to top:

  1. Duration
  2. Start

As a rule, thumbnails for long appointments which occupy several days are placed at the bottom.

However, for views other than the Timeline, only appointment Start is taken into account for thumbnail ordering. An appointment which spans several days can be represented with different thumbnails, as illustrated below.

Note

Do not use the Range Control if the Timeline view has a custom scale whose intervals are too small. This may result in slow response and visual artifacts.

Expanded See Also

Is this topic helpful?​​​​​​​