Migrate from Xamarin SfDateTimeRangeNavigator to MAUI Range Selector

30 Sep 20222 minutes to read

In the Xamarin.Forms, SfDateTimeRangeNavigator control supports only the date-time scale. But in MAUI, separate controls for this date-time scale and numeric scale. Also, in the Xamarin.Forms, the control comes along with the Syncfusion.Xamarin.SfChart package, but in MAUI the controls comes with the Syncfusion.Maui.Sliders package. The following are the new MAUI controls for migrating from the Xamarin.Forms SfDateTimeRangeNavigator to MAUI.

1. SfDateTimeRangeSelector - For date-time scale.
2. SfRangeSelector – For numeric scale.

Namespaces

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector
Syncfusion.RangeNavigator.XForms	Syncfusion.Maui.Sliders

Properties

General

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector	Description
ViewRangeStart	RangeStart	Gets or sets the thumb start value of the track. The thumb starts from this value.
ViewRangeEnd	RangeEnd	Gets or sets the thumb end value of the track. The thumb ends in this value.
Intervals	IntervalType	Gets or sets the type of the date interval. By default, it will be Years.
OverlayColor	InactiveRegionFill	Gets or sets the color to the InactiveRegionColor.
LeftThumbStyle	ThumbStyle	Gets or sets a value to customize the appearance of the thumb shape.
RightThumbStyle
LeftTooltipStyle	Tooltip	Gets or sets a value to customize the appearance of the tooltip shape.
RightTooltipStyle

Thumb

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector	Description
ThumbStyle.Width	SliderThumbStyle.Radius	Gets or sets the radius for the thumb.
ThumbStyle.Height
ThumbStyle.BackgroundColor	SliderThumbStyle.Fill	Gets or sets the color for the thumb.
ThumbStyle.BorderColor	SliderThumbStyle.Stroke	Gets or sets the stroke color for the thumb.
ThumbStyle.BorderWidth	SliderThumbStyle.StrokeThickness	Gets or sets the stroke value for the thumb.

Ticks

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector	Description
ScaleStyle.TickLineColor	SliderTickStyle.ActiveFill	Gets or sets the brush for the active ticks.
	SliderTickStyle.InactiveFill	Gets or sets the brush for the inactive ticks.
ScaleStyle.TickLineWidth	SliderTickStyle.ActiveSize	Gets or sets the size for the active ticks.
	SliderTickStyle.InactiveSize	Gets or sets the size for the inactive ticks.

Labels

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector	Description
ScaleStyle.IsVisible	ShowLabels	Gets or sets a value indicating whether to show or hide the labels.
ScaleStyle.LabelTextColor	SliderLabelStyle.InactiveTextColor	Gets or sets the color for the inactive labels.
ScaleStyle.SelectedLabelTextColor	SliderLabelStyle.ActiveTextColor	Gets or sets the color for the active labels.
ScaleStyle.LabelFontFamily	SliderLabelStyle.InactiveFontFamily	Gets or sets the font family for the inactive labels.
ScaleStyle.SelectedLabelFontFamily	SliderLabelStyle.ActiveFontFamily	Gets or sets the font family for the active labels.
ScaleStyle.LabelFontAttribute	SliderLabelStyle.InactiveFontAttributes	Gets or sets the font attributes for the inactive labels.
ScaleStyle.SelectedLabelFontAttribute	SliderLabelStyle.ActiveFontAttributes	Gets or sets the font attributes for the active labels.
ScaleStyle.LabelFontSize	SliderLabelStyle.InactiveFontSize	Gets or sets the size for the inactive font.
ScaleStyle.SelectedLabelFontSize	SliderLabelStyle.ActiveFontSize	Gets or sets the size for the active font.

Tooltip

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector	Description
TooltipStyle.BackgroundColor	SliderTooltip.Fill	Gets or sets the brush for the tooltip.
TooltipStyle.TextColor	SliderTooltip.TextColor	Gets or sets the color for the tooltip text.
TooltipStyle.BorderColor	SliderTooltip.Stroke	Gets or sets the brush for the tooltip stroke.
TooltipStyle.BorderWidth	SliderTooltip.StrokeThickness	Gets or sets the stroke size for the tooltip.
TooltipStyle.FontSize	SliderTooltip.FontSize	Gets or sets the font size for the tooltip text.
TooltipStyle.FontFamily	SliderTooltip.FontFamily	Gets or sets the font family for the tooltip text.
TooltipStyle.FontAttributes	SliderTooltip.FontAttributes	Gets or sets the font attributes for the tooltip text.

Events

Xamarin SfDateTimeRangeNavigator	.NET MAUI SfDateTimeRangeSelector	Description
MinorScaleLabelsCreated	LabelCreated	It occurs when a label is created. It is used to format or change the label text.
RangeChanged	ValueChanged	It occurs when the user is done selecting a new value for the DateTime Range Selector.