diff --git a/MAUI/DateTime-Range-Slider/thumb-and-overlay.md b/MAUI/DateTime-Range-Slider/thumb-and-overlay.md index 52e03d17f8..7de8e2d65c 100644 --- a/MAUI/DateTime-Range-Slider/thumb-and-overlay.md +++ b/MAUI/DateTime-Range-Slider/thumb-and-overlay.md @@ -1,6 +1,6 @@ --- layout: post -title: Thumb and Thumb Overlay in .NET MAUI Range Slider control | Syncfusion® +title: Thumb and Thumb Overlay in .NET MAUI Range Slider | Syncfusion® description: Learn here all about the Thumb and Thumb Overlay features of Syncfusion® .NET MAUI Range Slider (SfDateTimeRangeSlider) control and more. platform: maui control: SfDateTimeRangeSlider diff --git a/MAUI/DateTime-Slider/LiquidGlassSupport.md b/MAUI/DateTime-Slider/LiquidGlassSupport.md index f1217ac1cd..194dc5a9eb 100644 --- a/MAUI/DateTime-Slider/LiquidGlassSupport.md +++ b/MAUI/DateTime-Slider/LiquidGlassSupport.md @@ -9,7 +9,7 @@ documentation: ug # Liquid Glass Effect in .NET MAUI DateTime Slider (SfDateTimeSlider) -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 Slider (SfDateTimeSlider) 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 Slider (SfDateTimeSlider) control. ## Apply liquid glass effect @@ -17,23 +17,26 @@ Follow these steps to enable and configure the Liquid Glass Effect in the DateTi ### Step 1: Enable the liquid glass effect on DateTime Slider -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 [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.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 [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.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 `SfDateTimeSlider` control: {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %} - - + + {% endhighlight %} {% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="17" %} +using System; +using Microsoft.Maui.Controls; using Syncfusion.Maui.Sliders; + var grid = new Grid { BackgroundColor = Colors.Transparent @@ -48,7 +51,7 @@ grid.Children.Add(image); SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider { - Minimun = new DateTime(2010, 01, 01), + Minimum = new DateTime(2010, 01, 01), Maximum = new DateTime(2018, 01, 01), EnableLiquidGlassEffect = true }; diff --git a/MAUI/DateTime-Slider/divider.md b/MAUI/DateTime-Slider/divider.md index f5bd3df523..f5ffe9eb0c 100644 --- a/MAUI/DateTime-Slider/divider.md +++ b/MAUI/DateTime-Slider/divider.md @@ -1,7 +1,7 @@ --- layout: post -title: Dividers in .NET MAUI Slider control | Syncfusion® -description: Learn here all about adding and customizing the slider divider feature in .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Dividers in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about the slider divider feature in .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -30,6 +30,8 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { @@ -70,6 +72,8 @@ Change the active and inactive divider radius of the slider using the [`ActiveRa {% endhighlight %} {% highlight C# %} +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { @@ -103,17 +107,20 @@ Change the active and inactive divider color of the slider using the [`ActiveFil ShowDividers="True"> - - + + {% endhighlight %} {% highlight C# %} +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { @@ -166,6 +173,9 @@ Also, change the active and inactive divider stroke color of the slider using th {% endhighlight %} {% highlight C# %} +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { @@ -268,6 +278,9 @@ Change the state of the slider to disabled by setting `false` to the `IsEnabled` {% endhighlight %} {% highlight C# %} +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; VerticalStackLayout stackLayout = new(); SfDateTimeSlider defaultSlider = new() diff --git a/MAUI/DateTime-Slider/events-and-commands.md b/MAUI/DateTime-Slider/events-and-commands.md index ee6832c9c5..9d1b0756f7 100644 --- a/MAUI/DateTime-Slider/events-and-commands.md +++ b/MAUI/DateTime-Slider/events-and-commands.md @@ -1,7 +1,7 @@ --- layout: post -title: Events and Commands in.NET MAUI Slider control | Syncfusion® -description: Learn here all about adding and customizing through events and commands of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Events and Commands in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about customizing through the events and commands of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -15,10 +15,10 @@ This section explains how to add the events and commands for DateTime Slider. ### 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 selecting a new value for the slider by tap/mouse down in 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 slider by tap/mouse down on the thumb. * [ValueChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_ValueChanging) - Called when the user is selecting a new value for the slider by dragging the thumb. -* [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_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 slider by tap/mouse up the thumb. +* [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_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 slider by tap/mouse up on the thumb. {% tabs %} @@ -35,6 +35,8 @@ This section explains how to add the events and commands for DateTime Slider. {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; { SfDateTimeSlider slider = new SfDateTimeSlider() @@ -74,7 +76,7 @@ private void OnValueChangeEnd(object sender, EventArgs e) Format or change the 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, offset using the [`Style`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Style) parameter. {% tabs %} @@ -95,6 +97,8 @@ Format or change the label text using the [`LabelCreated`](https://help.syncfusi {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; { SfDateTimeSlider slider = new SfDateTimeSlider() @@ -170,6 +174,8 @@ Format or change the whole tooltip label text using the [`TooltipLabelCreated`]( {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; { SfDateTimeSlider slider = new SfDateTimeSlider() @@ -177,7 +183,7 @@ Format or change the whole tooltip label text using the [`TooltipLabelCreated`]( Minimum = new DateTime(2010, 01, 01), Maximum = new DateTime(2018, 01, 01), Value = new DateTime(2014, 01, 01), - Interval = 3, + Interval = 2, ShowTicks = true, ShowLabels = true, Tooltip = new SliderTooltip(), @@ -220,11 +226,14 @@ The [`DragStartedCommand`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.S {% endhighlight %} {% highlight C# %} +using System; +using System.Windows.Input; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { Minimum = new DateTime(2010, 01, 01), - Maximum = new DateTime(2020, 01, 01), + Maximum = new DateTime(2018, 01, 01), Value = new DateTime(2014, 01, 01), DragStartedCommand = viewModel.DragStartedCommand, }; @@ -270,11 +279,14 @@ The [`DragStartedCommandParameter`](https://help.syncfusion.com/cr/maui/Syncfusi {% endhighlight %} {% highlight C# %} +using System; +using System.Windows.Input; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { Minimum = new DateTime(2010, 01, 01), - Maximum = new DateTime(2020, 01, 01), + Maximum = new DateTime(2018, 01, 01), Value = new DateTime(2014, 01, 01), DragStartedCommand = viewModel.DragStartedCommand, DragStartedCommandParameter = "1" @@ -320,11 +332,14 @@ The [`DragCompletedCommand`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui {% endhighlight %} {% highlight C# %} +using System; +using System.Windows.Input; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { Minimum = new DateTime(2010, 01, 01), - Maximum = new DateTime(2020, 01, 01), + Maximum = new DateTime(2018, 01, 01), Value = new DateTime(2014, 01, 01), DragCompletedCommand = viewModel.DragCompletedCommand }; @@ -370,11 +385,14 @@ The [`DragCompletedCommandParameter`](https://help.syncfusion.com/cr/maui/Syncfu {% endhighlight %} {% highlight C# %} +using System; +using System.Windows.Input; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { Minimum = new DateTime(2010, 01, 01), - Maximum = new DateTime(2020, 01, 01), + Maximum = new DateTime(2018, 01, 01), Value = new DateTime(2014, 01, 01), DragCompletedCommand = viewModel.DragCompletedCommand, DragCompletedCommandParameter = "1" diff --git a/MAUI/DateTime-Slider/getting-started.md b/MAUI/DateTime-Slider/getting-started.md index 4c0ce686af..c662f41ac3 100644 --- a/MAUI/DateTime-Slider/getting-started.md +++ b/MAUI/DateTime-Slider/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with .NET MAUI DateTime Slider control | Syncfusion® -description: This section explains about the getting started with Syncfusion® MAUI Slider (SfDateTimeSlider) control and more. +description: This section explains how to get started with the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider 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` @@ -144,6 +144,8 @@ Initialize the [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { diff --git a/MAUI/DateTime-Slider/interval.md b/MAUI/DateTime-Slider/interval.md index e9420ce52b..954f80e05d 100644 --- a/MAUI/DateTime-Slider/interval.md +++ b/MAUI/DateTime-Slider/interval.md @@ -1,7 +1,7 @@ --- layout: post -title: Interval in.NET MAUI Slider control | Syncfusion® -description: Learn here all about adding the Interval feature of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Interval in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about the Interval feature of the .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Interval in .NET MAUI DateTime Slider (SfDateTimeSlider) -This section explains how to add the interval for DateTime Slider. +This section explains how to add the interval for the DateTime Slider. ## Date interval @@ -17,7 +17,7 @@ Slider elements like labels, ticks, and dividers are rendered based on the [`Int 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)`, the [`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 [`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.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_IntervalType) is [`SliderDateIntervalType.Years`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderDateIntervalType.html#Syncfusion_Maui_Sliders_SliderDateIntervalType_Years), [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_DateFormat) is `yyyy` then the 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)`, the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2005, 01, 01)`, the [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is `1`, the [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_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.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_DateFormat) is `yyyy`, then the DateTime Slider will render the labels, major ticks, and dividers at 2000, 2001, 2002, and so on. {% tabs %} @@ -36,10 +36,12 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { - Minimum = new DateTime(2010, 01, 01), + Minimum = new DateTime(2000, 01, 01), Maximum = new DateTime(2004, 01, 01), Value = new DateTime(2002, 01, 01), Interval = 1, @@ -76,10 +78,12 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { - Minimum = new DateTime(2010, 01, 01), + Minimum = new DateTime(2000, 01, 01), Maximum = new DateTime(2004, 01, 01), Value = new DateTime(2002, 01, 01), ShowLabels = true, diff --git a/MAUI/DateTime-Slider/labels.md b/MAUI/DateTime-Slider/labels.md index cd465d4e16..c0d06c0880 100644 --- a/MAUI/DateTime-Slider/labels.md +++ b/MAUI/DateTime-Slider/labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels in .NET MAUI Slider control | Syncfusion® -description: Learn here all about the Labels and its customization feature of .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Labels in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about the labels and customization features of the .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -13,7 +13,7 @@ This section explains how to add the labels in the DateTime Slider. ## 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 on 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 %} @@ -29,6 +29,8 @@ The [`ShowLabels`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.R {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -64,6 +66,8 @@ The [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.S {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2000, 01, 01, 09, 00, 00); @@ -100,6 +104,8 @@ The [`LabelsPlacement`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Slid {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -139,6 +145,8 @@ If the [`TrackExtent`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Slide {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -188,6 +196,9 @@ The inactive side of the slider is between the thumb and the [`Maximum`](https:/ {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -233,6 +244,8 @@ Adjust the space between ticks and labels of the slider using the [`Offset`](htt {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -251,7 +264,7 @@ slider.LabelStyle.Offset = 15; ## Disabled labels -Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider labels properties based on the visual states. The applicable visual states are enabled(default) and disabled. +Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider label properties based on the visual states. The applicable visual states are enabled (default) and disabled. {% tabs %} @@ -333,6 +346,9 @@ Change the state of the slider to disabled by setting `false` to the `IsEnabled` {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Sliders; VerticalStackLayout stackLayout = new(); SfDateTimeSlider defaultSlider = new() diff --git a/MAUI/DateTime-Slider/overview.md b/MAUI/DateTime-Slider/overview.md index 19d5c056bf..5312994825 100644 --- a/MAUI/DateTime-Slider/overview.md +++ b/MAUI/DateTime-Slider/overview.md @@ -1,19 +1,19 @@ --- layout: post title: .NET MAUI DateTime Slider control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control with key features and more. +description: Learn here all about the introduction of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control, its key features, and more. platform: maui control: SfDateTimeSlider documentation: ug --- -# Overview of .NET MAUI DateTime Slider +# .NET MAUI DateTime Slider Overview - The Syncfusion® .NET MAUI DateTime Slider ([SfDateTimeSlider](https://www.syncfusion.com/maui-controls/maui-slider)) is a lightweight, interactive control that makes choosing a date or time quickly. - Instead of typing values or navigating multiple pickers, users simply drag the slider thumb across a timeline to select the exact point they need. -![.NET MAUI datetime slider overview ](images/overview/datetime_slider_overview.png) +![.NET MAUI DateTime slider overview](images/overview/datetime_slider_overview.png) ## Business use cases @@ -25,7 +25,7 @@ documentation: ug ## Key features - **Single DateTime value selection support** allows selecting a specific value within a defined range. -- **Orientation support** allows displaying the slider in horizontal or vertical layouts based on UI design. +- **Orientation support** allows displaying the slider in horizontal or vertical layouts based on the UI design. - **Customizable labels support** allows rendering date values with formatting based on application requirements. - **Ticks and dividers support** allows indicating intervals clearly using major and minor tick marks. - **Discrete mode support** allows moving the slider thumb in fixed steps based on configured intervals. diff --git a/MAUI/DateTime-Slider/selection.md b/MAUI/DateTime-Slider/selection.md index beefe52541..9eac678e91 100644 --- a/MAUI/DateTime-Slider/selection.md +++ b/MAUI/DateTime-Slider/selection.md @@ -1,7 +1,7 @@ --- layout: post -title: Value selection in .NET MAUI Slider control | Syncfusion® -description: Learn here all about value selection of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Value selection in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about the value selection feature of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -13,9 +13,9 @@ This section helps to learn about the value selection in the DateTime Slider. ## Discrete selection -Move the thumb in discrete manner for date values using the [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_StepDuration) property in the slider. +Move the thumb in a discrete manner for date values using the [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_StepDuration) property in the slider. -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), the [`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 [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_StepDuration) is `1`,the slider 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), the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is DateTime(2004, 01, 01), and [`StepDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_StepDuration) is `1`, the slider will move the thumb at DateTime(2000, 01, 01), DateTime(2001, 01, 01), DateTime(2002, 01, 01), DateTime(2003, 01, 01), and DateTime(2004, 01, 01). {% tabs %} @@ -33,6 +33,8 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { @@ -54,7 +56,7 @@ SfDateTimeSlider slider = new SfDateTimeSlider() ## 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 thumb is 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. @@ -74,6 +76,8 @@ It invokes the `ValueChanging` event when the thumb is dragged and held for the {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider() { diff --git a/MAUI/DateTime-Slider/thumb-and-overlay.md b/MAUI/DateTime-Slider/thumb-and-overlay.md index c369fc4ac6..6064212b68 100644 --- a/MAUI/DateTime-Slider/thumb-and-overlay.md +++ b/MAUI/DateTime-Slider/thumb-and-overlay.md @@ -1,7 +1,7 @@ --- layout: post -title: Thumb and Thumb Overlay in .NET MAUI Slider control | Syncfusion® -description: Learn here all about the Thumb and Thumb Overlay features of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Thumb and Thumb Overlay in .NET MAUI DateTime Slider | Syncfusion® +description: Learn here all about the Thumb and Thumb Overlay features of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -11,12 +11,12 @@ documentation: ug This section helps to learn about how to customize the thumb and thumb overlay in the DateTime Slider. -* Thumb - It is one of the elements of slider which can be used to drag and change the selected value of the slider. -* Thumb overlay - It is rendered around the thumb while interacting with them. +* Thumb - It is one of the elements of the slider which can be used to drag and change the selected value of the slider. +* Thumb overlay - It is rendered around the thumb while interacting with it. ## Thumb size -Change the size of the thumb in the DateTime Slider using the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbStyle.html#Syncfusion_Maui_Sliders_SliderThumbStyle_Radius) property of the [`ThumbStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbStyle.html) class. The default value of the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbStyle.html#Syncfusion_Maui_Sliders_SliderThumbStyle_Radius) property is `10.0`. +Change the size of the thumb in the DateTime Slider using the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbStyle.html#Syncfusion_Maui_Sliders_SliderThumbStyle_Radius) property of the [`ThumbStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbStyle.html) class. The default value of the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbStyle.html#Syncfusion_Maui_Sliders_SliderThumbStyle_Radius) property is `10.0`. {% tabs %} @@ -33,6 +33,8 @@ Change the size of the thumb in the DateTime Slider using the [`Radius`](https:/ {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -65,6 +67,10 @@ Change the color of the thumb using the [`Fill`](https://help.syncfusion.com/cr/ {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -98,6 +104,10 @@ Change the thumb stroke width using the [`StrokeThickness`](https://help.syncfus {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -114,7 +124,7 @@ slider.ThumbStyle.StrokeThickness = 2; ## Thumb overlay size -Change the size of the thumb overlay using the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbOverlayStyle.html#Syncfusion_Maui_Sliders_SliderThumbOverlayStyle_Radius) property of the [`ThumbOverlayStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbOverlayStyle.html) class. The default value of the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbOverlayStyle.html#Syncfusion_Maui_Sliders_SliderThumbOverlayStyle_Radius) property is `24.0`. +Change the size of the thumb overlay using the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbOverlayStyle.html#Syncfusion_Maui_Sliders_SliderThumbOverlayStyle_Radius) property of the [`ThumbOverlayStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbOverlayStyle.html) class. The default value of the [`Radius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderThumbOverlayStyle.html#Syncfusion_Maui_Sliders_SliderThumbOverlayStyle_Radius) property is `24.0`. {% tabs %} @@ -131,6 +141,8 @@ Change the size of the thumb overlay using the [`Radius`](https://help.syncfusio {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -163,12 +175,16 @@ Change the color of the thumb overlay using the [`Fill`](https://help.syncfusion {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); slider.Maximum = new DateTime(2018, 01, 01); slider.Value = new DateTime(2014, 01, 01); -slider.ThumbOverlayStyle.Fill = new SolidColorBrush(Color.FromArgb("#66FFD700")); +slider.ThumbOverlayStyle.Fill = new SolidColorBrush(Color.FromArgb("#66FFD700")); {% endhighlight %} @@ -178,7 +194,7 @@ slider.ThumbOverlayStyle.Fill = new SolidColorBrush(Color.FromArgb("#66FFD700")) ## Disabled thumb -Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider thumb properties based on the visual states. The applicable visual states are enabled(default) and disabled. +Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider thumb properties based on the visual states. The applicable visual states are enabled (default) and disabled. {% tabs %} @@ -247,6 +263,9 @@ Change the state of the slider to disabled by setting `false` to the `IsEnabled` {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Sliders; VerticalStackLayout stackLayout = new(); SfDateTimeSlider defaultSlider = new() diff --git a/MAUI/DateTime-Slider/ticks.md b/MAUI/DateTime-Slider/ticks.md index 49b698a093..bac47829e0 100644 --- a/MAUI/DateTime-Slider/ticks.md +++ b/MAUI/DateTime-Slider/ticks.md @@ -1,13 +1,13 @@ --- layout: post -title: Tick in .NET MAUI Slider control | Syncfusion® -description: Learn here all about adding the Tick feature of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Ticks in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about adding the ticks feature of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug --- -# Tick in .NET MAUI Slider (SfDateTimeSlider) +# Ticks in .NET MAUI DateTime Slider (SfDateTimeSlider) This section helps to learn about how to add major and minor ticks in the DateTime Slider. @@ -15,7 +15,7 @@ This section helps to learn about how to add major and minor ticks in the DateTi Enable the major ticks on the track. It is a shape used to represent the major interval points of the track. The default value of the [`ShowTicks`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ShowTicks) property is `False`. -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(2018, 01, 01)`, and [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is 1, the range slider will render the major ticks 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(2018, 01, 01)`, and [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is 1, the DateTime Slider will render the major ticks at 2000, 2001, 2002, and so on. ### Without Interval @@ -31,6 +31,8 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -76,7 +78,7 @@ slider.ShowTicks = true; ## Show minor ticks -It is used to represent the number of smaller ticks between two major ticks. 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(2010, 01, 01)`, the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2018, 01, 01)`, and [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is 1, the DateTime Slider will render the major ticks at 2010, 2011, 2012, and so on. If the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MinorTicksPerInterval) is 1, then smaller ticks will be rendered between 2010 and 2011, so on. The default value of the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MinorTicksPerInterval) property is `0`. +It is used to represent the number of smaller ticks between two major ticks. 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(2010, 01, 01)`, the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2018, 01, 01)`, and [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is 1, the DateTime Slider will render the major ticks at 2010, 2011, 2012, and so on. If the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MinorTicksPerInterval) is 1, then smaller ticks will be rendered between 2010 and 2011, and so on. The default value of the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MinorTicksPerInterval) property is `0`. ### Without Interval @@ -94,6 +96,8 @@ It is used to represent the number of smaller ticks between two major ticks. For {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -125,6 +129,8 @@ slider.ShowTicks = true; {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -166,6 +172,10 @@ The inactive side of the slider is between the thumb and the [`Maximum`](https:/ {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -209,6 +219,10 @@ The inactive side of the slider is between the thumb and the [`Maximum`](https:/ {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -228,7 +242,7 @@ slider.MinorTickStyle.InactiveFill = new SolidColorBrush(Color.FromArgb("#F7B1AE ## Tick size -Change the major and minor tick size of the slider using the [`ActiveSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTickStyle.html#Syncfusion_Maui_Sliders_SliderTickStyle_ActiveSize) and [`InactiveSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTickStyle.html#Syncfusion_Maui_Sliders_SliderTickStyle_InactiveSize) property of the [`MajorTickStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MajorTickStyle) and [`MinorTickStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MinorTickStyle) classes. The default value is `Size(2.0, 8.0)`. +Change the major and minor tick size of the slider using the [`ActiveSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTickStyle.html#Syncfusion_Maui_Sliders_SliderTickStyle_ActiveSize) and [`InactiveSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTickStyle.html#Syncfusion_Maui_Sliders_SliderTickStyle_InactiveSize) properties of the [`MajorTickStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MajorTickStyle) and [`MinorTickStyle`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_MinorTickStyle) classes. The default value is `Size(2.0, 8.0)`. {% tabs %} @@ -253,6 +267,9 @@ Change the major and minor tick size of the slider using the [`ActiveSize`](http {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -297,6 +314,8 @@ Adjust the space between track and tick of the slider using the [`Offset`](https {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -316,7 +335,7 @@ slider.MajorTickStyle.Offset = 6; ## Disabled ticks -Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider’s major and minor tick properties based on the visual states. The applicable visual states are enabled(default) and disabled. +Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider’s major and minor tick properties based on the visual states. The applicable visual states are enabled (default) and disabled. {% tabs %} @@ -410,6 +429,10 @@ Change the state of the slider to disabled by setting `false` to the `IsEnabled` {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; VerticalStackLayout stackLayout = new VerticalStackLayout(); SfDateTimeSlider defaultSlider = new SfDateTimeSlider() diff --git a/MAUI/DateTime-Slider/tooltip.md b/MAUI/DateTime-Slider/tooltip.md index 22da4eccc4..f6cce43dee 100644 --- a/MAUI/DateTime-Slider/tooltip.md +++ b/MAUI/DateTime-Slider/tooltip.md @@ -1,19 +1,19 @@ --- layout: post -title: Tooltip in .NET MAUI Slider control | Syncfusion® -description: Learn here all about adding the Tooltip feature of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more. +title: Tooltip in .NET MAUI DateTime Slider control | Syncfusion® +description: Learn here all about adding the Tooltip feature of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug --- -# Tooltip in .NET MAUI Slider (SfDateTimeSlider) +# Tooltip in .NET MAUI DateTime Slider (SfDateTimeSlider) This section helps to learn about how to add tooltip in the DateTime Slider. ## Enable tooltip -Enable tooltip for the thumb by setting the [`Tooltip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Tooltip) property to [`SliderTooltip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTooltip.html). It is used display the selected value during interaction. The default value of the [`Tooltip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Tooltip) property is `null`. +Enable tooltip for the thumb by setting the [`Tooltip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Tooltip) property to [`SliderTooltip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTooltip.html). It is used to display the selected value during interaction. The default value of the [`Tooltip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Tooltip) property is `null`. {% tabs %} @@ -30,6 +30,8 @@ Enable tooltip for the thumb by setting the [`Tooltip`](https://help.syncfusion. {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -62,6 +64,8 @@ Always shows a tooltip with and without the thumb interaction by setting the [`S {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -105,6 +109,10 @@ Change the appearance of the tooltip using the [`Fill`](https://help.syncfusion. {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); diff --git a/MAUI/DateTime-Slider/track.md b/MAUI/DateTime-Slider/track.md index 74eec97a8d..6b07bac202 100644 --- a/MAUI/DateTime-Slider/track.md +++ b/MAUI/DateTime-Slider/track.md @@ -1,7 +1,7 @@ --- layout: post title: Track in .NET MAUI DateTime Slider control | Syncfusion® -description: Learn here all about adding and customizing the slider track in .NET MAUI Slider (SfDateTimeSlider) control and more. +description: Learn here all about adding and customizing the slider track in the .NET MAUI DateTime Slider (SfDateTimeSlider) control and more. platform: maui control: SfDateTimeSlider documentation: ug @@ -36,6 +36,8 @@ It represents the value currently selected in the DateTime Slider. The slider's {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -73,6 +75,10 @@ The inactive side of the DateTime Slider is between the thumb and the [`Maximum` {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -106,6 +112,8 @@ Change the active and inactive track height of the DateTime Slider using the [`A {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -138,6 +146,8 @@ You can extend the track at edges using the [`TrackExtent`](https://help.syncfus {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01); @@ -161,7 +171,7 @@ slider.TrackExtent = 25; ## Disabled track -Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider track properties based on the visual states. The applicable visual states are enabled(default) and disabled. +Change the state of the slider to disabled by setting `false` to the `IsEnabled` property. Using the Visual State Manager (VSM), customize the slider track properties based on the visual states. The applicable visual states are enabled (default) and disabled. {% tabs %} @@ -225,6 +235,9 @@ Change the state of the slider to disabled by setting `false` to the `IsEnabled` {% endhighlight %} {% highlight C# %} +using System; +using Microsoft.Maui.Controls; +using Syncfusion.Maui.Sliders; VerticalStackLayout stackLayout = new(); SfDateTimeSlider defaultSlider = new() @@ -278,7 +291,7 @@ VisualStateManager.SetVisualStateGroups(disabledSlider, visualStateGroupList); stackLayout.Children.Add(new Label() { Text = "Enabled", Padding = new Thickness(24, 10) }); stackLayout.Children.Add(defaultSlider); -stackLayout.Children.Add(new Label() { Text = "Disabled Range Slider", Padding = new Thickness(24, 10) }); +stackLayout.Children.Add(new Label() { Text = "Disabled", Padding = new Thickness(24, 10) }); stackLayout.Children.Add(disabledSlider); this.Content = stackLayout; @@ -308,6 +321,8 @@ The [Orientation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.Sl {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Orientation = SliderOrientation.Vertical; @@ -345,6 +360,8 @@ Invert the slider using the [IsInversed](https://help.syncfusion.com/cr/maui/Syn {% endhighlight %} {% highlight C# %} +using System; +using Syncfusion.Maui.Sliders; SfDateTimeSlider slider = new SfDateTimeSlider(); slider.Minimum = new DateTime(2010, 01, 01);