Major and Minor scales in Xamarin DateTime Range Navigator

30 Nov 20227 minutes to read

The SfDateTimeRangeNavigator control displays major and minor scales at the top and bottom position of the control.

Intervals

By default, best possible interval component will be chosen for both major and minor scales based on the available size of the view. For example, if the available space is sufficient to show only year labels without overlapping, interval will be displayed in years. However, you can also set specific DateTimeIntervalType components using Intervals property as demonstrated in the below code snippet.

<rangenavigator:SfDateTimeRangeNavigator Minimum="1/1/2015" Maximum="1/1/2016" ViewRangeStart="5/1/2015" 
	ViewRangeEnd="9/1/2016" Intervals="Year,Month" />
SfDateTimeRangeNavigator dateTime = new SfDateTimeRangeNavigator();
dateTime.Intervals = DateTimeIntervalType.Year | DateTimeIntervalType. Month;

Intervals

Appearance Customization

The MajorScaleStyle and MinorScaleStyle properties of SfDateTimeRangeNavigator are used to customize the appearance of ticks and labels.

<rangenavigator:SfDateTimeRangeNavigator Minimum="1/1/2015" Maximum="1/1/2016" ViewRangeStart="5/1/2015" 
	ViewRangeEnd="9/1/2016">

	<rangenavigator:SfDateTimeRangeNavigator.MajorScaleStyle>
		<rangenavigator:ScaleStyle Position="Inside" LabelAlignment="Right" SelectedLabelTextColor="Blue" 
			SelectedLabelFontSize="20" SelectedLabelMargin="15" LabelTextColor="Black" LabelFontSize="20" LabelMargin="15"/>	
	</rangenavigator:SfDateTimeRangeNavigator.MajorScaleStyle>
	
	<rangenavigator:SfDateTimeRangeNavigator.MinorScaleStyle>
		<rangenavigator:ScaleStyle Position="Inside" LabelAlignment="Left" SelectedLabelTextColor="Black" 
			SelectedLabelFontSize="20" SelectedLabelMargin="15" LabelTextColor="Red" LabelFontSize="20" LabelMargin="15" />
	</rangenavigator:SfDateTimeRangeNavigator.MinorScaleStyle>

</rangenavigator:SfDateTimeRangeNavigator>
SfDateTimeRangeNavigator dateTime = new SfDateTimeRangeNavigator();

dateTime.MajorScaleStyle.Position = ScalePosition.Inside;
dateTime.MajorScaleStyle.LabelTextColor = Color.Black;
dateTime.MajorScaleStyle.LabelMargin = 15;
dateTime.MajorScaleStyle.LabelFontSize = 20;
dateTime.MajorScaleStyle.LabelAlignment = LabelAlignment.Right;
dateTime.MajorScaleStyle.SelectedLabelTextColor = Color.Red;
dateTime.MajorScaleStyle.SelectedLabelMargin = 15;
dateTime.MajorScaleStyle.SelectedLabelFontSize = 20;

dateTime.MinorScaleStyle.Position = ScalePosition.Inside;
dateTime.MinorScaleStyle.LabelTextColor = Color.Red;
dateTime.MinorScaleStyle.LabelMargin = 15;
dateTime.MinorScaleStyle.LabelFontSize = 20;
dateTime.MinorScaleStyle.LabelAlignment = LabelAlignment.Left;
dateTime.MinorScaleStyle.SelectedLabelTextColor = Color.Black;
dateTime.MinorScaleStyle.SelectedLabelMargin = 15;
dateTime.MinorScaleStyle.SelectedLabelFontSize = 20;

Appearance

Scale visibility

You can also control the visibility of minor scale and major scale using the MajorScaleStyle.IsVisible and MinorScaleStyle.IsVisible properties.

Hide minor scale

<rangenavigator:SfDateTimeRangeNavigator Minimum="2015,01,01" Maximum="2019,01,01">
        <rangenavigator:SfDateTimeRangeNavigator.MinorScaleStyle>
            <rangenavigator:ScaleStyle IsVisible="false" />
            </rangenavigator:SfDateTimeRangeNavigator.MinorScaleStyle>
    </rangenavigator:SfDateTimeRangeNavigator>
SfDateTimeRangeNavigator dateTime = new SfDateTimeRangeNavigator();
dateTime.Minimum = new DateTime(2015, 01, 01);
dateTime.Maximum = new DateTime(2019, 01, 01);
dateTime.MinorScaleStyle.IsVisible = false;

MinorScaleVisibility

Hide major scale

<rangenavigator:SfDateTimeRangeNavigator Minimum="2015,01,01" Maximum="2019,01,01">        
        <rangenavigator:SfDateTimeRangeNavigator.MajorScaleStyle>
            <rangenavigator:ScaleStyle IsVisible="false" />
        </rangenavigator:SfDateTimeRangeNavigator.MajorScaleStyle>
    </rangenavigator:SfDateTimeRangeNavigator>
SfDateTimeRangeNavigator dateTime = new SfDateTimeRangeNavigator();
dateTime.Minimum = new DateTime(2015, 01, 01);
dateTime.Maximum = new DateTime(2019, 01, 01);
dateTime.MajorScaleStyle.IsVisible = false;

MajorScaleVisibility

MinorScaleLabelsCreated event

This event occurs when the minor scale labels are created initially. The argument of this event contains the following information:

<rangenavigator:SfDateTimeRangeNavigator Minimum="2015,01,01" Maximum="2019,01,01" MinorScaleLabelsCreated="MinorScaleLabelsCreated" >
public MainPage()
    {
        InitializeComponent();
        SfDateTimeRangeNavigator dateTime = new SfDateTimeRangeNavigator();
		dateTime.Minimum = new DateTime(2015, 01, 01);
        dateTime.Maximum = new DateTime(2019, 01, 01);
		dateTime.MinorScaleLabelsCreated += MinorScaleLabelsCreated;
    }

 private void MinorScaleLabelsCreated(object sender, Syncfusion.RangeNavigator.XForms.MinorScaleLabelsCreatedEventArgs e)
    {
        // handle event action.
    }

MajorScaleLabelsCreated event

This event occurs when the major scale labels are created initially. The argument of this event contains the following information:

<rangenavigator:SfDateTimeRangeNavigator Minimum="2015,01,01" Maximum="2016,01,01" MajorScaleLabelsCreated="MajorScaleLabelsCreated" >
public MainPage()
    {
        InitializeComponent();
        SfDateTimeRangeNavigator dateTime = new SfDateTimeRangeNavigator();
		dateTime.Minimum = new DateTime(2015, 01, 01);
        dateTime.Maximum = new DateTime(2016, 01, 01);
		dateTime.MajorScaleLabelsCreated += MajorScaleLabelsCreated;
    }

private void MajorScaleLabelsCreated(object sender, Syncfusion.RangeNavigator.XForms.MajorScaleLabelsCreatedEventArgs e)
    {
        // handle event action.
    }