- Region color
- Region stroke
- Region stroke thickness
Contact Support
Regions in DateTime Range Selector (SfDateTimeRangeSelector)
This section explains how to customize the active and inactive regions in the DateTime Range Selector control.
Region color
Change the color of the active and inactive regions using the ActiveRegionFill
and InactiveRegionFill
properties of the RangeSelectorBase
class. The default value of the ActiveRegionFill
and the InactiveRegionFill
properties are SolidColorBrush(Colors.Transparent)
and SolidColorBrush(Color.FromRgba(255, 255, 255, 192)
respectively.
The active side of the DateTime Range Selector is between the start and the end thumbs.
The inactive side of the DateTime Range Selector is between the Minimum
value and the left thumb and the right thumb and the Maximum
value.
<ContentPage
...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
<sliders:SfDateTimeRangeSelector Minimum="2000-01-01"
Maximum="2005-01-01"
RangeStart="2001-01-01"
RangeEnd="2004-01-01"
ActiveRegionFill="#40FFFF00"
InactiveRegionFill="#33FF8A00">
<charts:SfCartesianChart>
...
</charts:SfCartesianChart>
</sliders:SfDateTimeRangeSelector>
</ContentPage>
SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.Minimum = new DateTime(2000, 01, 01);
rangeSelector.Maximum = new DateTime(2005, 01, 01);
rangeSelector.RangeStart = new DateTime(2001, 01, 01);
rangeSelector.RangeEnd = new DateTime(2004, 01, 01);
rangeSelector.ActiveRegionFill = new SolidColorBrush(Color.FromArgb("#40FFFF00"));
rangeSelector.InactiveRegionFill = new SolidColorBrush(Color.FromArgb("#33FF8A00"));
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;
Region stroke
Change the stroke color of the active and inactive regions using the ActiveRegionStroke
and InactiveRegionStroke
properties of the RangeSelectorBase
class. The default value of the ActiveRegionStroke
and the InactiveRegionStroke
properties are SolidColorBrush(Colors.Transparent)
and SolidColorBrush(Colors.Transparent)
respectively.
The active side of the DateTime Range Selector is between the start and the end thumbs.
The inactive side of the DateTime Range Selector is between the Minimum
value and the left thumb and the right thumb and the Maximum
value.
<ContentPage
...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
<sliders:SfDateTimeRangeSelector Minimum="2000-01-01"
Maximum="2005-01-01"
RangeStart="2001-01-01"
RangeEnd="2004-01-01"
ActiveRegionFill="#40FFFF00"
InactiveRegionFill="#33FF8A00"
ActiveRegionStroke="#FFFF00"
InactiveRegionStroke="#B8860B">
<charts:SfCartesianChart>
...
</charts:SfCartesianChart>
</sliders:SfDateTimeRangeSelector>
</ContentPage>
SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.Minimum = new DateTime(2000, 01, 01);
rangeSelector.Maximum = new DateTime(2005, 01, 01);
rangeSelector.RangeStart = new DateTime(2001, 01, 01);
rangeSelector.RangeEnd = new DateTime(2004, 01, 01);
rangeSelector.ActiveRegionFill = new SolidColorBrush(Color.FromArgb("#40FFFF00"));
rangeSelector.InactiveRegionFill = new SolidColorBrush(Color.FromArgb("#33FF8A00"));
rangeSelector.ActiveRegionStroke = new SolidColorBrush(Color.FromArgb("#FFFF00"));
rangeSelector.InactiveRegionStroke = new SolidColorBrush(Color.FromArgb("#B8860B"));
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;
Region stroke thickness
Change the stroke thickness of the active and inactive regions using the ActiveRegionStrokeThickness
and InactiveRegionStrokeThickness
properties of the RangeSelectorBase
class. The default value of the ActiveRegionStrokeThickness
and the InactiveRegionStrokeThickness
properties is Thickness(1)
.
The active side of the DateTime Range Selector is between the start and the end thumbs.
The inactive side of the DateTime Range Selector is between the Minimum
value and the left thumb and the right thumb and the Maximum
value.
<ContentPage
...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
<sliders:SfDateTimeRangeSelector Minimum="2000-01-01"
Maximum="2005-01-01"
RangeStart="2001-01-01"
RangeEnd="2004-01-01"
ActiveRegionFill="#40FFFF00"
InactiveRegionFill="#33FF8A00"
ActiveRegionStroke="#A52A2A"
InactiveRegionStroke="#A52A2A"
ActiveRegionStrokeThickness="3,0,3,0"
InactiveRegionStrokeThickness="0,3,0,3">
<charts:SfCartesianChart>
...
</charts:SfCartesianChart>
</sliders:SfDateTimeRangeSelector>
</ContentPage>
SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.Minimum = new DateTime(2000, 01, 01);
rangeSelector.Maximum = new DateTime(2005, 01, 01);
rangeSelector.RangeStart = new DateTime(2001, 01, 01);
rangeSelector.RangeEnd = new DateTime(2004, 01, 01);
rangeSelector.ActiveRegionFill = new SolidColorBrush(Color.FromArgb("#40FFFF00"));
rangeSelector.InactiveRegionFill = new SolidColorBrush(Color.FromArgb("#33FF8A00"));
rangeSelector.ActiveRegionStroke = new SolidColorBrush(Color.FromArgb("#A52A2A"));
rangeSelector.InactiveRegionStroke = new SolidColorBrush(Color.FromArgb("#A52A2A"));
rangeSelector.ActiveRegionStrokeThickness = new Thickness(3,0,3,0);
rangeSelector.InactiveRegionStrokeThickness = new Thickness(0,3,0,3);
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;