From ae4c0e31b1661735ccde835426a75e94501cd763 Mon Sep 17 00:00:00 2001 From: SanjaySF4372 <161026714+SanjaySF4372@users.noreply.github.com> Date: Tue, 28 Jul 2026 18:57:28 +0530 Subject: [PATCH 1/2] 1034689- Provided UG content changes for DataTime RangeSelector md files --- .../LiquidGlassSupport.md | 18 ++++---- MAUI/DateTime-Range-Selector/divider.md | 24 +++++++++-- .../events-and-commands.md | 35 +++++++++++---- .../getting-started.md | 10 ++--- MAUI/DateTime-Range-Selector/interval.md | 12 ++++-- MAUI/DateTime-Range-Selector/labels.md | 31 ++++++++++--- MAUI/DateTime-Range-Selector/migration.md | 14 +++--- MAUI/DateTime-Range-Selector/overview.md | 6 +-- MAUI/DateTime-Range-Selector/regions.md | 32 ++++++++++---- MAUI/DateTime-Range-Selector/selection.md | 26 +++++++++-- .../thumb-and-overlay.md | 29 +++++++++++-- MAUI/DateTime-Range-Selector/ticks.md | 43 ++++++++++++++++--- MAUI/DateTime-Range-Selector/tooltip.md | 15 ++++++- MAUI/DateTime-Range-Selector/track.md | 29 ++++++++++--- 14 files changed, 248 insertions(+), 76 deletions(-) diff --git a/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md b/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md index 1d4431b269..4ea4a0d1f9 100644 --- a/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md +++ b/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md @@ -1,6 +1,6 @@ --- layout: post -title: Liquid Glass Effect for .NET MAUI DateTime RangeSelector | Syncfusion® +title: Liquid Glass Effect for .NET MAUI DateTime Range Selector | Syncfusion® description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI DateTime RangeSelector (SfDateTimeRangeSelector) control. platform: MAUI control: SfDateTimeRangeSelector @@ -9,32 +9,34 @@ documentation: ug # Liquid Glass Effect in .NET MAUI DateTimeRangeSelector -The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI DateTime RangeSelector (SfDateTimeRangeSelector) control. +The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass-like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control. ## Apply liquid glass effect -Follow these steps to enable and configure the Liquid Glass Effect in the DateTime RangeSelector control: +Follow these steps to enable and configure the Liquid Glass Effect in the DateTime Range Selector control: -### Step 1: Enable the liquid glass effect on DateTime RangeSelector +### Step 1: Enable the liquid glass effect on DateTime Range Selector -Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_EnableLiquidGlassEffect) property to `true` in the [SfDateTimeRangeSelector](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html) control to apply the Liquid Glass Effect. When enabled,it provides responsive interaction for a smooth and engaging user experience. +Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_EnableLiquidGlassEffect) property to `true` in the [SfDateTimeRangeSelector](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html) control to apply the Liquid Glass Effect. When enabled, it provides responsive interaction for a smooth and engaging user experience. The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimeRangeSelector` control: {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" hl_lines="8" %} - + + EnableLiquidGlassEffect="True" /> {% endhighlight %} {% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="23" %} +using System; +using Microsoft.Maui.Controls; using Syncfusion.Maui.Sliders; var grid = new Grid @@ -64,7 +66,7 @@ this.Content = grid; {% endhighlight %} {% endtabs %} -The following screenshot illustrates SfRangeSlider with the glass effect visible on the thumb while it is pressed. +The following screenshot illustrates SfDateTimeRangeSelector with the glass effect visible on the thumb while it is pressed. ![date time range selector with liquid glass support](images/getting-started/rangeslider_liquidglass.gif) diff --git a/MAUI/DateTime-Range-Selector/divider.md b/MAUI/DateTime-Range-Selector/divider.md index 3eabe43ad9..d9f367f89d 100644 --- a/MAUI/DateTime-Range-Selector/divider.md +++ b/MAUI/DateTime-Range-Selector/divider.md @@ -1,15 +1,15 @@ --- layout: post -title: Dividers in .NET MAUI Range Selector control | Syncfusion® -description: Learn here all about the Dividers feature of .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Dividers in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the Dividers feature of the .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug --- -# Dividers in .NET MAUI DateTime Range Selector +# Dividers in .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) -This section explains how to add the dividers in the DateTime Range Selector(SfDateTimeRangeSelector). +This section explains how to add the dividers in the DateTime Range Selector (SfDateTimeRangeSelector). ## Show dividers @@ -43,6 +43,9 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -95,6 +98,9 @@ Change the active and inactive divider radius using the [`ActiveRadius`](https:/ {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -157,6 +163,11 @@ Also, change the active and inactive divider stroke color using the [`ActiveStro {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -220,6 +231,11 @@ Change the active and inactive divider colors using the [`ActiveFill`](https://h {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); diff --git a/MAUI/DateTime-Range-Selector/events-and-commands.md b/MAUI/DateTime-Range-Selector/events-and-commands.md index 7f099b41ed..8225e9bf13 100644 --- a/MAUI/DateTime-Range-Selector/events-and-commands.md +++ b/MAUI/DateTime-Range-Selector/events-and-commands.md @@ -1,7 +1,7 @@ --- layout: post -title: Events and Commands in.NET MAUI Range Selector control | Syncfusion® -description: Learn here all about adding the events and commands of Syncfusion® .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Events and Commands in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the events and commands of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Events and Commands in .NET MAUI DateTime Range Selector -This section explains how to add the events and commands for the DateTime Range Selector(SfDateTimeRangeSelector). +This section explains how to add the events and commands for the DateTime Range Selector (SfDateTimeRangeSelector). ## Events ### Handle callbacks -* [ValueChangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeStart) - Called when the user selects a new value for the selector by tapping or mouse down on the thumb. +* [ValueChangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeStart) - Called when the user starts selecting a new value for the selector by tapping or mouse down on the thumb. * [ValueChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html#Syncfusion_Maui_Sliders_SfDateTimeRangeSelector_ValueChanging) - Called when the user is selecting a new value for the selector by dragging the thumb. -* [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html#Syncfusion_Maui_Sliders_SfDateTimeRangeSelector_ValueChanged) - Called when the user completed selecting a new value. -* [ValueChangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeEnd) - Called when the user stopped interacting with the selector by tapping or mouse up the thumb. +* [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html#Syncfusion_Maui_Sliders_SfDateTimeRangeSelector_ValueChanged) - Called when the user completes selecting a new value. +* [ValueChangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeEnd) - Called when the user stops interacting with the selector by tapping or mouse up on the thumb. {% tabs %} @@ -48,6 +48,9 @@ This section explains how to add the events and commands for the DateTime Range {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; { SfCartesianChart chart = new SfCartesianChart(); @@ -91,7 +94,7 @@ private void OnValueChangeEnd(object sender, EventArgs e) Format or change the whole date label text using the [`LabelCreated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_LabelCreated) event. The [`SliderLabelCreatedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html) contains the following parameters: -* Text – Customize the text color using the [`Text`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Text) parameter. +* Text – Customize the text using the [`Text`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Text) parameter. * Style – Formats the text color, font size, font family, and offset using the [`Style`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Style) parameter. {% tabs %} @@ -125,6 +128,9 @@ Format or change the whole date label text using the [`LabelCreated`](https://he {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; { SfCartesianChart chart = new SfCartesianChart(); @@ -214,6 +220,9 @@ Format or change the whole tooltip label text using the [`ToolTipLabelCreated`]( {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; { SfCartesianChart chart = new SfCartesianChart(); @@ -278,6 +287,10 @@ The [`DragStartedCommand`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.S {% endhighlight %} {% highlight C# %} +using System; +using System.Windows.Input; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfCartesianChart chart = new SfCartesianChart(); SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() @@ -342,6 +355,10 @@ The [`DragStartedCommandParameter`](https://help.syncfusion.com/cr/maui/Syncfusi {% endhighlight %} {% highlight C# %} +using System; +using System.Windows.Input; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfCartesianChart chart = new SfCartesianChart(); SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() @@ -413,7 +430,7 @@ SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() Maximum = new DateTime(2018, 01, 01), RangeStart = new DateTime(2012, 01, 01), RangeEnd = new DateTime(2016, 01, 01), - DragStartedCommand = viewModel.DragStartedCommand, + DragCompletedCommand = viewModel.DragCompletedCommand, Content = chart }; @@ -477,7 +494,7 @@ SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() Maximum = new DateTime(2018, 01, 01), RangeStart = new DateTime(2012, 01, 01), RangeEnd = new DateTime(2016, 01, 01), - DragStartedCommand = viewModel.DragStartedCommand, + DragCompletedCommand = viewModel.DragCompletedCommand, DragCompletedCommandParameter = "1", Content = chart }; diff --git a/MAUI/DateTime-Range-Selector/getting-started.md b/MAUI/DateTime-Range-Selector/getting-started.md index e4031876ee..a0fe38744f 100644 --- a/MAUI/DateTime-Range-Selector/getting-started.md +++ b/MAUI/DateTime-Range-Selector/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with DateTime Range Selector control | Syncfusion® -description: This section explains about the getting started with Syncfusion® MAUI Range Selector (SfDateTimeRangeSelector) control. +description: This section explains how to get started with the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -77,13 +77,13 @@ Before proceeding, ensure the following are set up: ## Step 1: Create a new .NET MAUI project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +1. Go to **File > New Solution**, Select .NET (C#) and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click Create. ## Step 2: Install the Syncfusion® MAUI Sliders NuGet package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders/) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore` @@ -127,7 +127,7 @@ Create an instance of the SfDateTimeRangeSelector and initialize it as follows: {% tabs %} {% highlight xaml %} - - + {% endhighlight %} {% highlight C# %} diff --git a/MAUI/DateTime-Range-Selector/interval.md b/MAUI/DateTime-Range-Selector/interval.md index 60e81ba480..ef922b01bf 100644 --- a/MAUI/DateTime-Range-Selector/interval.md +++ b/MAUI/DateTime-Range-Selector/interval.md @@ -1,7 +1,7 @@ --- layout: post -title: Interval in.NET MAUI Range Selector control | Syncfusion® -description: Learn here all about adding the Interval feature of Syncfusion® .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Interval in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the Interval feature of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -17,7 +17,7 @@ The DateTime Range Selector has the elements like labels, ticks, and dividers. T Change the interval type using the [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_IntervalType) property. Format or change the label text using the [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_DateFormat) property. -For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) is `DateTime(2000, 01, 01)`, [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2005, 01, 01)`, [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is `1`, [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_IntervalType) is [`SliderDateIntervalType.Years`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderDateIntervalType.html#Syncfusion_Maui_Sliders_SliderDateIntervalType_Years), and the [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_DateFormat) is `yyyy`, then the Range Slider will render the labels, major ticks, and dividers at 2000, 2001, 2002, and so on. +For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) is `DateTime(2000, 01, 01)`, [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2005, 01, 01)`, [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is `1`, [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_IntervalType) is [`SliderDateIntervalType.Years`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderDateIntervalType.html#Syncfusion_Maui_Sliders_SliderDateIntervalType_Years), and the [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_DateFormat) is `yyyy`, then the DateTime Range Selector will render the labels, major ticks, and dividers at 2000, 2001, 2002, and so on. {% tabs %} @@ -49,6 +49,9 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01); @@ -103,6 +106,9 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01); diff --git a/MAUI/DateTime-Range-Selector/labels.md b/MAUI/DateTime-Range-Selector/labels.md index ec0c9e60c8..83347dc444 100644 --- a/MAUI/DateTime-Range-Selector/labels.md +++ b/MAUI/DateTime-Range-Selector/labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels in .NET MAUI Range Selector control | Syncfusion® -description: Learn here all about the Labels and its customization feature of .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Labels in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the labels and customization features of the .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -13,7 +13,7 @@ This section explains how to add the labels in the DateTime Range Selector. ## Show labels -The [`ShowLabels`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowLabels) property is used to render the labels at a given interval. The default value of the [`ShowLabels`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowLabels) property is `False`. +The [`ShowLabels`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowLabels) property is used to render the labels at the given interval. The default value of the [`ShowLabels`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowLabels) property is `False`. {% tabs %} @@ -42,6 +42,9 @@ The [`ShowLabels`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.R {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -93,6 +96,9 @@ The [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.I {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01, 09, 00, 00); @@ -145,6 +151,9 @@ The [`LabelsPlacement`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Slid {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2011, 01, 01); @@ -164,7 +173,7 @@ rangeSelector.Content = chart; ![RangeSelector label placement](images/labels-and-dividers/label-placement.png) -N> Refer [here](https://help.syncfusion.com/maui/datetime-range-selector/events-and-commands) to customize the label text format through range slider events. +N> Refer [here](https://help.syncfusion.com/maui/datetime-range-selector/events-and-commands) to customize the label text format through range selector events. ## Edge labels placement @@ -202,6 +211,9 @@ If the [`TrackExtent`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Slide {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2002, 01, 07); @@ -229,7 +241,7 @@ Change the active and inactive label appearance using the [`ActiveTextColor`](ht The active side of the DateTime Range Selector is between the start and end thumbs. -The inactive side of the DateTime Range Selector is between the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb and the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. +The inactive side of the DateTime Range Selector is between the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb, and between the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. {% tabs %} @@ -267,6 +279,10 @@ The inactive side of the DateTime Range Selector is between the [`Minimum`](http {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -293,7 +309,7 @@ rangeSelector.Content = chart; ## Label offset -Adjust the space between ticks and labels using the [`Offset`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelStyle.html#Syncfusion_Maui_Sliders_SliderLabelStyle_OffsetProperty) property. The default value of the [`Offset`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelStyle.html#Syncfusion_Maui_Sliders_SliderLabelStyle_Offset) property is 5.0 when the [`ShowTicks`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowTicks) is enabled. Otherwise, it is `15.0` by default. +Adjust the space between ticks and labels using the [`Offset`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelStyle.html#Syncfusion_Maui_Sliders_SliderLabelStyle_OffsetProperty) property. The default value of the [`Offset`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelStyle.html#Syncfusion_Maui_Sliders_SliderLabelStyle_Offset) property is 5.0 when the [`ShowTicks`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowTicks) is enabled. Otherwise, it is `15.0` by default. {% tabs %} @@ -326,6 +342,9 @@ Adjust the space between ticks and labels using the [`Offset`](https://help.sync {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); diff --git a/MAUI/DateTime-Range-Selector/migration.md b/MAUI/DateTime-Range-Selector/migration.md index d7dde5a527..32229b2953 100644 --- a/MAUI/DateTime-Range-Selector/migration.md +++ b/MAUI/DateTime-Range-Selector/migration.md @@ -1,18 +1,18 @@ --- layout: post -title: Migrate from Xamarin to .NET MAUI SfDateTimeRangeSelector | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin DateTimeRangeNavigator to Syncfusion® .NET MAUI DateTimeRangeSelector control and more. +title: Migrate from Xamarin SfDateTimeRangeNavigator to .NET MAUI SfDateTimeRangeSelector | Syncfusion® +description: Learn here all about migrating from the Syncfusion® Xamarin DateTimeRangeNavigator to the Syncfusion® .NET MAUI DateTimeRangeSelector control and more. platform: MAUI control: SfDateTimeRangeSelector documentation: ug ---- +--- -# Migrate from Xamarin SfDateTimeRangeNavigator to MAUI Range Selector +# Migrate from Xamarin SfDateTimeRangeNavigator to .NET MAUI Range Selector -In the Xamarin.Forms, [SfDateTimeRangeNavigator](https://help.syncfusion.com/cr/xamarin/Syncfusion.RangeNavigator.XForms.SfDateTimeRangeNavigator.html) 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](https://www.nuget.org/packages/Syncfusion.Xamarin.SfChart/) package, but in MAUI the controls comes with the [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders/) package. The following are the new MAUI controls for migrating from the Xamarin.Forms SfDateTimeRangeNavigator to MAUI. +In Xamarin.Forms, the [SfDateTimeRangeNavigator](https://help.syncfusion.com/cr/xamarin/Syncfusion.RangeNavigator.XForms.SfDateTimeRangeNavigator.html) control supports only the date-time scale. In .NET MAUI, there are separate controls for the date-time scale and the numeric scale. In Xamarin.Forms, the control comes along with the [Syncfusion.Xamarin.SfChart](https://www.nuget.org/packages/Syncfusion.Xamarin.SfChart/) package, but in .NET MAUI, the controls come with the [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders/) package. The following are the new .NET MAUI controls for migrating from the Xamarin.Forms SfDateTimeRangeNavigator to .NET MAUI. -1. SfDateTimeRangeSelector - For date-time scale. -2. SfRangeSelector – For numeric scale. +1. SfDateTimeRangeSelector - For date-time scale. +2. SfRangeSelector - For numeric scale. ## Namespaces diff --git a/MAUI/DateTime-Range-Selector/overview.md b/MAUI/DateTime-Range-Selector/overview.md index bfbcf889db..f8c5d7152e 100644 --- a/MAUI/DateTime-Range-Selector/overview.md +++ b/MAUI/DateTime-Range-Selector/overview.md @@ -1,19 +1,19 @@ --- layout: post title: .NET MAUI DateTime Range Selector control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Range Selector (SfDateTimeRangeSelector) control with key features and more. +description: Learn here all about the introduction of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control, its key features, and more. platform: maui control: SfDateTimeRangeSelector documentation: ug --- -# Overview of .NET MAUI DateTime Range Selector +# .NET MAUI DateTime Range Selector Overview - The Syncfusion® .NET MAUI DateTime Range Selector ([SfDateTimeRangeSelector](https://www.syncfusion.com/maui-controls/maui-range-selector)) is an interactive control that makes selecting a range of dates or times simple and clear. - Instead of manually entering values, users can drag two thumbs across a timeline to define both the start and end points within a minimum and maximum limit. -![.NET MAUI datetime range selector overview ](images/overview/datetime_range_selector.png) +![.NET MAUI DateTime range selector overview](images/overview/datetime_range_selector.png) ## Business use cases diff --git a/MAUI/DateTime-Range-Selector/regions.md b/MAUI/DateTime-Range-Selector/regions.md index 8607e947c7..ae3d6f73a3 100644 --- a/MAUI/DateTime-Range-Selector/regions.md +++ b/MAUI/DateTime-Range-Selector/regions.md @@ -1,7 +1,7 @@ --- layout: post -title: Regions in.NET MAUI Range Selector control | Syncfusion® -description: Learn here all about the Regions and its customization feature of .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Regions in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the regions and customization features of the .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -13,11 +13,11 @@ This section explains how to customize the active and inactive regions in the Da ## Region color -Change the color of the active and inactive regions using the [`ActiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionFill) and [`InactiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionFill) properties of the [`RangeSelectorBase`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html) class. The default value of the [`ActiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionFill) and the [`InactiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionFill) properties are `SolidColorBrush(Colors.Transparent)` and `SolidColorBrush(Color.FromRgba(255, 255, 255, 192)` respectively. +Change the color of the active and inactive regions using the [`ActiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionFill) and [`InactiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionFill) properties of the [`RangeSelectorBase`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html) class. The default values of the [`ActiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionFill) and the [`InactiveRegionFill`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_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`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb and the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. +The inactive side of the DateTime Range Selector is between the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb, and between the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. {% tabs %} @@ -45,6 +45,11 @@ The inactive side of the DateTime Range Selector is between the [`Minimum`](http {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01); @@ -64,11 +69,11 @@ rangeSelector.Content = chart; ## Region stroke -Change the stroke color of the active and inactive regions using the [`ActiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStroke) and [`InactiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStroke) properties of the [`RangeSelectorBase`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html) class. The default value of the [`ActiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStroke) and the [`InactiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStroke) properties are `SolidColorBrush(Colors.Transparent)` and `SolidColorBrush(Colors.Transparent)` respectively. +Change the stroke color of the active and inactive regions using the [`ActiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStroke) and [`InactiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStroke) properties of the [`RangeSelectorBase`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html) class. The default values of the [`ActiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStroke) and the [`InactiveRegionStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_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`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb and the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. +The inactive side of the DateTime Range Selector is between the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb, and between the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. {% tabs %} @@ -98,6 +103,11 @@ The inactive side of the DateTime Range Selector is between the [`Minimum`](http {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01); @@ -119,11 +129,11 @@ rangeSelector.Content = chart; ## Region stroke thickness -Change the stroke thickness of the active and inactive regions using the [`ActiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStrokeThickness) and [`InactiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStrokeThickness) properties of the [`RangeSelectorBase`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html) class. The default value of the [`ActiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStrokeThickness) and the [`InactiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStrokeThickness) properties is `Thickness(1)`. +Change the stroke thickness of the active and inactive regions using the [`ActiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStrokeThickness) and [`InactiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStrokeThickness) properties of the [`RangeSelectorBase`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html) class. The default values of the [`ActiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_ActiveRegionStrokeThickness) and the [`InactiveRegionStrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeSelectorBase-1.html#Syncfusion_Maui_Sliders_RangeSelectorBase_1_InactiveRegionStrokeThickness) properties are `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`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb and the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. +The inactive side of the DateTime Range Selector is between the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) value and the left thumb, and between the right thumb and the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) value. {% tabs %} @@ -155,6 +165,12 @@ The inactive side of the DateTime Range Selector is between the [`Minimum`](http {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01); diff --git a/MAUI/DateTime-Range-Selector/selection.md b/MAUI/DateTime-Range-Selector/selection.md index 6444bccd69..fd5bda5a3e 100644 --- a/MAUI/DateTime-Range-Selector/selection.md +++ b/MAUI/DateTime-Range-Selector/selection.md @@ -1,7 +1,7 @@ --- layout: post -title: Range selection in .NET MAUI Range Selector control | Syncfusion® -description: Learn here all about range selection of Syncfusion® .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Range selection in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the range selection feature of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -15,7 +15,7 @@ This section helps to learn about the range selection in the DateTime Range Sele Move the thumb in a discrete manner for date values using the [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_StepDuration) property in the DateTime Range Selector. -For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) is DateTime(2015, 01, 01), [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is DateTime(2020, 01, 01), and the [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_StepDuration) is `1`, the Range Selector will move the thumbs at DateTime(2015, 01, 01), DateTime(2016, 01, 01), DateTime(2017, 01, 01),and DateTime(2018, 01, 01). +For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) is DateTime(2000, 01, 01), [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is DateTime(2005, 01, 01), and the [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_StepDuration) is `1`, the DateTime Range Selector will move the thumbs at DateTime(2000, 01, 01), DateTime(2001, 01, 01), DateTime(2002, 01, 01), DateTime(2003, 01, 01), and DateTime(2004, 01, 01). {% tabs %} @@ -48,6 +48,9 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2000, 01, 01); @@ -102,6 +105,9 @@ Both the thumbs are moved to the selected interval if the [EnableIntervalSelecti {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -155,6 +161,9 @@ When the [DragBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Slid {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -206,6 +215,9 @@ When the [DragBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Slid {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -257,6 +269,9 @@ When the [DragBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sli {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -279,7 +294,7 @@ rangeSelector.Content = chart; ## Deferred update -You can control when the dependent components are updated while thumbs are being dragged continuously. It can be achieved by setting the `EnableDeferredUpdate` property and the delay in the update can be achieved by setting the `DeferredUpdateDelay` property. The default value of the `DeferredUpdateDelay` property is `500` milliseconds. +You can control when the dependent components are updated while the thumbs are being dragged continuously. It can be achieved by setting the `EnableDeferredUpdate` property and the delay in the update can be achieved by setting the `DeferredUpdateDelay` property. The default value of the `DeferredUpdateDelay` property is `500` milliseconds. It invokes the `ValueChanging` event when the thumb is dragged and held for the duration specified in the `DeferredUpdateDelay`. However, the values are immediately updated in touch-up action. @@ -312,6 +327,9 @@ It invokes the `ValueChanging` event when the thumb is dragged and held for the {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); diff --git a/MAUI/DateTime-Range-Selector/thumb-and-overlay.md b/MAUI/DateTime-Range-Selector/thumb-and-overlay.md index 8202b96a21..4dd5a9f9d8 100644 --- a/MAUI/DateTime-Range-Selector/thumb-and-overlay.md +++ b/MAUI/DateTime-Range-Selector/thumb-and-overlay.md @@ -1,7 +1,7 @@ --- layout: post -title: Thumb and Overlay in .NET MAUI Range Selector control | Syncfusion® -description: Learn here all about the Thumb and Thumb Overlay features of Syncfusion® .NET MAUI Range Selector (SfDateTimeRangeSelector) control and more. +title: Thumb and Overlay in .NET MAUI DateTime Range Selector control | Syncfusion® +description: Learn here all about the Thumb and Thumb Overlay features of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector documentation: ug @@ -12,7 +12,7 @@ documentation: ug This section helps to learn about how to customize the thumb and thumb overlay in the DateTime Range Selector. * Thumb - It is one of the slider elements that can be used to drag and change the selected value. -* Thumb overlay - It is rendered around the thumb while interacting with them. +* Thumb overlay - It is rendered around the thumb while interacting with it. ## Thumb size @@ -46,6 +46,9 @@ Change the thumb size using the [`ThumbStyle`](https://help.syncfusion.com/cr/ma {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Charts; +using Syncfusion.Maui.Sliders; SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector(); rangeSelector.Minimum = new DateTime(2010, 01, 01); @@ -73,7 +76,7 @@ Change the color of the thumb using the [`Fill`](https://help.syncfusion.com/cr/ + xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"> Date: Wed, 29 Jul 2026 10:46:00 +0530 Subject: [PATCH 2/2] 1034689 - Resolving front matter errors --- MAUI/DateTime-Range-Selector/LiquidGlassSupport.md | 2 +- MAUI/DateTime-Range-Selector/divider.md | 2 +- MAUI/DateTime-Range-Selector/events-and-commands.md | 2 +- MAUI/DateTime-Range-Selector/migration.md | 4 ++-- MAUI/DateTime-Range-Selector/selection.md | 2 +- MAUI/DateTime-Range-Selector/thumb-and-overlay.md | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md b/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md index 4ea4a0d1f9..0cb593ceff 100644 --- a/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md +++ b/MAUI/DateTime-Range-Selector/LiquidGlassSupport.md @@ -1,6 +1,6 @@ --- layout: post -title: Liquid Glass Effect for .NET MAUI DateTime Range Selector | Syncfusion® +title: Liquid Glass Effect in .NET MAUI DateTime Range Selector | Syncfusion® description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI DateTime RangeSelector (SfDateTimeRangeSelector) control. platform: MAUI control: SfDateTimeRangeSelector diff --git a/MAUI/DateTime-Range-Selector/divider.md b/MAUI/DateTime-Range-Selector/divider.md index d9f367f89d..02924a8529 100644 --- a/MAUI/DateTime-Range-Selector/divider.md +++ b/MAUI/DateTime-Range-Selector/divider.md @@ -7,7 +7,7 @@ control: SfDateTimeRangeSelector documentation: ug --- -# Dividers in .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) +# Dividers in SfDateTimeRangeSelector for .NET MAUI This section explains how to add the dividers in the DateTime Range Selector (SfDateTimeRangeSelector). diff --git a/MAUI/DateTime-Range-Selector/events-and-commands.md b/MAUI/DateTime-Range-Selector/events-and-commands.md index 8225e9bf13..b553159eb4 100644 --- a/MAUI/DateTime-Range-Selector/events-and-commands.md +++ b/MAUI/DateTime-Range-Selector/events-and-commands.md @@ -1,6 +1,6 @@ --- layout: post -title: Events and Commands in .NET MAUI DateTime Range Selector control | Syncfusion® +title: Events and Commands in .NET MAUI DateTime Range Selector | Syncfusion® description: Learn here all about the events and commands of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector diff --git a/MAUI/DateTime-Range-Selector/migration.md b/MAUI/DateTime-Range-Selector/migration.md index 32229b2953..209b7da1c9 100644 --- a/MAUI/DateTime-Range-Selector/migration.md +++ b/MAUI/DateTime-Range-Selector/migration.md @@ -1,13 +1,13 @@ --- layout: post -title: Migrate from Xamarin SfDateTimeRangeNavigator to .NET MAUI SfDateTimeRangeSelector | Syncfusion® +title: Migrate Xamarin SfDateTimeRangeNavigator to .NET MAUI | Syncfusion® description: Learn here all about migrating from the Syncfusion® Xamarin DateTimeRangeNavigator to the Syncfusion® .NET MAUI DateTimeRangeSelector control and more. platform: MAUI control: SfDateTimeRangeSelector documentation: ug --- -# Migrate from Xamarin SfDateTimeRangeNavigator to .NET MAUI Range Selector +# Migrate from Xamarin to .NET MAUI Range Selector In Xamarin.Forms, the [SfDateTimeRangeNavigator](https://help.syncfusion.com/cr/xamarin/Syncfusion.RangeNavigator.XForms.SfDateTimeRangeNavigator.html) control supports only the date-time scale. In .NET MAUI, there are separate controls for the date-time scale and the numeric scale. In Xamarin.Forms, the control comes along with the [Syncfusion.Xamarin.SfChart](https://www.nuget.org/packages/Syncfusion.Xamarin.SfChart/) package, but in .NET MAUI, the controls come with the [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders/) package. The following are the new .NET MAUI controls for migrating from the Xamarin.Forms SfDateTimeRangeNavigator to .NET MAUI. diff --git a/MAUI/DateTime-Range-Selector/selection.md b/MAUI/DateTime-Range-Selector/selection.md index fd5bda5a3e..67aa27f4a4 100644 --- a/MAUI/DateTime-Range-Selector/selection.md +++ b/MAUI/DateTime-Range-Selector/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Range selection in .NET MAUI DateTime Range Selector control | Syncfusion® +title: Range Selection in .NET MAUI DateTime Range Selector | Syncfusion® description: Learn here all about the range selection feature of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector diff --git a/MAUI/DateTime-Range-Selector/thumb-and-overlay.md b/MAUI/DateTime-Range-Selector/thumb-and-overlay.md index 4dd5a9f9d8..dd1deb681d 100644 --- a/MAUI/DateTime-Range-Selector/thumb-and-overlay.md +++ b/MAUI/DateTime-Range-Selector/thumb-and-overlay.md @@ -1,6 +1,6 @@ --- layout: post -title: Thumb and Overlay in .NET MAUI DateTime Range Selector control | Syncfusion® +title: Thumb and Overlay in .NET MAUI DateTime Range Selector | Syncfusion® description: Learn here all about the Thumb and Thumb Overlay features of the Syncfusion® .NET MAUI DateTime Range Selector (SfDateTimeRangeSelector) control and more. platform: maui control: SfDateTimeRangeSelector