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 DateTimeRangeSelector 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.
The Syncfusion.Maui.Core package is dependent on Syncfusion.Maui.Sliders NuGet package, and it will be installed automatically when you install the Syncfusion.Maui.Sliders package in step 2.
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.
XAML:
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
C#:
using Syncfusion.Maui.Sliders;
Step 4: Now, initialize the SfDateTimeRangeSelector as follows. Add the content for the selector. Here I have added the SfChart control for reference. Now 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 it, Syncfusion.Maui.Charts NuGet package needs to be installed.
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:
Conclusion
I hope you enjoyed learning how to customize the region border of the .NET MAUI DateTime Range Selector.
You can refer to our .NET MAUI DateTime Range Selector feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI DateTime Range Selector example to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
