Getting Started with WPF Range Selector (SfDateTimeRangeNavigator)

This sample demonstrates how to create and configure the Syncfusion SfDateTimeRangeNavigator control in a WPF application.

Visual Structure

The SfDateTimeRangeNavigator control is composed of the following elements:

• Higher Level Bar – Displays a timespan format one level higher than the lower level bar (e.g., year format yyyy).
• Lower Level Bar – Displays a timespan format one level lower than the higher level bar (e.g., month format MMM).
• Content – Holds any UI element (such as a chart) inside the navigator.
• Resizable Scroll Bar – Allows users to zoom and scroll the content and label bars.

Prerequisites

• Visual Studio 2022 or later
• .NET 10.0 (Windows)
• Syncfusion.SfChart.WPF NuGet package

Creating the Application

Step 1: Create a WPF Project

Open Visual Studio, create a new WPF Application project targeting .NET 10.0 (Windows).

Step 2: Install the NuGet Package

Install the Syncfusion.SfChart.WPF NuGet package via the NuGet Package Manager or by adding the following reference to your .csproj file:

<ItemGroup>
    <PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
</ItemGroup>

Step 3: Add the Namespace

Add the Syncfusion namespace in your MainWindow.xaml file:

xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"

Step 4: Create a Data Model

Create a model class (ItemsSource.cs) to represent the data:

namespace DateTimeRangeNavigatorWPF
{
    public class ItemsSource
    {
        public DateTime Date { get; set; }
        public double NoOfUsers { get; set; }
    }
}

Step 5: Create a ViewModel

Create a UsersViewModel.cs to provide sample data via an ObservableCollection:

using System;
using System.Collections.ObjectModel;

namespace DateTimeRangeNavigatorWPF
{
    public class UsersViewModel
    {
        public UsersViewModel()
        {
            this.UsersList = new ObservableCollection<ItemsSource>();
            DateTime date = DateTime.Today;
            UsersList.Add(new ItemsSource { Date = date.AddDays(1), NoOfUsers = 3000 });
            UsersList.Add(new ItemsSource { Date = date.AddDays(2), NoOfUsers = 5000 });
            UsersList.Add(new ItemsSource { Date = date.AddDays(3), NoOfUsers = 2000 });
            UsersList.Add(new ItemsSource { Date = date.AddDays(4), NoOfUsers = 7000 });
            UsersList.Add(new ItemsSource { Date = date.AddDays(5), NoOfUsers = 6000 });
            UsersList.Add(new ItemsSource { Date = date.AddDays(6), NoOfUsers = 3000 });
        }

        public ObservableCollection<ItemsSource> UsersList { get; set; }
    }
}

Step 6: Initialize SfDateTimeRangeNavigator in XAML

Set the DataContext, bind ItemsSource and XBindingPath, and add an SfChart as content inside MainWindow.xaml:

<Window x:Class="DateTimeRangeNavigatorWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DateTimeRangeNavigatorWPF"
        xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.DataContext>
            <local:UsersViewModel/>
        </Grid.DataContext>

        <Syncfusion:SfDateTimeRangeNavigator ItemsSource="{Binding UsersList}" XBindingPath="Date">
            <Syncfusion:SfDateTimeRangeNavigator.Content>
                <Syncfusion:SfChart x:Name="Chart">

                    <Syncfusion:SfChart.PrimaryAxis>
                        <Syncfusion:DateTimeAxis/>
                    </Syncfusion:SfChart.PrimaryAxis>

                    <Syncfusion:SfChart.SecondaryAxis>
                        <Syncfusion:NumericalAxis/>
                    </Syncfusion:SfChart.SecondaryAxis>

                    <Syncfusion:LineSeries
                        ItemsSource="{Binding UsersList}"
                        XBindingPath="Date"
                        YBindingPath="NoOfUsers">
                    </Syncfusion:LineSeries>

                </Syncfusion:SfChart>
            </Syncfusion:SfDateTimeRangeNavigator.Content>
        </Syncfusion:SfDateTimeRangeNavigator>
    </Grid>
</Window>

Key Properties

Property	Description
ItemsSource	Sets the data source for the SfDateTimeRangeNavigator. Must implement IEnumerable.
XBindingPath	Specifies the property name representing the date-time x-axis values.
Content	Hosts any UI element (e.g., SfChart) inside the navigator.
SelectedData	Returns the collection of data between the currently selected ranges.

Theme Support

SfDateTimeRangeNavigator supports various built-in themes. You can apply themes using:

• SfSkinManager
• ThemeStudio (Custom Themes)

References

• Syncfusion WPF Range Selector – Getting Started
• Syncfusion WPF Controls Documentation