DateTimeChartRangeControlClient.GridAlignment Property

Gets or sets the date-time measure unit to which the chart’s gridlines and labels should be aligned.

Namespace: DevExpress.Xpf.Charts.RangeControlClient

Assembly: DevExpress.Xpf.Charts.v24.1.dll

NuGet Package: DevExpress.Wpf.Charts

Declaration

C#

public DateTimeGridAlignment GridAlignment { get; set; }

VB.NET

Public Property GridAlignment As DateTimeGridAlignment

Property Value

Type	Description
DateTimeGridAlignment	A DateTimeGridAlignment enumeration value that represents the measurement unit to which the chart’s gridlines and labels should be aligned.

Available values:

Name	Description
Millisecond	Specifies a millisecond as the date-time unit to which axis grid lines should be aligned.
Second	Specifies a second as the date-time unit to which axis grid lines should be aligned.
Minute	Specifies a minute as the date-time unit to which axis grid lines should be aligned.
Hour	Specifies an hour as the date-time unit to which axis grid lines should be aligned.
Day	Specifies a day as the date-time unit to which axis gridlines should be aligned.
Week	Specifies a week as the date-time unit to which axis grid lines should be aligned.
Month	Specifies a month as the date-time unit to which axis grid lines should be aligned.
Quarter	Specifies a quarter of a year as the date-time unit to which axis grid lines should be aligned.
Year	Specifies a year as the date-time unit to which axis grid lines should be aligned.
Auto	The date-time unit to which axis gridlines should be aligned is calculated automatically.

Remarks

This setting is in effect if the ChartRangeControlClientBase.ShowGridLines property is set to true.

The following images demonstrate the GridAlignment property in action for the random function.

GridAlignment= Week	GridAlignment = Month

Note that the ChartRangeControlClient.GridSpacing property affects GridAlignment, as shown in the images below.

GridAlignment= Week, GridSpacing= 1	GridAlignment = Week, GridSpacing= 3

Example

This example demonstrates how to use the date-time chart client for a range control to display a chart with date-time data within the range control’s viewport.

In this example a date-time chart range control client is bound to a System.Collections.Generic.List containing DateTimeItem objects.

Each DateTimeItem object contains Argument and Value properties, to which a date-time chart range control client is bound via its ChartRangeControlClient.ArgumentDataMember and ChartRangeControlClient.ValueDataMember properties.

See also:

• How to: Bind a Numeric Chart Range Control Client to an Array of Simple Type Objects;
• How to: Bind a Numeric Chart Range Control Client to a List of Custom Objects.

MainWindow.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Windows

Namespace DateTimeChartRangeControlClient

    Public Class DateTimeItem
        Public Property Argument() As Object
        Public Property Value() As Object
    End Class

    Partial Public Class MainWindow
        Inherits Window

        Private Const dataCount As Integer = 100
        Private data As New List(Of DateTimeItem)()

        Private Function GenerateDateTimeData() As List(Of DateTimeItem)
            Dim now As Date = Date.Now.Date
            Dim rand As New Random()
            Dim value As Double = 0
            For i As Integer = 0 To dataCount - 1
                now = now.AddDays(1)
                value += (rand.NextDouble() - 0.5)
                data.Add(New DateTimeItem() With {.Argument = now, .Value = value + Math.Sin(i * 0.6)})
            Next i
            Return data
        End Function

        Public Sub New()
            InitializeComponent()
            Me.DataContext = GenerateDateTimeData()
        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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        xmlns:Custom="http://schemas.devexpress.com/winfx/2008/xaml/charts/rangecontrolclient" 
        x:Class="DateTimeChartRangeControlClient.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxe:RangeControl>
            <dxe:RangeControl.Client>
                <Custom:DateTimeChartRangeControlClient
                       ItemsSource="{Binding}" ArgumentDataMember="Argument" ValueDataMember="Value"                                                         
                       GridSpacing="4" GridAlignment="Week" >
                    <Custom:DateTimeChartRangeControlClient.View>
                        <Custom:RangeControlClientBarView/>
                    </Custom:DateTimeChartRangeControlClient.View>
                </Custom:DateTimeChartRangeControlClient>
            </dxe:RangeControl.Client>
        </dxe:RangeControl>
    </Grid>
</Window>

MainWindow.xaml.cs

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

namespace DateTimeChartRangeControlClient {

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

    public partial class MainWindow : Window {

        const int dataCount = 100;
        List<DateTimeItem> data = new List<DateTimeItem>();

        List<DateTimeItem> GenerateDateTimeData() {
            DateTime now = DateTime.Now.Date;
            Random rand = new Random();
            double value = 0;
            for (int i = 0; i < dataCount; i++) {
                now = now.AddDays(1);
                value += (rand.NextDouble() - 0.5);
                data.Add(new DateTimeItem() { Argument = now, Value = value + Math.Sin(i * 0.6) });
            }
            return data;
        }

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

Related GitHub Examples

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the GridAlignment property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

wpf-bind-a-range-control-to-a-chart-control/CS/GoldPrices/MainWindow.xaml#L82

ValueDataMember="Price"
GridAlignment="Month"
GridSpacing="2">