Getting Started in Xamarin DateTime Range Navigator

27 Mar 202411 minutes to read

This section walks you through the steps required to add SfDateTimeRangeNavigator and populate it with data, and also explains how to respond to range selection performed in the control.

Assembly deployment

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\{Version #}\Xamarin\lib.

E.g.: C:\Program Files (x86) \Syncfusion\Essential Studio\\Xamarin\lib


Assemblies can be found in unzipped package location(Documents/Syncfusion/{Version #}/Xamarin/lib) in Mac.

Adding SfDateTimeRangeNavigator reference

You can add SfDateTimeRangeNavigator reference in one of the following methods:

Method 1: Adding SfDateTimeRangeNavigator reference from

Syncfusion Xamarin components are available in To add SfDateTimeRangeNavigator to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Xamarin.SfChart, and then install it.

Adding Xamarin.Forms date-time range navigator reference


Install the same version of the SfChart NuGet in all the projects.

Method 2: Adding SfDateTimeRangeNavigator reference from toolbox

Syncfusion also provides Xamarin Toolbox. Using this toolbox, you can drag the SfDateTimeRangeNavigator control to the XAML page. It will automatically install the required NuGet packages and add the namespace to the page. To install Syncfusion Xamarin Toolbox, refer to Toolbox.

Method 3: Adding SfDateTimeRangeNavigator assemblies manually from the installed location

If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects.

Location : {Installed location}/{version}/Xamarin/lib

PCL Syncfusion.SfChart.XForms.dll
Android Syncfusion.SfChart.XForms.Android.dll
iOS Syncfusion.SfChart.XForms.iOS.dll
UWP Syncfusion.SfChart.UWP.dll


To know more about obtaining our components, refer to these links for Mac and Windows.


Starting with v16.2.0.x, if you reference Syncfusion assemblies from the trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to Syncfusion license key to know about registering Syncfusion license key in your Xamarin application to use our components.

Launching the application on each platform with range navigator

To use the range navigator inside an application, each platform application requires some additional configurations. The configurations vary from platform to platform and is discussed in the following sections:


If you are adding the references from toolbox, below steps are not needed.


To launch the range navigator in iOS, call the SfRangeNavigatorRenderer.Init() method in the FinishedLaunching overridden method of the AppDelegate class after the Xamarin.Forms framework initialization and before the LoadApplication method is called as demonstrated in the following code sample:

  • C#
  • public override bool FinishedLaunching(UIApplication app, NSDictionary options) 
        LoadApplication(new App()); 

    Universal Windows Platform (UWP)

    To launch the range navigator in UWP, call the SfRangeNavigatorRenderer.Init() method in the constructor of MainPage before the LoadApplication method is called as demonstrated in the following code sample.

  • C#
  • public MainPage() 
      LoadApplication (new App ()); 

    In addition to the above configurations, you need to initialize the control assemblies in App.xaml.cs in UWP project as shown in the below code snippets. This is required to deploy application with range navigator in Release mode in UWP platform.

  • C#
  • // In App.xaml.cs 
    protected override void OnLaunched(LaunchActivatedEventArgs e)
       if (rootFrame == null) 
          List<Assembly> assembliesToInclude = new List<Assembly>();
          assembliesToInclude.Add(typeof(Syncfusion.RangeNavigator.XForms.UWP. SfRangeNavigatorRenderer).GetTypeInfo().Assembly);
          Xamarin.Forms.Forms.Init(e, assembliesToInclude); 


    The Android platform does not require any additional configuration to render the range navigator.

    Adding and configuring SfDateTimeRangeNavigator 

    First, let us initialize the control with major and minor date time scales by specifying the minimum and maximum date to be visualized in the control using Minimum and Maximum properties.

    Following code example illustrates this,

    <rangenavigator:SfDateTimeRangeNavigator  Minimum="2015,01,01" Maximum="2016,01,01"/>
    SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
    	Minimum = new DateTime(2015, 01, 01),
    	Maximum = new DateTime(2016, 01, 01)

    Getting started for DateTime range navigator in Xamarin.Forms


    If you don’t specify Minimum and Maximum properties, minimum and maximum dates will be chosen automatically based on the provided data using ItemsSource property, which is explained in the next step in this section.

    Next, create a data model representing the list of sample data.

  • C#
  • public class DataModel
    	public ObservableCollection<Model> DateTimeData {get; set;}
    	public DataModel()
    		DateTimeData = new ObservableCollection<Model>()
    			new Model (new DateTime(2015, 01, 01), 14), 
    			new Model (new DateTime(2015, 02, 01), 54), 
    			new Model (new DateTime(2015, 03, 01), 23), 
    			new Model (new DateTime(2015, 04, 01), 53), 
    			new Model (new DateTime(2015, 05, 01), 25), 
    			new Model (new DateTime(2015, 06, 01), 32), 
    			new Model (new DateTime(2015, 07, 01), 78), 
    			new Model (new DateTime(2015, 08, 01), 100), 
    			new Model (new DateTime(2015, 09, 01), 55), 
    			new Model (new DateTime(2015, 10, 01), 38), 
    			new Model (new DateTime(2015, 11, 01), 27), 
    			new Model (new DateTime(2015, 12, 01), 56), 
    			new Model (new DateTime(2016, 01, 01), 33) 
    public class Model 
    	public DateTime Date { get; set; } 
    	public double Value { get; set; } 
    	public Model(DateTime dateTime, double value) 
    		Date = dateTime;
    		Value = value; 

    Then, let us populate the chart, which is displayed inside the SfDateTimeRangeNavigator, by setting the above data using ItemsSource property. And then specify the property names which contain the x and y values in the model using XBindingPath and YBindingPath properties.


    By default, data is visualized using line series. You can change the chart type or add more series by accessing the SfChart instance using SfDateTimeRangeNavigator.Content property.

    <rangenavigator:SfDateTimeRangeNavigator ItemsSource="{Binding DateTimeData}" XBindingPath="Date" YBindingPath="Value"/>
    SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator() 
    	rangeNavigator.ItemsSource = new DataModel().DateTimeData, 
    	rangeNavigator.XBindingPath = "Date", 
    	rangeNavigator.YBindingPath = "Value" 

    Adding chart as a content of Xamarin.Forms DateTime range navigator

    Handle range selection

    In real time, other controls like chart, grid etc., are updated in response to the range selection performed in SfDateTimeRangeNavigator. You can handle the selection using RangeChanged event and update other controls based on the selected date time or perform some other tasks using the selected data.


    You can get the selected start and end date using ViewRangeStart and ViewRangeEnd properties or get the collection of selected data using SelectedData property.

    Following code example illustrates how to handle range selection and update chart’s date time axis range,

    <ContentPage xmlns=""
      <StackLayout >
      	<chart:SfChart x:Name="chart" HorizontalOptions="FillAndExpand" 
          	<local:ViewModel />
          	<chart:DateTimeAxis x:Name="dateTimeAxis" Minimum="5/1/2015" Maximum="8/1/2015">
              	<chart:ChartAxisLabelStyle LabelFormat="MMM/dd"/>
          	<chart:SplineAreaSeries x:Name="series" ItemsSource="{Binding DateTimeRangeData}"
            	XBindingPath="XValue" YBindingPath="YValue"/>
      	<rangenavigator:SfDateTimeRangeNavigator x:Name="RangeNavigator" RangeChanged="rangeNavigator_RangeChanged" 
      	HorizontalOptions="FillAndExpand" ViewRangeStart="5/1/2015" ViewRangeEnd ="8/1/2015" ItemsSource="{Binding DateTimeRangeData}"
        XBindingPath="XValue" YBindingPath="YValue" HeightRequest = "200">
                <local:ViewModel />
    using Syncfusion.RangeNavigator.XForms;
    using Syncfusion.SfChart.XForms;
    namespace GettingStartedSample
      public partial class MainPage : ContentPage
        public MainPage()
    		StackLayout stackLayout = new StackLayout();
    		viewModel = new ViewModel();
    		SfChart chart = new SfChart();
    		chart.HorizontalOptions = LayoutOptions.FillAndExpand;
    		chart.VerticalOptions = LayoutOptions.FillAndExpand;
    		DateTimeAxis dateTimeAxis = new DateTimeAxis();
    		dateTimeAxis.Minimum = new DateTime(2015, 5, 1);
    		dateTimeAxis.Maximum = new DateTime(2015, 8, 1);
    		dateTimeAxis.LabelStyle = new ChartAxisLabelStyle { LabelFormat = "MMM/dd" };
    		chart.PrimaryAxis = dateTimeAxis;
    		NumericalAxis secondaryAxis = new NumericalAxis();
    		chart.SecondaryAxis = secondaryAxis;
    		SplineAreaSeries series = new SplineAreaSeries();
    		series.ItemsSource = viewModel.DateTimeRangeData;
    		series.XBindingPath = "XValue";
    		series.YBindingPath = "YValue";
    		SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator();
    		rangeNavigator.ItemsSource = viewModel.DateTimeRangeData;
    		rangeNavigator.XBindingPath = "XValue";
    		rangeNavigator.YBindingPath = "YValue";
    		rangeNavigator.ViewRangeStart = new DateTime(2015, 5, 1);
    		rangeNavigator.ViewRangeEnd = new DateTime(2015, 8, 1);
    		rangeNavigator.RangeChanged += rangeNavigator_RangeChanged;
    		rangeNavigator.HeightRequest = 200;
     		rangeNavigator.Content = chart;
    		this.Content = stackLayout;
    	private void rangeNavigator_RangeChanged(object sender, Syncfusion.RangeNavigator.XForms.RangeChangedEventArgs e)
      		dateTimeAxis.Minimum = e.ViewRangeStartDate;
      		dateTimeAxis.Maximum = e.ViewRangeEndDate;  

    You can find the complete getting started sample from this link.

    Range selection in Xamarin.Forms DateTime range navigator