How to customize the region border of .NET MAUI DateTime RangeSelector (SfDateTimeRangeSelector)?
This article describes how to customize the region border of the Syncfusion .NET MAUI SfDateTimeRangeSelector control.
Step 1: Create a .NET MAUI application project in Visual Studio.
Step 2: Add the Syncfusion.Maui.Sliders NuGet to the project from nuget.org.
- Open the NuGet package manager in Visual Studio.
- Search for Syncfusion.Maui.Sliders and install it.
Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler as shown below.
The Syncfusion.Maui.Core package is a dependent on Syncfusion.Maui.Sliders NuGet package, and it will be installed automatically when you install the Syncfusion.Maui.Sliders package in step 2.
Using C#:
using Syncfusion.Maui.Core.Hosting;
namespace SliderDemo
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore(); // Handler for Syncfusion Core project
return builder.Build();
}
}
}
Step 4: Then add the .NET MAUI Sliders control namespace to the MainPage.xaml.
Using XAML:
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
Using C#:
using Syncfusion.Maui.Sliders;
Step 4: Now initialize the SfDateTimeRangeSelector as follows. Add the content for selector, here I have added SfChart control for reference. Now you can customize the region border on all sides by setting different values for ActiveRegionStrokeThickness and InactiveRegionStrokeThickness properties as shown below.
The below sample contains chart controls for representation. To achieve the below sample, Syncfusion.Maui.Charts Nuget package needs to be installed additionally.
Using XAML:
<sliders:SfDateTimeRangeSelector Minimum="2000-01-01"
Maximum="2010-01-01"
RangeStart="2003-01-01"
RangeEnd="2004-01-01"
Interval="2"
ShowTicks="True"
ShowLabels="True"
ActiveRegionStroke="#666666"
InactiveRegionStroke="#666666"
ActiveRegionStrokeThickness="1.5,0,1.5,1.5"
InactiveRegionStrokeThickness="0,1.5,0,0"
DateFormat="MMM">
<charts:SfCartesianChart>
<charts:SfCartesianChart.Series>
<charts:SplineAreaSeries ItemsSource="{Binding Source}"
XBindingPath="X"
YBindingPath="Y">
</charts:SplineAreaSeries>
</charts:SfCartesianChart.Series>
</charts:SfCartesianChart>
</sliders:SfDateTimeRangeSelector>
Output:
For more features in Syncfusion MAUI Sliders, Refer to the following links:
