How to: Bind a Numeric Chart Range Control Client to an Array of Simple Type Objects

• Jun 07, 2019
• 2 minutes to read

This example demonstrates how to set up a range control with the numeric chart client to display a chart with numeric data in the range control’s background.

Usually, in order to provide data to a chart numeric range control client, you need to specify a datasource using the ChartRangeControlClient.ItemsSource property and specify the required data fields via ChartRangeControlClient.ArgumentDataMember and ChartRangeControlClient.ValueDataMember properties (for more information, see the How to: Bind a Numeric Chart Range Control Client to a List of Custom Objects example). Note that when the ArgumentDataMember property is specified, chart points are sorted by arguments in the ascending order.

In the current example, a numeric chart client is bound to an array of integers using the ItemsSource property. In addition, you can bind a numeric chart client to other simple type objects (short, integer, long, double, decimal, float types , etc.). In this scenario the data values are shown in the same order in which elements have been added to the array.

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Windows

Namespace NumericRangeControlClient

    Partial Public Class MainWindow
        Inherits Window

        Private dataArray() As Integer = { 0, 4, 2, 5, 4, 5, 3, 4, 8, 9, 10 }

        Public Sub New()
            InitializeComponent()
            DataContext = dataArray
        End Sub
    End Class
End Namespace

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       
        xmlns:Custom="http://schemas.devexpress.com/winfx/2008/xaml/charts/rangecontrolclient"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="NumericRangeControlClient.MainWindow"
        Title="MainWindow" Height="350" Width="525" >

    <Grid>
        <dxe:RangeControl  Margin="20,5"  ShowNavigationButtons="True" ShowRangeBar="True">
            <Custom:NumericChartRangeControlClient  ItemsSource="{Binding}"
                GridSpacing="1" GridAlignment="1">
                <Custom:NumericChartRangeControlClient.View>
                    <Custom:RangeControlClientBarView/>
                </Custom:NumericChartRangeControlClient.View>
            </Custom:NumericChartRangeControlClient>
        </dxe:RangeControl>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Windows;

namespace NumericRangeControlClient {

    public partial class MainWindow : Window {

        int[] dataArray = new int[] { 0, 4, 2, 5, 4, 5, 3, 4, 8, 9, 10 };

        public MainWindow() {
            InitializeComponent();
            DataContext = dataArray;
        }
    }
}