Range Control Clients

• Sep 26, 2018
• 4 minutes to read

The Range Control Clients are special objects used to visualize a range. Clients interact with the Range Control via the IRangeControlClient interface.

Below is a list of DevExpress Range Control Clients.

• Calendar - shows a range of date-time values.

  

• Spark Point - shows a range of numeric values. Each value is represented by a dot.

  

• Spark Line - shows a range of numeric values. Each value is represented by a dot. Dots are connected by a continuous line.

  

• Spark Area - shows a range of numeric values. Each value is represented by a dot. Dots are connected by a continuous line. The areas above and below the line are of different colors.

  

• Spark Bar - shows a range of numeric values. Each value is represented by a vertical line.

  

This example shows how to create a RangeControl with the Spark Point client.

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RangeControl_example"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="using:DevExpress.UI.Xaml.Controls"
    x:Class="RangeControl_example.MainPage"
    mc:Ignorable="d">

    <Grid Height="400" Width="800">
        <Grid.DataContext>
            <local:DateTimeViewModel Count="1000" Step="06:00:00" Start="10000" />
        </Grid.DataContext>
        <Controls:RangeControl ShowRangeThumbs="True" ShowRangeBar="True">
            <Controls:SparkPointClient
                            ShowAxisLabels="True" 
                            ShowAxisXGridLines="True" 
                            ShowAxisXMinorGridLines="True"
                            DisplayMember="DisplayValue"
                            ValueMember="Value"
                            DisplayScaleType="Numeric"
                            ValueScaleType="DateTime" ItemsSource="{Binding Path=ItemsSource}" >
                <Controls:SparkPointClient.IntervalFactories>
                    <Controls:MonthIntervalFactory/>
                    <Controls:DayIntervalFactory/>
                </Controls:SparkPointClient.IntervalFactories>
            </Controls:SparkPointClient>
        </Controls:RangeControl>

    </Grid>
</Page>

C#

using System;
using System.Collections;
using System.Collections.Generic;
using Windows.UI.Xaml.Controls;

namespace RangeControl_example {
    public sealed partial class MainPage : Page {
        public MainPage() {
            this.InitializeComponent();
        }
    }
    public class DateTimeViewModel {
        public int Count { get; set; }
        public double Start { get; set; }
        IEnumerable itemsSource;
        public IEnumerable ItemsSource { get { return itemsSource ?? (itemsSource = CreateItemsSource(Count)); } }
        protected double GenerateStartValue(Random random) {
            return Start + random.NextDouble() * 100;
        }
        protected double GenerateAddition(Random random) {
            double factor = random.NextDouble();
            if (factor == 1)
                factor = 50;
            else if (factor == 0)
                factor = -50;
            return (factor - 0.5) * 50;
        }
        readonly Random random = new Random();
        DateTime start = new DateTime(2000, 1, 1);
        public TimeSpan Step { get; set; }

        protected IEnumerable CreateItemsSource(int count) {
            var points = new List<DateTimeDataPoint>();

            double value = GenerateStartValue(random);
            points.Add(new DateTimeDataPoint() { Value = start, DisplayValue = value });
            for (int i = 1; i < count; i++) {
                value += GenerateAddition(random);
                start = start + Step;
                points.Add(new DateTimeDataPoint() { Value = start, DisplayValue = value });
            }
            return points;
        }
    }
    public class NumericDataPoint {
        public int Value { get; set; }
        public double DisplayValue { get; set; }
    }
    public class DateTimeDataPoint {
        public DateTime Value { get; set; }
        public double DisplayValue { get; set; }
    }
}

VB.NET

Partial Public NotInheritable Class MainPage
    Inherits Page
    Public Sub New()
        Me.InitializeComponent()
    End Sub
End Class
Public Class DateTimeViewModel
    Public Property Count() As Integer
        Get
            Return privateCount
        End Get
        Set(value As Integer)
            privateCount = Value
        End Set
    End Property
    Private privateCount As Integer
    Public Property Start() As Double
        Get
            Return privateStart
        End Get
        Set(value As Double)
            privateStart = Value
        End Set
    End Property
    Private privateStart As Double
    Private privateitemsSource As IEnumerable
    Public ReadOnly Property ItemsSource() As IEnumerable
        Get
            Return If(privateitemsSource, (InlineAssignHelper(privateitemsSource, CreateItemsSource(Count))))
        End Get
    End Property
    Protected Function GenerateStartValue(random As Random) As Double
        Return Start + random.NextDouble() * 100
    End Function
    Protected Function GenerateAddition(random As Random) As Double
        Dim factor As Double = random.NextDouble()
        If factor = 1 Then
            factor = 50
        ElseIf factor = 0 Then
            factor = -50
        End If
        Return (factor - 0.5) * 50
    End Function
    ReadOnly random As New Random()
    Private begin As New DateTime(2000, 1, 1)
    Public Property [Step]() As TimeSpan
        Get
            Return privateStep
        End Get
        Set(value As TimeSpan)
            privateStep = Value
        End Set
    End Property
    Private privateStep As TimeSpan

    Protected Function CreateItemsSource(count As Integer) As IEnumerable
        Dim points = New List(Of DateTimeDataPoint)()

        Dim value As Double = GenerateStartValue(random)
        points.Add(New DateTimeDataPoint() With { _
            .Value = begin, _
            .DisplayValue = value _
        })
        For i As Integer = 1 To count - 1
            value += GenerateAddition(random)
            begin = begin + [Step]
            points.Add(New DateTimeDataPoint() With { _
                .Value = begin, _
                .DisplayValue = value _
            })
        Next
        Return points
    End Function
    Private Shared Function InlineAssignHelper(Of T)(ByRef target As T, value As T) As T
        target = value
        Return value
    End Function
End Class
Public Class NumericDataPoint
    Public Property Value() As Integer
        Get
            Return privateValue
        End Get
        Set(value As Integer)
            privateValue = Value
        End Set
    End Property
    Private privateValue As Integer
    Public Property DisplayValue() As Double
        Get
            Return privateDisplayValue
        End Get
        Set(value As Double)
            privateDisplayValue = Value
        End Set
    End Property
    Private privateDisplayValue As Double
End Class
Public Class DateTimeDataPoint
    Public Property Value() As DateTime
        Get
            Return privateValue
        End Get
        Set(value As DateTime)
            privateValue = Value
        End Set
    End Property
    Private privateValue As DateTime
    Public Property DisplayValue() As Double
        Get
            Return privateDisplayValue
        End Get
        Set(value As Double)
            privateDisplayValue = Value
        End Set
    End Property
    Private privateDisplayValue As Double
End Class