Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (29)Angular  (64)ASP.NET  (48)ASP.NET Core  (72)ASP.NET MVC  (88)Azure  (31)Blazor  (130)DocIO  (22)Essential JS 2  (76)Essential Studio  (168)File Formats  (25)Flutter  (121)JavaScript  (165)Microsoft  (107)PDF  (64)React  (45)Succinctly series  (126)Syncfusion  (534)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (29)Windows Forms  (57)WinUI  (38)WPF  (131)Xamarin  (142)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (55)Cloud  (11)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (53)Development  (322)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (9)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (268)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (33)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (20)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (87)UI  (183)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (292)What's new  (177)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing the New .NET MAUI Range Selector

Introducing the New .NET MAUI Range Selector

We are pleased to announce that the MAUI Sliders package has been updated in the 2022 Volume 1 release with a Range Selector control along with some new features in the existing Slider and Range Slider controls.

The .NET MAUI Range Selector is a highly interactive UI control for selecting a smaller range from a larger data set. It supports adding any type of control as its content. You can use this control for range navigation in your .NET MAUI applications.

In this blog, we will explore the features of the new .NET MAUI Range Selector and the steps to getting started with it.

Key features

The key elements of the .NET MAUI Range Selector control are:

Scales

Technically, the new .NET MAUI Range Selector is implemented as two different controls: Numeric Range Selector to handle numeric values and DateTime Range Selector to handle date-time values. Other than the underlying value-type difference, they share a common set of features and functionalities. The separation in implementation is just for improving performance.

Numeric Scale in .NET MAUI Range Selector

DateTime Scale in .NET MAUI Range SelectorYou can customize the active and inactive scale size and color using the built-in APIs, and for the date-time scale, you can have a range in any unit from years to seconds.

Ticks and labels

The .NET MAUI Range Selector supports both major and minor ticks. Use major ticks to visualize the intervals and minor ticks as dividers between the intervals. Typically, ticks will be rendered at the bottom of the scale, but you can also move them to the top of the scale by setting a negative value to the offset property.

Also, you can easily customize the active and inactive tick size and color using the built-in APIs.

Major and Minor Ticks in .NET MAUI Range SelectorShow labels at designated intervals, just like major ticks. Change the visual representation of the labels using the numeric and date-time formatting properties. You can even customize the active and inactive font size, text color, font attributes, and font family using the built-in APIs.

Also, using the built-in events, we can easily customize all the text to represent low, medium, and high values.

Labels in .NET MAUI Range Selector

Dividers

Render dividers in each interval to show the ranges accurately. You can customize their color and size using the built-in APIs.

Dividers in .NET MAUI Range Selector

Tooltips

Use tooltips to clearly indicate the selected values. You can make tooltips always visible or only visible when the user interacts with them.

You can also customize the tooltip text and its color, font size, font attributes, and font family using the built-in APIs.

Tooltips in .NET MAUI Range Selector

Regions

Render an overlay on the content to visualize the selected data clearly. You can customize its color and border using the built-in APIs.

Visualizing Data in a Region in .NET MAUI Range Selector

Steps to getting started

Follow these steps to add the .NET MAUI Range Selector to your app and use its basic features.

Step 1: Create an app with .NET MAUI

First, create a new .NET MAUI app in Visual Studio.

Create a New .NET MAUI Application in Visual Studio

Step 2: Install the Sliders package

Open the NuGet Package Manager (Tools > NuGet Package Manager > Manage NuGet Packages for Solution). Select the nuget.org package source. In the Browse area, search for Syncfusion.Maui.Sliders and install it.

Refer to the following image.
Install the Syncfusion.Maui.Sliders NuGet Package

Note: MAUI is still in preview mode, so the Syncfusion.Maui.Sliders package is tagged as preview. We have to select the Include Prerelease option to see the prerelease packages.

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the MauiProgram.cs file, register the handler for the Syncfusion Core using the ConfigureSyncfusionCore() method.

Refer to the following code.

using Syncfusion.Maui.Core.Hosting;
 
namespace GettingStarted;
 
public static class MauiProgram
{
 public static MauiApp CreateMauiApp()
 {
  var builder = MauiApp.CreateBuilder();
  builder
    .UseMauiApp<App>()
    .ConfigureSyncfusionCore()
    .ConfigureFonts(fonts =>
    {
      fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });
 
  return builder.Build();
 }
}

Step 4: Import the namespace

Import the Syncfusion.Maui.Sliders control namespace in your XAML or C# code.

XAML

xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"

C#

using Syncfusion.Maui.Sliders;

Step 5: Initialize the Range Selector

The following code examples show how to initialize the numeric and date-time Range Selectors, respectively.

Numeric Range Selector

XAML

<ContentPage ...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
...>
   <sliders:SfRangeSelector />
</ContentPage>

C#

using Syncfusion.Maui.Sliders;
 
namespace GettingStarted;
 
public partial class MainPage : ContentPage
{
 public MainPage()
 {
   InitializeComponent();
   SfRangeSelector selector = new SfRangeSelector();
   Content = selector;
 }
}

DateTime Range Selector

We have to set the Minimum, Maximum, RangeStart, and RangeEnd properties like in the following code to use a DateTime Range Selector.

XAML

<ContentPage ...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
...>
   <sliders:SfDateTimeRangeSelector Minimum="1990-01-01"
                                    Maximum="1991-01-01"
                                    RangeStart="1990-03-01"
                                    RangeEnd="1990-09-01" />
</ContentPage>

C#

using Syncfusion.Maui.Sliders;
 
namespace GettingStarted;
 
public partial class MainPage : ContentPage
{
 public MainPage()
 {
  InitializeComponent();
 
  SfDateTimeRangeSelector selector = new SfDateTimeRangeSelector()
  {
     Minimum = new DateTime(1990, 01, 01),
     Maximum = new DateTime(1991, 01, 01),
     RangeStart = new DateTime(1990, 03, 01),
     RangeEnd = new DateTime(1990, 09, 01),
  };
 
  Content = selector;
 }
}

Step 6: Adding content to Range Selector

Here I’m going to add our .NET MAUI Charts component as content to the DateTime Range Selector. To do so, follow the same procedure described above for installing the Sliders package (Step 2) and install the Syncfusion.Maui.Charts package.

Initialize the view model for the chart

Now, let’s create a simple data source for the chart.

C#

public class Data
{
  public Data(DateTime x, double y)
  {
    X = x;
    Y = y;
  }
 
  public DateTime X { get; set; }
 
  public double Y { get; set; }
}
 
public class ChartViewModel
{
  public ChartViewModel()
  {
    Source = new ObservableCollection<Data>
    {
      new Data(new DateTime(1990, 01, 01), 415),
      new Data(new DateTime(1990, 01, 16), 408),
      new Data(new DateTime(1990, 02, 01), 415),
      new Data(new DateTime(1990, 02, 16), 350),
      new Data(new DateTime(1990, 03, 01), 375),
      new Data(new DateTime(1990, 03, 16), 500),
      new Data(new DateTime(1990, 04, 01), 390),
      new Data(new DateTime(1990, 04, 16), 400),
      new Data(new DateTime(1990, 05, 01), 440),
      new Data(new DateTime(1990, 05, 16), 350),
      new Data(new DateTime(1990, 06, 01), 400),
      new Data(new DateTime(1990, 06, 16), 365),
      new Data(new DateTime(1990, 07, 01), 490),
      new Data(new DateTime(1990, 07, 16), 400),
      new Data(new DateTime(1990, 08, 01), 520),
      new Data(new DateTime(1990, 08, 16), 510),
      new Data(new DateTime(1990, 09, 01), 395),
      new Data(new DateTime(1990, 09, 16), 380),
      new Data(new DateTime(1990, 10, 01), 404),
      new Data(new DateTime(1990, 10, 16), 430),
      new Data(new DateTime(1990, 11, 01), 375),
      new Data(new DateTime(1990, 11, 16), 350),
      new Data(new DateTime(1990, 12, 01), 398),
      new Data(new DateTime(1990, 12, 16), 432),
   };
 }
 
 public ObservableCollection<Data> Source { get; set; }
}

Set the ChartViewModel instance as the BindingContext of your page to bind the ChartViewModel properties to the chart. Then, populate the chart by setting the above data as an ItemsSource for the AreaSeries and specifying the XBindingPath and YBindingPath as X and Y, respectively (X and Y are the model property names).

Now, set the interval as 1 month and enable the ticks, labels, and tooltip features to visualize the selected range clearly.

XAML

<ContentPage ...
    xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
    xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
    xmlns:local="clr-namespace:GettingStarted"
 ...>
 
 <ContentPage.BindingContext>
   <local:ChartViewModel />
 </ContentPage.BindingContext>
 
 <sliders:SfDateTimeRangeSelector Minimum="1990-01-01"
                                 Maximum="1991-01-01"
                                 RangeStart="1990-03-01"
                                 RangeEnd="1990-09-01"
                                 Interval="1"
                                 IntervalType="Months"
                                 ShowTicks="True"
                                 ShowLabels="True"
                                 DateFormat="MMM">
 
  <sliders:SfDateTimeRangeSelector.Tooltip>
    <sliders:SliderTooltip ShowAlways="True"
                         DateFormat="dd MMM" />
  </sliders:SfDateTimeRangeSelector.Tooltip>
 
  <charts:SfCartesianChart>
   <charts:SfCartesianChart.XAxes>
     <charts:DateTimeAxis IsVisible="False"
                          ShowMajorGridLines="False" />
   </charts:SfCartesianChart.XAxes>
 
   <charts:SfCartesianChart.YAxes>
     <charts:NumericalAxis IsVisible="False"
                           ShowMajorGridLines="False"
                           Minimum=”250” />
   </charts:SfCartesianChart.YAxes>
 
   <charts:AreaSeries ItemsSource="{Binding Source}"
                      XBindingPath="X"
                      YBindingPath="Y" />
  </charts:SfCartesianChart>
 </sliders:SfDateTimeRangeSelector>
 
</ContentPage>

C#

using Syncfusion.Maui.Charts;
using Syncfusion.Maui.Sliders;
 
namespace GettingStarted;
 
public partial class ZoomingPage : ContentPage
{
 public ZoomingPage()
 {
   InitializeComponent();
 
   ChartViewModel viewModel = new ChartViewModel();
 
   SfDateTimeRangeSelector selector = new SfDateTimeRangeSelector()
   {
       Minimum = new DateTime(1990, 01, 01),
       Maximum = new DateTime(1991, 01, 01),
       RangeStart = new DateTime(1990, 03, 01),
       RangeEnd = new DateTime(1990, 09, 01),
       Interval = 1,
       IntervalType = SliderDateIntervalType.Months,
       ShowTicks = true,
       ShowLabels = true,
       DateFormat = "MMM",
       Tooltip = new SliderTooltip() { ShowAlways = true, DateFormat = "dd MMM" },
   };
 
   SfCartesianChart chart = new SfCartesianChart();
   chart.XAxes.Add(new DateTimeAxis()
   {
     IsVisible = false,
     ShowMajorGridLines = false
   });
   chart.YAxes.Add(new NumericalAxis()
   {
     IsVisible = false,
     ShowMajorGridLines = false,
     Minimum = 250,
   });
 
   AreaSeries series = new AreaSeries()
   {
     ItemsSource = viewModel,
     XBindingPath = "X",
     YBindingPath = "Y"
    };
 
   chart.Series.Add(series);
 
   Content = selector;
 }
}

Adding .NET MAUI Charts as Content to Range Selector

Step 7: Visualize the selected data in the Range Selector using a chart

Now, I am going to add a LineSeries chart on top of the Range Selector to visualize the selected range in a more detailed manner. I bind the DateTime Range Selector’s RangeStart to Minimum and its RangeEnd to Maximum of the chart’s DateTimeAxis. Doing this will update the line chart based on the data we selected in the Range Selector.

Refer to the following code example.

<VerticalStackLayout>
 <charts:SfCartesianChart>
  <charts:SfCartesianChart.XAxes>
   <charts:DateTimeAxis Minimum="{Binding RangeStart, Source={x:Reference Selector}}"
                        Maximum="{Binding RangeEnd, Source={x:Reference Selector}}" />
  </charts:SfCartesianChart.XAxes>
 
  <charts:SfCartesianChart.YAxes>
    <charts:NumericalAxis />
  </charts:SfCartesianChart.YAxes>
 
  <charts:LineSeries ItemsSource="{Binding Source}"
                     XBindingPath="X"
                     YBindingPath="Y" />
 </charts:SfCartesianChart>
 
 <sliders:SfDateTimeRangeSelector>
   ...
 </sliders:SfDateTimeRangeSelector>
</VerticalStackLayout>

Visualizing the Selected Data in the Range Selector using a Chart

References

For more details, refer to the Getting Started with .NET MAUI Range Selector GitHub demo and documentation.

Conclusion

Thanks for reading! In this blog post, we explored the great features of our new .NET MAUI Range Selector available in the 2022 Volume 1 release.  Try this wonderful control and share your feedback in the comments section below.

Also, you can contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top