How to: Bind a Numeric Chart Range Control Client to a List of Custom Objects

Jun 07, 2019
2 minutes to read

This example shows how to bind a numeric chart range control client to a System.Collections.Generic.List containing NumericItem objects.

Each NumericItem object contains Argument and Value properties, to which a numeric chart range control client is bound via its ChartRangeControlClient.ArgumentDataMember and ChartRangeControlClient.ValueDataMember properties.

Note that the numeric chart client sorts data from a list of NumericItem objects by arguments in ascending order (when the ChartRangeControlClient.ArgumentDataMember property is specified). If you wish to see data in the order in which points have been added to the list, do not use the ChartRangeControlClient.ArgumentDataMember property.

See also:

xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        xmlns:Custom="http://schemas.devexpress.com/winfx/2008/xaml/charts/rangecontrolclient" 
        x:Class="BindNumericChartClientToItemList.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxe:RangeControl>
            <dxe:RangeControl.Client>
                <Custom:NumericChartRangeControlClient
                    ItemsSource="{Binding}" ArgumentDataMember="Argument"
                    ValueDataMember="Value"
                    GridSpacing="1" GridAlignment="1" >
                </Custom:NumericChartRangeControlClient>
            </dxe:RangeControl.Client>
        </dxe:RangeControl>
    </Grid>
</Window>

csharp

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

namespace BindNumericChartClientToItemList {

    public class NumericItem {
        public object Argument { get; set; }
        public object Value { get; set; }
    }

    public partial class MainWindow : Window {

        const int dataCount = 10;
        List<NumericItem> data = new List<NumericItem>();
        Random rand = new Random();

        List<NumericItem> GenerateNumericData() {
            for (int i = 0; i < dataCount; i++) {
                data.Add(new NumericItem() {
                    Argument = i,
                    Value = rand.Next(0, 30) + i
                });
            }
            return data;
        }

        public MainWindow() {
            InitializeComponent();
            this.DataContext = GenerateNumericData();
        }
    }
}

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

Namespace BindNumericChartClientToItemList

    Public Class NumericItem
        Private privateArgument As Object
        Public Property Argument() As Object
            Get
                Return privateArgument
            End Get
            Set(ByVal value As Object)
                privateArgument = value
            End Set
        End Property
        Private privateValue As Object
        Public Property Value() As Object
            Get
                Return privateValue
            End Get
            Set(ByVal value As Object)
                privateValue = value
            End Set
        End Property
    End Class

    Partial Public Class MainWindow
        Inherits Window

        Private Const dataCount As Integer = 10
        Private data As New List(Of NumericItem)()
        Private rand As New Random()

        Private Function GenerateNumericData() As List(Of NumericItem)
            For i As Integer = 0 To dataCount - 1
                data.Add(New NumericItem() With {.Argument = i, .Value = rand.Next(0, 30) + i})
            Next i
            Return data
        End Function

        Public Sub New()
            InitializeComponent()
            Me.DataContext = GenerateNumericData()
        End Sub
    End Class
End Namespace