diff --git a/maui-toolkit-toc.html b/maui-toolkit-toc.html index 4ea68183..5228be80 100644 --- a/maui-toolkit-toc.html +++ b/maui-toolkit-toc.html @@ -16,7 +16,16 @@ </ul> </li> <li><a href="/maui-toolkit/Migration">Migrate from Syncfusion .NET MAUI</a></li> - + <li> + SfAccordion + <ul> + <li><a href="/maui-toolkit/Accordion/overview">Overview</a></li> + <li><a href="/maui-toolkit/Accordion/getting-started">Getting Started</a></li> + <li><a href="/maui-toolkit/Accordion/appearance">Appearance</a></li> + <li><a href="/maui-toolkit/Accordion/bindablelayout">BindableLayout</a></li> + <li><a href="/maui-toolkit/Accordion/events">Events</a></li> + </ul> + </li> <li> SfBottomSheet <ul> @@ -126,7 +135,8 @@ <li><a href="/maui-toolkit/cartesian-charts/stackedarea">Stacked Area Chart</a></li> <li><a href="/maui-toolkit/cartesian-charts/stackedarea100">Stacked Area 100 Chart</a></li> <li><a href="/maui-toolkit/cartesian-charts/bubble">Bubble Chart</a></li> - <li><a href="/maui-toolkit/cartesian-charts/scatter">Scatter Chart</a></li> + <li><a href="/maui-toolkit/cartesian-charts/scatter">Scatter Chart</a></li> + <li><a href="/maui-toolkit/cartesian-charts/fastscatter">Fast Scatter Chart</a></li> <li><a href="/maui-toolkit/cartesian-charts/range-column">Range Column Chart</a></li> <li><a href="/maui-toolkit/cartesian-charts/stackedcolumn">Stacked Column Chart</a></li> <li><a href="/maui-toolkit/cartesian-charts/stackedcolumn100">Stacked Column 100 Chart</a></li> @@ -138,6 +148,7 @@ <li><a href="/maui-toolkit/cartesian-charts/histogram">Histogram Chart</a></li> </ul> </li> + <li><a href="/maui-toolkit/cartesian-charts/emptypoints">Empty Points</a></li> <li><a href="/maui-toolkit/cartesian-charts/Appearance">Appearance</a></li> <li><a href="/maui-toolkit/cartesian-charts/plotband">Plot Band</a></li> <li><a href="/maui-toolkit/cartesian-charts/annotation">Annotation</a></li> @@ -220,6 +231,14 @@ <li><a href="/maui-toolkit/Effects-View/Events">Events</a></li> </ul> </li> + <li> + SfExpander + <ul> + <li><a href="/maui-toolkit/Expander/overview">Overview</a></li> + <li><a href="/maui-toolkit/Expander/getting-started">Getting Started</a></li> + <li><a href="/maui-toolkit/Expander/appearance">Appearance</a></li> + </ul> + </li> <li> SfFunnelChart <ul> @@ -272,6 +291,18 @@ <li><a href="/maui-toolkit/NumericUpDown/Events">Events</a></li> </ul> </li> + <li> + SfOtpInput + <ul> + <li><a href="/maui-toolkit/Otp-Input/Overview">Overview</a></li> + <li><a href="/maui-toolkit/Otp-Input/Getting-Started">Getting Started</a></li> + <li><a href="/maui-toolkit/Otp-Input/Input-Types">Input Types</a></li> + <li><a href="/maui-toolkit/Otp-Input/Styling-Modes">Styling Modes</a></li> + <li><a href="/maui-toolkit/Otp-Input/OtpInput-Customization">Customization</a></li> + <li><a href="/maui-toolkit/Otp-Input/Events">Events</a></li> + <li><a href="/maui-toolkit/Otp-Input/Accessibility">Accessibility</a></li> + </ul> + </li> <li> SfPolarChart <ul> @@ -303,6 +334,23 @@ <li><a href="/maui-toolkit/polar-charts/Exporting">Exporting</a></li> </ul> </li> + <li> + SfPopup + <ul> + <li><a href="/maui-toolkit/Popup/overview">Overview</a></li> + <li><a href="/maui-toolkit/Popup/getting-started">Getting Started</a></li> + <li><a href="/maui-toolkit/Popup/popup-positioning">Popup Positioning</a></li> + <li><a href="/maui-toolkit/Popup/popup-size">Popup Size</a></li> + <li><a href="/maui-toolkit/Popup/layout-customizations">Layout Customizations</a></li> + <li><a href="/maui-toolkit/Popup/styles">Styles</a></li> + <li><a href="/maui-toolkit/Popup/popup-animations">Popup Animations</a></li> + <li><a href="/maui-toolkit/Popup/modal-window">Modal Window</a></li> + <li><a href="/maui-toolkit/Popup/Popup-Events">Events and Commands</a></li> + <li><a href="/maui-toolkit/Popup/working-with-mvvm">Working with MVVM</a></li> + <li><a href="/maui-toolkit/Popup/localization">Localization</a></li> + </ul> + </li> + <li> SfPullToRefresh <ul> @@ -364,6 +412,7 @@ <li><a href="/maui-toolkit/TabView/Nested-Tabs">Nested Tab bar</a></li> <li><a href="/maui-toolkit/TabView/How-To">How To</a></li> <li><a href="/maui-toolkit/TabView/Events">Events</a></li> + <li><a href="/maui-toolkit/TabView/CenterButton-Customization">Center Button</a></li> </ul> </li> <li> @@ -386,6 +435,7 @@ <li> Release Notes <ul> + <li><a href="/maui-toolkit/release-notes/v1.0.4">v1.0.4</a></li> <li><a href="/maui-toolkit/release-notes/v1.0.3">v1.0.3</a></li> <li><a href="/maui-toolkit/release-notes/v1.0.2">v1.0.2</a></li> <li><a href="/maui-toolkit/release-notes/v1.0.1">v1.0.1</a></li> diff --git a/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md b/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md index 26b56545..2b0787c0 100644 --- a/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md +++ b/maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md @@ -89,6 +89,29 @@ bottomSheet.AllowedState = BottomSheetAllowedState.HalfExpanded; {% endhighlight %} {% endtabs %} + +## Overlay tap to collapse + +The `CollapseOnOverlayTap` property enables the bottom sheet to collapse when the user taps on the overlay (outside the sheet). This enhances user interaction by allowing easy dismissal of the sheet without fully closing it. + +{% tabs %} +{% highlight xaml %} + +<bottomSheet:SfBottomSheet x:Name="bottomSheet" CollapseOnOverlayTap="True"> + <bottomSheet:SfBottomSheet.BottomSheetContent> + <!--Add your content here--> + </bottomSheet:SfBottomSheet.BottomSheetContent> +</bottomSheet:SfBottomSheet> + +{% endhighlight %} +{% highlight c# %} + +SfBottomSheet bottomSheet = new SfBottomSheet(); +bottomSheet.CollapseOnOverlayTap = true; + +{% endhighlight %} +{% endtabs %} + ## Content Padding The [ContentPadding](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html#Syncfusion_Maui_Toolkit_BottomSheet_SfBottomSheet_ContentPadding) property of the [BottomSheet](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html) adds space around the content creating a gap between the bottom sheet content and the edges. @@ -349,4 +372,29 @@ SfBottomSheet bottomSheet = new SfBottomSheet {% endhighlight %} {% endtabs %} - \ No newline at end of file + + + +### Grabber area height + +The `GrabberAreaHeight` feature in the [BottomSheet](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html) control allows developers to adjust the height of the drag area, thus enhancing both usability and appearance. + +{% tabs %} +{% highlight xaml %} + +<bottomSheet:SfBottomSheet x:Name="bottomSheet" GrabberAreaHeight="100"> + <bottomSheet:SfBottomSheet.BottomSheetContent> + <!--Add your content here--> + </bottomSheet:SfBottomSheet.BottomSheetContent> +</bottomSheet:SfBottomSheet> + +{% endhighlight %} +{% highlight c# %} + +SfBottomSheet bottomSheet = new SfBottomSheet +{ + GrabberAreaHeight = 100 +}; + +{% endhighlight %} +{% endtabs %} diff --git a/maui-toolkit/Button/Customization.md b/maui-toolkit/Button/Customization.md index ed841e17..44b8a878 100644 --- a/maui-toolkit/Button/Customization.md +++ b/maui-toolkit/Button/Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Customization in .NET MAUI Button control | Syncfusion<sup>®</sup> -description: Learn here all about Customization support in Syncfusion<sup>®</sup> .NET MAUI Button (SfButton) control and more. +title: Customization in .NET MAUI Button control | Syncfusion® +description: Learn here all about Customization support in Syncfusion® .NET MAUI Button (SfButton) control and more. platform: maui control: Sfbutton documentation: ug diff --git a/maui-toolkit/Button/Events.md b/maui-toolkit/Button/Events.md index 0589743c..f3b0bdcf 100644 --- a/maui-toolkit/Button/Events.md +++ b/maui-toolkit/Button/Events.md @@ -1,7 +1,7 @@ --- layout: post -title: Event in .NET MAUI Button Control | Syncfusion<sup>®</sup> -description: Learn here about Event support in the Syncfusion<sup>®</sup> .NET MAUI Button (SfButton) control, its elements and more. +title: Event in .NET MAUI Button Control | Syncfusion® +description: Learn here about Event support in the Syncfusion® .NET MAUI Button (SfButton) control, its elements and more. platform: maui control: SfButton documentation: ug diff --git a/maui-toolkit/Button/Getting-Started.md b/maui-toolkit/Button/Getting-Started.md index 489b7144..0dc58632 100644 --- a/maui-toolkit/Button/Getting-Started.md +++ b/maui-toolkit/Button/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Button | Syncfusion<sup>®</sup> -description: Learn here about getting started with the Syncfusion<sup>®</sup> .NET MAUI Button (SfButton) control, its elements and more. +title: Getting Started with .NET MAUI Button | Syncfusion® +description: Learn here about getting started with the Syncfusion® .NET MAUI Button (SfButton) control, its elements and more. platform: MAUI control: SfButton documentation: ug diff --git a/maui-toolkit/Button/Overview.md b/maui-toolkit/Button/Overview.md index d6572dcb..e18ec71f 100644 --- a/maui-toolkit/Button/Overview.md +++ b/maui-toolkit/Button/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI Control | Syncfusion<sup>®</sup> -description: Learn here about introduction of the Syncfusion<sup>®</sup> .NET MAUI Button (SfButton) control, its elements and more. +title: About .NET MAUI Control | Syncfusion® +description: Learn here about introduction of the Syncfusion® .NET MAUI Button (SfButton) control, its elements and more. platform: maui control: SfButton documentation: ug diff --git a/maui-toolkit/Button/Right-To-Left.md b/maui-toolkit/Button/Right-To-Left.md index a58d9bf8..466d77bd 100644 --- a/maui-toolkit/Button/Right-To-Left.md +++ b/maui-toolkit/Button/Right-To-Left.md @@ -1,7 +1,7 @@ --- layout: post -title: Right To Left in .NET MAUI Button Control | Syncfusion<sup>®</sup> -description: Learn about the comprehensive support for right-to-left (RTL) directionality within the Syncfusion<sup>®</sup> .NET MAUI Button, also known as the SfButton control. +title: Right To Left in .NET MAUI Button Control | Syncfusion® +description: Learn about the comprehensive support for right-to-left (RTL) directionality within the Syncfusion® .NET MAUI Button, also known as the SfButton control. platform: maui control: SfButton documentation: ug diff --git a/maui-toolkit/Button/Visual-States.md b/maui-toolkit/Button/Visual-States.md index a3555b0a..dab55ede 100644 --- a/maui-toolkit/Button/Visual-States.md +++ b/maui-toolkit/Button/Visual-States.md @@ -1,7 +1,7 @@ --- layout: post -title: Visual states in .NET MAUI Button Control | Syncfusion<sup>®</sup> -description: Learn about visual states support in the Syncfusion<sup>®</sup> .NET MAUI Button (SfButton) control, its elements, and more. +title: Visual states in .NET MAUI Button Control | Syncfusion® +description: Learn about visual states support in the Syncfusion® .NET MAUI Button (SfButton) control, its elements, and more. platform: maui control: SfButton documentation: ug diff --git a/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md b/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md index 084ea085..9e98c763 100644 --- a/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md +++ b/maui-toolkit/Button/how-to/Add-the-custom-view-for-button.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Add the Custom View for Syncfusion<sup>®</sup> SfButton +title: How to Add the Custom View for Syncfusion® SfButton description: Learn about how to add a custom content view for the .NET MAUI Toolkit's SfButton control in detail. platform: maui control: Sfbutton diff --git a/maui-toolkit/Carousel-View/Animation.md b/maui-toolkit/Carousel-View/Animation.md index bf71e76a..68bde45f 100644 --- a/maui-toolkit/Carousel-View/Animation.md +++ b/maui-toolkit/Carousel-View/Animation.md @@ -1,7 +1,7 @@ --- layout : post -title: Animation in .NET MAUI Carousel View control | Syncfusion<sup>®</sup> -description: Learn here all about Animation support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control and more. +title: Animation in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about Animation support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform : maui control : Carousel documentation : ug diff --git a/maui-toolkit/Carousel-View/Getting-Started.md b/maui-toolkit/Carousel-View/Getting-Started.md index f7140622..18990758 100644 --- a/maui-toolkit/Carousel-View/Getting-Started.md +++ b/maui-toolkit/Carousel-View/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with .NET MAUI Carousel View | Syncfusion<sup>®</sup> -description: Learn how to set up, configure, and use the Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control in your cross-platform applications. +title: Getting started with .NET MAUI Carousel View control | Syncfusion® +description: Learn how to set up, configure, and use the Syncfusion® .NET MAUI Carousel View (SfCarousel) control in your cross-platform applications. platform: maui control: Carousel documentation: ug diff --git a/maui-toolkit/Carousel-View/How-To.md b/maui-toolkit/Carousel-View/How-To.md index 553f2a7c..e1a43048 100644 --- a/maui-toolkit/Carousel-View/How-To.md +++ b/maui-toolkit/Carousel-View/How-To.md @@ -1,6 +1,6 @@ --- layout : post -title: Interaction in Syncfusion<sup>®</sup> Carousel Control in .NET MAUI. +title: Interaction in Syncfusion® Carousel Control in .NET MAUI. description: Learn how to perform an operation while changing the carouselItem or Collection in Carousel for .NET MAUI. platform : maui control : Carousel diff --git a/maui-toolkit/Carousel-View/Linear-Arrangement.md b/maui-toolkit/Carousel-View/Linear-Arrangement.md index 81b532e7..46741aa2 100644 --- a/maui-toolkit/Carousel-View/Linear-Arrangement.md +++ b/maui-toolkit/Carousel-View/Linear-Arrangement.md @@ -1,7 +1,7 @@ --- layout : post -title: Linear Arrangement in .NET MAUI Carousel View control | Syncfusion -description: Learn here all about Linear Arrangement support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control and more. +title: Linear Arrangement in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about Linear Arrangement support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform : maui control : Carousel documentation : ug diff --git a/maui-toolkit/Carousel-View/LoadMore.md b/maui-toolkit/Carousel-View/LoadMore.md index fbcd4c64..ff76c790 100644 --- a/maui-toolkit/Carousel-View/LoadMore.md +++ b/maui-toolkit/Carousel-View/LoadMore.md @@ -1,7 +1,7 @@ --- layout : post -title: Load More in .NET MAUI Carousel View control | Syncfusion -description: Learn here all about Load More support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control and more. +title: Load More in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about Load More support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform : maui control : Carousel documentation : ug diff --git a/maui-toolkit/Carousel-View/Overview.md b/maui-toolkit/Carousel-View/Overview.md index 70c69912..5bb901ee 100644 --- a/maui-toolkit/Carousel-View/Overview.md +++ b/maui-toolkit/Carousel-View/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI Carousel View control | Syncfusion -description: Learn here all about introduction of Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control, its elements and more. +title: About .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about introduction of Syncfusion® .NET MAUI Carousel View (SfCarousel) control, its elements and more. platform: maui control: Carousel documentation: ug diff --git a/maui-toolkit/Carousel-View/Populating-Data.md b/maui-toolkit/Carousel-View/Populating-Data.md index 8030c9f9..15b75c5a 100644 --- a/maui-toolkit/Carousel-View/Populating-Data.md +++ b/maui-toolkit/Carousel-View/Populating-Data.md @@ -1,7 +1,7 @@ --- layout : post -title: Populating Data in .NET MAUI Carousel View control | Syncfusion -description: Learn here all about Populating Data support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control and more. +title: Populating Data in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about Populating Data support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform : maui control : Carousel documentation : ug diff --git a/maui-toolkit/Carousel-View/SwipeEvents.md b/maui-toolkit/Carousel-View/SwipeEvents.md index c6077d74..879efb86 100644 --- a/maui-toolkit/Carousel-View/SwipeEvents.md +++ b/maui-toolkit/Carousel-View/SwipeEvents.md @@ -1,7 +1,7 @@ --- layout: post -title: Swipe Events in .NET MAUI Carousel View control | Syncfusion -description: Learn here all about Swipe Events support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control and more. +title: Swipe Events in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about Swipe Events support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform: maui control: Carousel documentation: ug diff --git a/maui-toolkit/Carousel-View/Transformation.md b/maui-toolkit/Carousel-View/Transformation.md index 2625a8bd..0d506289 100644 --- a/maui-toolkit/Carousel-View/Transformation.md +++ b/maui-toolkit/Carousel-View/Transformation.md @@ -1,7 +1,7 @@ --- layout : post -title: Transformation in .NET MAUI Carousel View control | Syncfusion -description: Learn here all about Transformation support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control, its elements and more. +title: Transformation in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about Transformation support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control, its elements and more. platform : maui control : Carousel documentation : ug diff --git a/maui-toolkit/Carousel-View/UIVirtualization.md b/maui-toolkit/Carousel-View/UIVirtualization.md index b8c154b6..70aaf21d 100644 --- a/maui-toolkit/Carousel-View/UIVirtualization.md +++ b/maui-toolkit/Carousel-View/UIVirtualization.md @@ -1,7 +1,7 @@ --- layout : post -title: UIVirtualization in .NET MAUI Carousel View control | Syncfusion -description: Learn here all about UIVirtualization support in Syncfusion<sup>®</sup> .NET MAUI Carousel View (SfCarousel) control and more. +title: UIVirtualization in .NET MAUI Carousel View control | Syncfusion® +description: Learn here all about UIVirtualization support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform : maui control : Carousel documentation : ug diff --git a/maui-toolkit/Cartesian-Charts/EmptyPoints.md b/maui-toolkit/Cartesian-Charts/EmptyPoints.md new file mode 100644 index 00000000..396dd4e3 --- /dev/null +++ b/maui-toolkit/Cartesian-Charts/EmptyPoints.md @@ -0,0 +1,194 @@ +--- +layout: post +title: Empty Points in .NET MAUI Chart control | Syncfusion +description: Learn here all about empty points support and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +platform: maui +control: SfCartesianChart +documentation: ug +keywords: .net maui chart empty points, .net maui empty points customization, syncfusion maui chart empty points, maui chart empty points, .net maui chart empty points visualization, cartesian empty points maui, missing data handling +--- + +# Empty Points in .NET MAUI Chart +Empty Points are used to indicate missing or null data in a series. These empty points can occur when data is unavailable, improperly formatted, or explicitly set as null or double.NaN. The chart provides options to handle and customize these empty points to enhance visualization and maintain the integrity of data representation. + +[SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html) provides support for empty points, allowing users to handle missing data effectively. + +The data collection that is passed to the chart can have NaN or Null values that are considered as empty points. The empty point can be defined as in the below code example. + +{% highlight C# %} + + ProductSales = new ObservableCollection<Model>(); + ProductSales.Add(new Model() { Product = "Electronics", Sales = 60 }); + ProductSales.Add(new Model() { Product = "Clothing", Sales = 40 }); + ProductSales.Add(new Model() { Product = "Groceries", Sales = double.NaN }); + ProductSales.Add(new Model() { Product = "Furniture", Sales = 70 }); + ProductSales.Add(new Model() { Product = "Toys", Sales = 30 }); + ProductSales.Add(new Model() { Product = "Sports", Sales = double.NaN }); + ProductSales.Add(new Model() { Product = "Books", Sales = 50 }); + +{% endhighlight %} + +By default, the [EmptyPointMode]() property is `None`. So the empty points will not be rendered as shown in the below. + + + +## Empty Point Mode +The [EmptyPointMode]() property of series specifies how empty points should be handled. + +This property is an enumeration with the following options: + +* None - Empty points are not rendered. This is the default behavior. +* Zero - Empty points will be replaced with zero. +* Average - Empty points will be replaced with the average value of the surrounding data points. + +The following code example shows the [EmptyPointMode]() as `Zero`. + +{% tabs %} + +{% highlight xaml %} + + <chart:SfCartesianChart> + + ..... + + <chart:LineSeries ItemsSource="{Binding ProductSales}" + XBindingPath="Product" + YBindingPath="Sales" + EmptyPointMode="Zero"> + </chart:LineSeries> + </chart:SfCartesianChart> + +{% endhighlight %} + +{% highlight c# %} + + SfCartesianChart chart = new SfCartesianChart(); + + ..... + + LineSeries series = new LineSeries() + { + ItemsSource = new ViewModel().ProductSales, + XBindingPath = "Product", + YBindingPath = "Sales", + EmptyPointMode = EmptyPointMode.Zero + }; + + chart.Series.Add(series); + this.Content = chart; + +{% endhighlight %} + +{% endtabs %} + + + +The following code example shows the [EmptyPointMode]() as `Average`. + +{% tabs %} + +{% highlight xaml %} + + <chart:SfCartesianChart> + + ..... + + <chart:ColumnSeries ItemsSource="{Binding ProductSales}" + XBindingPath="Product" + YBindingPath="Sales" + EmptyPointMode="Average"> + </chart:ColumnSeries> + </chart:SfCartesianChart> + +{% endhighlight %} + +{% highlight c# %} + + SfCartesianChart chart = new SfCartesianChart(); + + ..... + + ColumnSeries series = new ColumnSeries() + { + ItemsSource = new ViewModel().ProductSales, + XBindingPath = "Product", + YBindingPath = "Sales", + EmptyPointMode = EmptyPointMode.Average + }; + + chart.Series.Add(series); + this.Content = chart; + +{% endhighlight %} + +{% endtabs %} + + + +## Customizing Empty Points +The [EmptyPointSettings]() property allows you to customize the appearance of empty points in a series. This enables you to adjust various visual aspects of empty points, making them more distinct from the other data points. You can modify the following properties within [EmptyPointSettings](). + +* [Fill]() - Gets or sets the fill color for the empty points. +* [Stroke]() - Gets or sets the stroke color for empty points. +* [StrokeWidth]() - Gets or sets the stroke thickness for empty points. + +{% tabs %} + +{% highlight xaml %} + + <chart:SfCartesianChart> + + ..... + + <chart:LineSeries ItemsSource="{Binding ProductSales}" + XBindingPath="Product" + YBindingPath="Sales" + Fill="#3068F7" + StrokeWidth="2" + ShowMarkers="True" + ShowDataLabels="True" + EmptyPointMode="Average"> + <chart:LineSeries.EmptyPointSettings> + <chart:EmptyPointSettings Fill="Orange" StrokeWidth="2"/> + </chart:LineSeries.EmptyPointSettings> + </chart:LineSeries> + </chart:SfCartesianChart> + +{% endhighlight %} + +{% highlight c# %} + + SfCartesianChart chart = new SfCartesianChart(); + + ..... + + LineSeries series = new LineSeries() + { + ItemsSource = new ViewModel().ProductSales, + XBindingPath = "Product", + YBindingPath = "Sales", + Fill = Color.FromArgb("#3068F7"), + StrokeWidth = 2, + ShowMarkers = true, + ShowDataLabels = true, + EmptyPointMode = EmptyPointMode.Average + }; + + EmptyPointSettings emptypointSettings = new EmptyPointSettings() + { + Fill = Colors.Orange, + StrokeWidth = 2 + }; + + series.EmptyPointSettings = emptypointSettings; + + chart.Series.Add(series); + this.Content = chart; + +{% endhighlight %} + +{% endtabs %} + + + +N> The EmptyPoints feature is not supported for Histogram and BoxAndWhisker series. diff --git a/maui-toolkit/Cartesian-Charts/EmptyPoints_images/Customize_EmptyPoints.png b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/Customize_EmptyPoints.png new file mode 100644 index 00000000..bfef1056 Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/Customize_EmptyPoints.png differ diff --git a/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Default.png b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Default.png new file mode 100644 index 00000000..168652a0 Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Default.png differ diff --git a/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Mode_Average.png b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Mode_Average.png new file mode 100644 index 00000000..783823ed Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Mode_Average.png differ diff --git a/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Mode_Zero.png b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Mode_Zero.png new file mode 100644 index 00000000..add54825 Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/EmptyPoints_images/EmptyPoints_Mode_Zero.png differ diff --git a/maui-toolkit/Cartesian-Charts/FastScatter.md b/maui-toolkit/Cartesian-Charts/FastScatter.md new file mode 100644 index 00000000..7b1c2f2b --- /dev/null +++ b/maui-toolkit/Cartesian-Charts/FastScatter.md @@ -0,0 +1,67 @@ +--- +layout: post +title: Fast Scatter Chart in .NET MAUI Chart control | Syncfusion +description: Learn here all about the fast scatter chart and its features in Syncfusion® .NET MAUI Chart (SfCartesianChart) control. +platform: maui-toolkit +control: SfCartesianChart +documentation: ug +Keywords: .net maui fast scatter chart, .net maui performance scatter chart, fast scatter chart customization .net maui, syncfusion maui fast scatter chart, cartesian fast scatter chart maui, cartesian performance scatter chart maui, .net maui chart fast scatter visualization. +--- + +# Fast Scatter in .NET MAUI Chart + +The **FastScatterSeries** is a specialized scatter series designed to efficiently render a large number of data points. To render a fast scatter chart, create an instance of **FastScatterSeries**, and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html). + +The **PointHeight** and **PointWidth** properties in the FastScatterSeries control the height and width of scatter segments. The **Type** property allows you to change the rendering shape of the **FastScatterSeries**. + +N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content. + +{% tabs %} + +{% highlight xaml %} + +<chart:SfCartesianChart> + <chart:SfCartesianChart.XAxes> + <chart:NumericalAxis/> + </chart:SfCartesianChart.XAxes> + + <chart:SfCartesianChart.YAxes> + <chart:NumericalAxis/> + </chart:SfCartesianChart.YAxes> + + <chart:FastScatterSeries ItemsSource="{Binding Data}" + XBindingPath="XValue" + YBindingPath="YValue" + PointHeight="8" + PointWidth="8"/> +</chart:SfCartesianChart> + +{% endhighlight %} + +{% highlight c# %} + +SfCartesianChart chart = new SfCartesianChart(); + +NumericalAxis primaryAxis = new NumericalAxis(); +chart.XAxes.Add(primaryAxis); + +NumericalAxis secondaryAxis = new NumericalAxis(); +chart.YAxes.Add(secondaryAxis); + +FastScatterSeries series = new FastScatterSeries() +{ + ItemsSource = new ViewModel().Data, + XBindingPath = "XValue", + YBindingPath = "YValue", + PointHeight = 8, + PointWidth = 8, +}; + +chart.Series.Add(series); +this.Content = chart; + +{% endhighlight %} + +{% endtabs %} + + diff --git a/maui-toolkit/Cartesian-Charts/chart-types-images/maui_fast_scatter_chart.png b/maui-toolkit/Cartesian-Charts/chart-types-images/maui_fast_scatter_chart.png new file mode 100644 index 00000000..318cf3d4 Binary files /dev/null and b/maui-toolkit/Cartesian-Charts/chart-types-images/maui_fast_scatter_chart.png differ diff --git a/maui-toolkit/Chips/Chips-Types.md b/maui-toolkit/Chips/Chips-Types.md index 5f45ab29..8d6ead1b 100644 --- a/maui-toolkit/Chips/Chips-Types.md +++ b/maui-toolkit/Chips/Chips-Types.md @@ -1,7 +1,7 @@ --- layout: post -title: Chips Types in .NET MAUI Chips control | Syncfusion<sup>®</sup> -description: Learn about Chips Types support in Syncfusion<sup>®</sup> Toolkit for .NET MAUI Chips control, its elements and more. +title: Chips Types in .NET MAUI Chips control | Syncfusion® +description: Learn about Chips Types support in Syncfusion® Toolkit for .NET MAUI Chips control, its elements and more. platform: maui-toolkit control: Chips documentation: ug diff --git a/maui-toolkit/Chips/Customization.md b/maui-toolkit/Chips/Customization.md index 1b89ec8b..a2b9ab79 100644 --- a/maui-toolkit/Chips/Customization.md +++ b/maui-toolkit/Chips/Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Customization in .NET MAUI Chips control | Syncfusion<sup>®</sup> -description: Learn about Customization support in Syncfusion<sup>®</sup> EToolkit for .NET MAUI Chips control, its elements and more. +title: Customization in .NET MAUI Chips control | Syncfusion® +description: Learn about Customization support in Syncfusion® EToolkit for .NET MAUI Chips control, its elements and more. platform: maui-toolkit control: Chips documentation: ug diff --git a/maui-toolkit/Chips/DataTemplateSelector.md b/maui-toolkit/Chips/DataTemplateSelector.md index d15c5419..6e94a6db 100644 --- a/maui-toolkit/Chips/DataTemplateSelector.md +++ b/maui-toolkit/Chips/DataTemplateSelector.md @@ -1,7 +1,7 @@ --- layout: post -title: DataTemplateSelector in .NET MAUI Chips control | Syncfusion<sup>®</sup> -description: Learn about DataTemplateSelector support in Syncfusion<sup>®</sup> .NET MAUI Chips control, its elements and more. +title: DataTemplateSelector in .NET MAUI Chips control | Syncfusion® +description: Learn about DataTemplateSelector support in Syncfusion® .NET MAUI Chips control, its elements and more. platform: maui-toolkit control: Chips documentation: ug diff --git a/maui-toolkit/Chips/Events.md b/maui-toolkit/Chips/Events.md index 790b5c5b..dc0b4867 100644 --- a/maui-toolkit/Chips/Events.md +++ b/maui-toolkit/Chips/Events.md @@ -1,7 +1,7 @@ --- layout: post -title: Events in .NET MAUI Chips control | Syncfusion<sup>®</sup> -description: Learn about Events support in Syncfusion<sup>®</sup> Toolkit for .NET MAUI Chips control, its elements and more. +title: Events in .NET MAUI Chips control | Syncfusion® +description: Learn about Events support in Syncfusion® Toolkit for .NET MAUI Chips control, its elements and more. platform: maui-toolkit control: Chips documentation: ug diff --git a/maui-toolkit/Chips/Getting-Started.md b/maui-toolkit/Chips/Getting-Started.md index c1ed4880..7960f3b4 100644 --- a/maui-toolkit/Chips/Getting-Started.md +++ b/maui-toolkit/Chips/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Chips control | Syncfusion<sup>®</sup> -description: Learn here about getting started with Syncfusion<sup>®</sup> Toolkit for .NET MAUI Chips control, its elements and more. +title: Getting Started with .NET MAUI Chips control | Syncfusion® +description: Learn here about getting started with Syncfusion® Toolkit for .NET MAUI Chips control, its elements and more. platform: maui-toolkit control: Chips documentation: ug @@ -437,6 +437,8 @@ this.Content = grid;  +N> When publishing in AOT mode on iOS, ensure `[Preserve(AllMembers = true)]` is added to the model class to maintain DisplayMemberPath binding + ## Set types of chip group The functionality of chips control differ based on its [ChipType](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Chips.SfChipGroup.html#Syncfusion_Maui_Toolkit_Chips_SfChipGroup_ChipType) property. diff --git a/maui-toolkit/Chips/Overview.md b/maui-toolkit/Chips/Overview.md index 63a24162..d95016b7 100644 --- a/maui-toolkit/Chips/Overview.md +++ b/maui-toolkit/Chips/Overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Overview | .NET MAUI Chips | Syncfusion<sup>®</sup> +title: Overview | .NET MAUI Chips | Syncfusion® platform: maui-toolkit description: Learn here about overall key features in Toolkit for .NET MAUI SfChip Control, its elements, and more. control: SfChip diff --git a/maui-toolkit/Chips/Populating-Items.md b/maui-toolkit/Chips/Populating-Items.md index aa09ae50..dfae5f23 100644 --- a/maui-toolkit/Chips/Populating-Items.md +++ b/maui-toolkit/Chips/Populating-Items.md @@ -1,7 +1,7 @@ --- layout: post -title: Populating Items in .NET MAUI Chips control | Syncfusion<sup>®</sup> -description: Learn about Populating Items support in Syncfusion<sup>®</sup> Toolkit for .NET MAUI Chips control, its elements and more. +title: Populating Items in .NET MAUI Chips control | Syncfusion® +description: Learn about Populating Items support in Syncfusion® Toolkit for .NET MAUI Chips control, its elements and more. platform: maui-toolkit control: Chips documentation: ug diff --git a/maui-toolkit/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md b/maui-toolkit/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md index 434bcfac..e9b6c5f0 100644 --- a/maui-toolkit/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md +++ b/maui-toolkit/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md @@ -1,6 +1,6 @@ --- layout: post -title: How to apply the FontIcon for Syncfusion<sup>®</sup> chip control | .NET MAUI +title: How to apply the FontIcon for Syncfusion® chip control | .NET MAUI description: Learn how to apply the font icon to the Sfchip and its customization options with its available basic features in .NET MAUI platform: maui-toolkit control: Chips diff --git a/maui-toolkit/Migration.md b/maui-toolkit/Migration.md index e136f2dc..fccc22ad 100644 --- a/maui-toolkit/Migration.md +++ b/maui-toolkit/Migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Migration from Syncfusion® .NET MAUI to Syncfusion® Toolkit for .NET MAUI +title: Switch from Syncfusion® .NET MAUI to Syncfusion® Toolkit for .NET MAUI description: Describes the necessary changes to easily update the existing Syncfusion® .NET MAUI control to use the new toolkit with minimal code modifications. platform: maui-toolkit control: General @@ -81,6 +81,12 @@ By preserving similar APIs and functionality, developers can easily update their <td>xmlns:numericUpDown="clr-namespace:Syncfusion.Maui.Toolkit.NumericUpDown;assembly=Syncfusion.Maui.Toolkit"</td> <td>Defines the XAML namespace for <a href="https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.NumericUpDown.SfNumericUpDown.html">SfNumericUpDown</a> control.</td> </tr> +<tr> + <td>SfPopup</td> + <td>xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"</td> + <td>xmlns:popup="clr-namespace:Syncfusion.Maui.Toolkit.Popup;assembly=Syncfusion.Maui.Toolkit"</td> + <td>Defines the XAML namespace for SfPopup control.</td> +</tr> <tr> <td><a href="https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.PullToRefresh.SfPullToRefresh.html">SfPullToRefresh</a></td> <td>xmlns:pullToRefreshControl="clr-namespace:Syncfusion.Maui.PullToRefresh;assembly=Syncfusion.Maui.PullToRefresh"</td> diff --git a/maui-toolkit/NumericEntry/Basic-Features.md b/maui-toolkit/NumericEntry/Basic-Features.md index 849f6b4b..955b1581 100644 --- a/maui-toolkit/NumericEntry/Basic-Features.md +++ b/maui-toolkit/NumericEntry/Basic-Features.md @@ -1,7 +1,7 @@ --- layout: post -title: Basic Features in .NET MAUI Numeric Entry control | Syncfusion<sup>®</sup> -description: Learn about Basic Features support in Syncfusion<sup>®</sup> .NET MAUI Numeric Entry (SfNumericEntry) control and more. +title: Basic Features in .NET MAUI Numeric Entry control | Syncfusion® +description: Learn about Basic Features support in Syncfusion® .NET MAUI Numeric Entry (SfNumericEntry) control and more. platform: maui control: SfNumericEntry documentation: ug diff --git a/maui-toolkit/NumericEntry/Events.md b/maui-toolkit/NumericEntry/Events.md index adc61a46..afa2295a 100644 --- a/maui-toolkit/NumericEntry/Events.md +++ b/maui-toolkit/NumericEntry/Events.md @@ -1,7 +1,7 @@ --- ayout: post -title: Events in .NET MAUI NumericEntry control | Syncfusion<sup>®</sup> -description: Learn here all about the Events support in Syncfusion<sup>®</sup> .NET MAUI NumericEntry (SfNumericEntry) control and more details. +title: Events in .NET MAUI NumericEntry control | Syncfusion® +description: Learn here all about the Events support in Syncfusion® .NET MAUI NumericEntry (SfNumericEntry) control and more details. platform: maui control: SfNumericEntry documentation: ug diff --git a/maui-toolkit/NumericEntry/Formatting.md b/maui-toolkit/NumericEntry/Formatting.md index 0093f663..28625bc0 100644 --- a/maui-toolkit/NumericEntry/Formatting.md +++ b/maui-toolkit/NumericEntry/Formatting.md @@ -1,7 +1,7 @@ --- layout: post -title: Change Number Format in .NET MAUI NumericEntry | Syncfusion<sup>®</sup> -description: Learn here about changing the number format of Syncfusion<sup>®</sup> .NET MAUI NumericEntry (SfNumericEntry) control and more. +title: Change Number Format in .NET MAUI NumericEntry | Syncfusion® +description: Learn here about changing the number format of Syncfusion® .NET MAUI NumericEntry (SfNumericEntry) control and more. platform: MAUI control: SfNumericEntry documentation: ug diff --git a/maui-toolkit/NumericEntry/Getting-Started.md b/maui-toolkit/NumericEntry/Getting-Started.md index 8e4e6e29..40721d98 100644 --- a/maui-toolkit/NumericEntry/Getting-Started.md +++ b/maui-toolkit/NumericEntry/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI NumericEntry | Syncfusion<sup>®</sup> -description: Learn how to get started with Syncfusion<sup>®</sup> .NET MAUI NumericEntry (SfNumericEntry) control, its elements, and more in here. +title: Getting Started with .NET MAUI NumericEntry | Syncfusion® +description: Learn how to get started with Syncfusion® .NET MAUI NumericEntry (SfNumericEntry) control, its elements, and more in here. platform: MAUI control: SfNumericEntry documentation: ug diff --git a/maui-toolkit/NumericEntry/Overview.md b/maui-toolkit/NumericEntry/Overview.md index fd9ccfdb..ed8a4e51 100644 --- a/maui-toolkit/NumericEntry/Overview.md +++ b/maui-toolkit/NumericEntry/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI NumericEntry Control | Syncfusion<sup>®</sup> -description: Learn here all about introduction of Syncfusion<sup>®</sup> .NET MAUI NumericEntry (SfNumericEntry) control, its features, and more. +title: About .NET MAUI NumericEntry Control | Syncfusion® +description: Learn here all about introduction of Syncfusion® .NET MAUI NumericEntry (SfNumericEntry) control, its features, and more. platform: MAUI control: SfNumericEntry documentation: ug diff --git a/maui-toolkit/NumericEntry/Restriction.md b/maui-toolkit/NumericEntry/Restriction.md index 4a9345c8..1fb91eb6 100644 --- a/maui-toolkit/NumericEntry/Restriction.md +++ b/maui-toolkit/NumericEntry/Restriction.md @@ -1,7 +1,7 @@ --- layout: post -title: Value Change Restriction in .NET MAUI NumericEntry | Syncfusion<sup>®</sup> -description: Learn here all about how to restrict the value change in Syncfusion<sup>®</sup> .NET MAUI NumericEntry (SfNumericEntry) control and more. +title: Value Change Restriction in .NET MAUI NumericEntry | Syncfusion® +description: Learn here all about how to restrict the value change in Syncfusion® .NET MAUI NumericEntry (SfNumericEntry) control and more. platform: MAUI control: SfNumericEntry documentation: ug diff --git a/maui-toolkit/NumericUpDown/Basic-Features.md b/maui-toolkit/NumericUpDown/Basic-Features.md index 14d93964..d859bd3b 100644 --- a/maui-toolkit/NumericUpDown/Basic-Features.md +++ b/maui-toolkit/NumericUpDown/Basic-Features.md @@ -1,7 +1,7 @@ --- layout: post -title: Basic Features in .NET MAUI Numeric UpDown control | Syncfusion<sup>®</sup> -description: Learn about Basic Features support in Syncfusion<sup>®</sup> .NET MAUI Numeric UpDown (SfNumericUpDown) control and more. +title: Basic Features in .NET MAUI Numeric UpDown control | Syncfusion® +description: Learn about Basic Features support in Syncfusion® .NET MAUI Numeric UpDown (SfNumericUpDown) control and more. platform: maui control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/NumericUpDown/Events.md b/maui-toolkit/NumericUpDown/Events.md index b07c8102..13885075 100644 --- a/maui-toolkit/NumericUpDown/Events.md +++ b/maui-toolkit/NumericUpDown/Events.md @@ -1,7 +1,7 @@ --- ayout: post -title: Events in .NET MAUI NumericUpDown control | Syncfusion<sup>®</sup> -description: Learn here all about the Events support in Syncfusion<sup>®</sup> .NET MAUI NumericUpDown (SfNumericUpDown) control and more details. +title: Events in .NET MAUI NumericUpDown control | Syncfusion® +description: Learn here all about the Events support in Syncfusion® .NET MAUI NumericUpDown (SfNumericUpDown) control and more details. platform: maui control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/NumericUpDown/Formatting.md b/maui-toolkit/NumericUpDown/Formatting.md index be8bca18..d3dfd558 100644 --- a/maui-toolkit/NumericUpDown/Formatting.md +++ b/maui-toolkit/NumericUpDown/Formatting.md @@ -1,7 +1,7 @@ --- layout: post -title: Change Number Format in .NET MAUI NumericUpDown | Syncfusion<sup>®</sup> -description: Learn here about changing the number format of Syncfusion<sup>®</sup> .NET MAUI NumericUpDown (SfNumericUpDown) control and more. +title: Change Number Format in .NET MAUI NumericUpDown | Syncfusion® +description: Learn here about changing the number format of Syncfusion® .NET MAUI NumericUpDown (SfNumericUpDown) control and more. platform: MAUI control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/NumericUpDown/Getting-Started.md b/maui-toolkit/NumericUpDown/Getting-Started.md index 08b64fea..153a4e2c 100644 --- a/maui-toolkit/NumericUpDown/Getting-Started.md +++ b/maui-toolkit/NumericUpDown/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI NumericUpDown | Syncfusion<sup>®</sup> -description: Learn how to get started with Syncfusion<sup>®</sup> .NET MAUI NumericUpDown (SfNumericUpDown) control, its elements, and more in here. +title: Getting Started with .NET MAUI NumericUpDown | Syncfusion® +description: Learn how to get started with Syncfusion® .NET MAUI NumericUpDown (SfNumericUpDown) control, its elements, and more in here. platform: MAUI control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/NumericUpDown/Overview.md b/maui-toolkit/NumericUpDown/Overview.md index 8c2ab12d..15eb90ca 100644 --- a/maui-toolkit/NumericUpDown/Overview.md +++ b/maui-toolkit/NumericUpDown/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI NumericUpDown Control | Syncfusion<sup>®</sup> -description: Learn here all about introduction of Syncfusion<sup>®</sup> .NET MAUI NumericUpDown (SfNumericUpDown) control, its features, and more. +title: About .NET MAUI NumericUpDown Control | Syncfusion® +description: Learn here all about introduction of Syncfusion® .NET MAUI NumericUpDown (SfNumericUpDown) control, its features, and more. platform: MAUI control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/NumericUpDown/Restriction.md b/maui-toolkit/NumericUpDown/Restriction.md index 43850b0d..a0e0562d 100644 --- a/maui-toolkit/NumericUpDown/Restriction.md +++ b/maui-toolkit/NumericUpDown/Restriction.md @@ -1,7 +1,7 @@ --- layout: post -title: Value Change Restriction in .NET MAUI NumericUpDown | Syncfusion<sup>®</sup> -description: Learn here all about how to restrict the value change in Syncfusion<sup>®</sup> .NET MAUI NumericUpDown (SfNumericUpDown) control and more. +title: Value Change Restriction in .NET MAUI NumericUpDown | Syncfusion® +description: Learn here all about how to restrict the value change in Syncfusion® .NET MAUI NumericUpDown (SfNumericUpDown) control and more. platform: MAUI control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/NumericUpDown/UpDown-Button.md b/maui-toolkit/NumericUpDown/UpDown-Button.md index 1b43d462..c412e44e 100644 --- a/maui-toolkit/NumericUpDown/UpDown-Button.md +++ b/maui-toolkit/NumericUpDown/UpDown-Button.md @@ -1,7 +1,7 @@ --- layout: post -title: Use UpDown Button in .NET MAUI NumericUpDown | Syncfusion<sup>®</sup> -description: Learn here all about how to use UpDown Button (SpinButton) in Syncfusion<sup>®</sup> .NET MAUI NumericUpDown (SfNumericUpDown) control and more. +title: Use UpDown Button in .NET MAUI NumericUpDown | Syncfusion® +description: Learn here all about how to use UpDown Button (SpinButton) in Syncfusion® .NET MAUI NumericUpDown (SfNumericUpDown) control and more. platform: MAUI control: SfNumericUpDown documentation: ug diff --git a/maui-toolkit/Otp-Input/Accessibility.md b/maui-toolkit/Otp-Input/Accessibility.md new file mode 100644 index 00000000..be40ed03 --- /dev/null +++ b/maui-toolkit/Otp-Input/Accessibility.md @@ -0,0 +1,60 @@ +--- +layout: post +title: Accessibility in .NET MAUI OTP Input Control | Syncfusion +description: Learn here all about the accessibility features of Syncfusion .NET MAUI OTP Input (SfOtpInput) control. +platform: maui +control: SfOtpInput +documentation: ug +--- + +# Accessibility in .NET MAUI OTP Input (SfOtpInput) + +The OTP Input Control is designed to work effectively with the OTP Input elements, providing voice descriptions of their OTP Input items. + +## Keyboard Interaction +The following keyboard shortcuts are supported by the OTP Input component. + +<table> +<tr> +<th> +Key +</th> +<th> +Description +</th> +</tr> +<tr> +<td> +LeftArrow +</td> +<td> +Focuses the previous field in the OTP Input. +</td> +</tr> +<tr> +<td> +RightArrow +</td> +<td> +Focuses the next field in OTP Input. +</td> +</tr> +<tr> +<td> +Tab +</td> +<td> +Moves the initial focus and shifts focus to the next field of the OTP Input. +</td> +</tr> +<tr> +<td> +Shift + Tab +</td> +<td> +Moves the focus to the previous field of the OTP Input. +</td> +</tr> +</table> + +N> <kbd>Tab</kbd> and <kbd>Shift + Tab</kbd> functionality works only on Windows and MacCatalyst. \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/Events.md b/maui-toolkit/Otp-Input/Events.md new file mode 100644 index 00000000..0f91d2eb --- /dev/null +++ b/maui-toolkit/Otp-Input/Events.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Events in .NET MAUI OTP Input control | Syncfusion® +description: Learn about event support in Syncfusion® Toolkit for .NET MAUI OTP Input (SfOtpInput) control and more. +platform: maui-toolkit +control: OTP Input +documentation: ug +--- + +# Events in .NET MAUI OTP Input (SfOtpInput) + +Events in the OTP Input control allow developers to respond effectively to user interactions and input changes. + +## ValueChanged event + +The OTP Input component triggers the `ValueChanged` event whenever the value of an input field changes. This is particularly useful for validating input in real-time or triggering further actions as user input is completed. The `OtpInputValueChangedEventArgs` provides details about the specific changes in value. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput ValueChanged="OnValueChanged" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput(); +otpInput.ValueChanged += OnValueChanged; + +{% endhighlight %} +{% endtabs %} + +{% highlight c# %} + +private void OnValueChanged(object sender, OtpInputValueChangedEventArgs e) +{ + // Code executed when the input value changes. + // Example: Update the interface to show the new input value. + Console.WriteLine("New Value: " + e.NewValue); +} + +{% endhighlight %} \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/Getting-Started.md b/maui-toolkit/Otp-Input/Getting-Started.md new file mode 100644 index 00000000..ddcc1e23 --- /dev/null +++ b/maui-toolkit/Otp-Input/Getting-Started.md @@ -0,0 +1,253 @@ +--- +layout: post +title: Getting started with .NET MAUI OTP Input control | Syncfusion® +description: Learn here about getting started with Syncfusion® .NET MAUI OTP Input (SfOtpInput) control in your cross-platform applications. +platform: maui-toolkit +control: OTP Input +documentation: ug +--- + +# Getting Started with .NET MAUI OTP Input + +This section provides a quick overview of how to get started with the `OTP Input` for .NET MAUI and a walk-through to configure the .NET MAUI OTP Input in a real-time scenario. Follow the steps below to add .NET MAUI OTP Input to your project. + +{% tabcontents %} +{% tabcontent Visual Studio %} + +## Prerequisites + +Before proceeding, ensure the following are set up: + +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). + +## Step 1: Create a new .NET MAUI Project + +1. Go to **File > New > Project** and choose the **.NET MAUI App** template. +2. Name the project and choose a location. Then, click **Next.** +3. Select the .NET framework version and click **Create.** + +## Step 2: Install the Syncfusion<sup>®</sup> MAUI Toolkit Package + +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. + +## Step 3: Register the handler + +In the MauiProgram.cs file, register the handler for Syncfusion<sup>®</sup> Toolkit. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %} +using Syncfusion.Maui.Toolkit.Hosting; + +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .ConfigureSyncfusionToolkit() + .UseMauiApp<App>() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + + return builder.Build(); + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add a Basic OTP Input + +1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code. + +2. Initialize `SfOtpInput.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput(); + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} +{% tabcontent Visual Studio Code %} + +## Prerequisites + +Before proceeding, ensure the following are set up: + +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio Code. +3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) + +## Step 1: Create a new .NET MAUI Project + +1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. +2. Choose the **.NET MAUI App** template. +3. Select the project location, type the project name and press **Enter.** +4. Then choose **Create project.** + +## Step 2: Install the Syncfusion<sup>®</sup> MAUI Toolkit Package + +1. Press <kbd>Ctrl</kbd> + <kbd>`</kbd> (backtick) to open the integrated terminal in Visual Studio Code. +2. Ensure you're in the project root directory where your .csproj file is located. +3. Run the command `dotnet add package Syncfusion.Maui.Toolkit` to install the Syncfusion<sup>®</sup> .NET MAUI Toolkit NuGet package. +4. To ensure all dependencies are installed, run `dotnet restore.` + +## Step 3: Register the handler + +In the MauiProgram.cs file, register the handler for Syncfusion<sup>®</sup> Toolkit. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %} +using Syncfusion.Maui.Toolkit.Hosting; + +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .ConfigureSyncfusionToolkit() + .UseMauiApp<App>() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + + return builder.Build(); + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add a Basic OTP Input + +1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code. + +2. Initialize `SfOtpInput.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput(); + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent JetBrains Rider %} + +## Prerequisites + +Before proceeding, ensure the following are set up: + +1. Ensure you have the latest version of JetBrains Rider. +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) + +## Step 1: Create a new .NET MAUI Project + +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<sup>®</sup> MAUI Toolkit NuGet Package + +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) 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` + +## Step 3: Register the handler + +In the MauiProgram.cs file, register the handler for Syncfusion<sup>®</sup> Toolkit. + +{% tabs %} +{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %} +using Syncfusion.Maui.Toolkit.Hosting; + +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .ConfigureSyncfusionToolkit() + .UseMauiApp<App>() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); + }); + + return builder.Build(); + } +} + +{% endhighlight %} +{% endtabs %} + +## Step 4: Add a Basic OTP Input + +1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code. + +2. Initialize `SfOtpInput.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput(); + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} +{% endtabcontents %} + +## Value + +You can specify the value of OTP Input by using the `Value` property. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Value="e3c7" Type="Text" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Value = "e3c7", + Type = OtpInputType.Text +}; + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/Input-Types.md b/maui-toolkit/Otp-Input/Input-Types.md new file mode 100644 index 00000000..edad3368 --- /dev/null +++ b/maui-toolkit/Otp-Input/Input-Types.md @@ -0,0 +1,83 @@ +--- +layout: post +title: Input Types in .NET MAUI OTP Input | Syncfusion® +description: Learn here about input types in Syncfusion® .NET MAUI OTP Input (SfOtpInput) control in your cross-platform applications. +platform: maui-toolkit +control: OTP Input +documentation: ug +--- + +# Input Types in .NET MAUI OTP Input + +## Types + +This section explains the the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases. + +### Number type + +The `Type` property can be set to `Number`, prompting the input to handle numeric-only codes. This is ideal for scenarios demanding numeric OTP's. By default, the `Type` property is set to `Number`. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Value="1234" Type="Number" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Value = "1234", + Type = OtpInputType.Number +}; + +{% endhighlight %} +{% endtabs %} + + + +### Text type + +You can set the `Type` property to `Text` for inputs that may include both letters and numbers, suitable for alphanumeric OTP's. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Value="e3c7" Type="Text" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Value = "e3c7", + Type = OtpInputType.Text +}; + +{% endhighlight %} +{% endtabs %} + + + +### Password type + +You can set the `Type` property to `Password` to use this input type as password in the OTP Input. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Value="e3c7" Type="Password" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Value = "e3c7", + Type = OtpInputType.Password +}; + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/OtpInput-Customization.md b/maui-toolkit/Otp-Input/OtpInput-Customization.md new file mode 100644 index 00000000..8f26c690 --- /dev/null +++ b/maui-toolkit/Otp-Input/OtpInput-Customization.md @@ -0,0 +1,305 @@ +--- +layout: post +title: Customization in .NET MAUI OTP Input (SfOtpInput) | Syncfusion® +description: Learn how to customize OTP input in Syncfusion® .NET MAUI OTP Input (SfOtpInput) control. Explore various options to enhance the appearance of your OTP input. +platform: maui-toolkit +control: OTP Input +documentation: ug +--- + +# Customization in .NET MAUI OTP Input (SfOtpInput) + +An `OTP Input` consists of multiple elements that can be customized to enhance both its appearance and functionality. + +## Placeholder + +The placeholder for the OTP Input specifies the text that appears as a hint until the user enters a value. + +Set the placeholder text using the `Placeholder` property. When a single character is assigned, each input field will show the same character. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Placeholder="_" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Placeholder = "_" +}; + +{% endhighlight %} +{% endtabs %} + + + +For placeholders with multiple characters, available input fields will sequentially display each character. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Placeholder="wxyz" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Placeholder = "wxyz" +}; + +{% endhighlight %} +{% endtabs %} + + + +### PlaceholderColor + +The color of placeholder text can be changed using the `PlaceholderColor` property. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Placeholder="x" PlaceholderColor="Red" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Placeholder = "x", + PlaceholderColor = Colors.Red +}; + +{% endhighlight %} +{% endtabs %} + + + +## Separator + +The `Separator` property defines a character or symbol used to separate each input field, visually distinguishing inputs. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Separator="/" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Separator = "/" +}; + +{% endhighlight %} +{% endtabs %} + + + +## Setting input length + +You can specify the number of input fields to match the desired OTP code length by using the `Length` property. The default value is `4`. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Length="6" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Length = 6 +}; + +{% endhighlight %} +{% endtabs %} + + + +## Disable inputs + +You can disable the OTP Input component by using the `IsEnabled` property. By default, this property's value is set to `True.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput IsEnabled="False" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + IsEnabled = false +}; + +{% endhighlight %} +{% endtabs %} + + + +## Input background + +You can set the `InputBackground` property to any color to customize the appearance of the input fields. The `InputBackground` property applies only when `StylingMode` is set to `Filled.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput InputBackground="LightPink" StylingMode="Filled" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + InputBackground = Colors.LightPink, + StylingMode = OtpInputStyle.Filled +}; + +{% endhighlight %} +{% endtabs %} + + + +## Stroke + +You can set the `Stroke` property to any color to customize the border appearance of the input fields. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Stroke="Blue" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Stroke = Colors.Blue +}; + +{% endhighlight %} +{% endtabs %} + + + +## Text color + +You can set the `TextColor` property to any color to customize the text appearance of the input fields. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput TextColor="Orange" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + TextColor = Colors.Orange +}; + +{% endhighlight %} +{% endtabs %} + + + +## Mask character + +You can set the `MaskCharacter` property to any character to define how the masked input is displayed, enhancing security by obscuring sensitive information. The `MaskCharacter` property applies only when `Type` is set to `Password.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput Type="Password" MaskCharacter="*" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + Type = OtpInputType.Password, + MaskCharacter = '*' +}; + +{% endhighlight %} +{% endtabs %} + + + +## Input state + +The `InputState` property in the OTP Input allows you to visually represent the validation status of the input fields. + +### Success + +The `InputState` can be set to `Success` to indicate that the input is correct. When the `InputState` is set to `Success,` the stroke of the OTP Input turns green. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput InputState="Success" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + InputState = OtpInputState.Success +}; + +{% endhighlight %} +{% endtabs %} + + + +### Warning + +The `InputState` can be set to `Warning` to indicate a potential issue with the input, prompting the user to correct it. The stroke of the OTP Input turns orange-brown when `InputState` is set to `Warning.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput InputState="Warning" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + InputState = OtpInputState.Warning +}; + +{% endhighlight %} +{% endtabs %} + + + +### Error + +The `InputState` can be set to `Error` to indicate that the input is invalid or requires correction. The stroke of OTP Input turns red when `InputState` is set to `Error.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput InputState="Error" /> + +{% endhighlight %} +{% highlight C# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + InputState = OtpInputState.Error +}; + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/Overview.md b/maui-toolkit/Otp-Input/Overview.md new file mode 100644 index 00000000..9f427b2b --- /dev/null +++ b/maui-toolkit/Otp-Input/Overview.md @@ -0,0 +1,24 @@ +--- +layout: post +title: About .NET MAUI OTP Input control | Syncfusion® +description: Learn here about introduction of Syncfusion® .NET MAUI OTP Input (SfOtpInput) control in your cross-platform applications. +platform: maui-toolkit +control: OTP Input +documentation: ug +--- + +# .NET MAUI OTP Input (SfOtpInput) Overview + +An `OTP Input` is a user interface component commonly used in applications that require one-time password (OTP) verification for authentication. This simplify and streamline the process of entering OTP codes received via SMS, email, or other communication channels. + + + +## Key Features + +* `Length` - Customize the number of input fields to match the desired OTP code length. + +* `StylingMode` - Supports different styling modes : Outlined, Filled, and Underlined. + +* `Type` - Supports different input types : Number, Text, and Password. + +* `Separator` – Specifies the character or symbol used to separate each input field. \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/Styling-Modes.md b/maui-toolkit/Otp-Input/Styling-Modes.md new file mode 100644 index 00000000..dee8b1ba --- /dev/null +++ b/maui-toolkit/Otp-Input/Styling-Modes.md @@ -0,0 +1,79 @@ +--- +layout: post +title: Styling Modes in .NET MAUI OTP Input | Syncfusion® +description: Learn here about styling modes in Syncfusion® .NET MAUI OTP Input (SfOtpInput) control in your cross-platform applications. +platform: maui-toolkit +control: OTP Input +documentation: ug +--- + +# Styling Modes in OTP Input + +Styling modes specify the visual style variants for input fields in the OTP Input component, allowing you to customize appearances according to your application's design needs. + + +## Outline mode + +You can customize the appearance of input fields with a border around them by setting the `StylingMode` property to `Outlined.` This is the default styling mode for the OTP Input component. + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput StylingMode="Outlined" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + StylingMode = OtpInputStyle.Outlined +}; + +{% endhighlight %} +{% endtabs %} + + + +## Filled mode + +You can customize the appearance of input fields by filling them with color by setting the `StylingMode` property to `Filled.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput StylingMode="Filled" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + StylingMode = OtpInputStyle.Filled +}; + +{% endhighlight %} +{% endtabs %} + + + +## Underline mode + +You can customize the appearance of input fields with an underline by setting the `StylingMode` property to `Underlined.` + +{% tabs %} +{% highlight xaml %} + +<otpInput:SfOtpInput StylingMode="Underlined" /> + +{% endhighlight %} +{% highlight c# %} + +SfOtpInput otpInput = new SfOtpInput() +{ + StylingMode = OtpInputStyle.Underlined +}; + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/maui-toolkit/Otp-Input/images/error.png b/maui-toolkit/Otp-Input/images/error.png new file mode 100644 index 00000000..b3b1e942 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/error.png differ diff --git a/maui-toolkit/Otp-Input/images/filled.png b/maui-toolkit/Otp-Input/images/filled.png new file mode 100644 index 00000000..8c68b551 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/filled.png differ diff --git a/maui-toolkit/Otp-Input/images/inputBackground.png b/maui-toolkit/Otp-Input/images/inputBackground.png new file mode 100644 index 00000000..506958f6 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/inputBackground.png differ diff --git a/maui-toolkit/Otp-Input/images/isenabled.png b/maui-toolkit/Otp-Input/images/isenabled.png new file mode 100644 index 00000000..36f1c98f Binary files /dev/null and b/maui-toolkit/Otp-Input/images/isenabled.png differ diff --git a/maui-toolkit/Otp-Input/images/length.png b/maui-toolkit/Otp-Input/images/length.png new file mode 100644 index 00000000..35a3094c Binary files /dev/null and b/maui-toolkit/Otp-Input/images/length.png differ diff --git a/maui-toolkit/Otp-Input/images/maskCharacter.png b/maui-toolkit/Otp-Input/images/maskCharacter.png new file mode 100644 index 00000000..af87097a Binary files /dev/null and b/maui-toolkit/Otp-Input/images/maskCharacter.png differ diff --git a/maui-toolkit/Otp-Input/images/number.png b/maui-toolkit/Otp-Input/images/number.png new file mode 100644 index 00000000..121dccaf Binary files /dev/null and b/maui-toolkit/Otp-Input/images/number.png differ diff --git a/maui-toolkit/Otp-Input/images/outlined.png b/maui-toolkit/Otp-Input/images/outlined.png new file mode 100644 index 00000000..4e73da01 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/outlined.png differ diff --git a/maui-toolkit/Otp-Input/images/overview.png b/maui-toolkit/Otp-Input/images/overview.png new file mode 100644 index 00000000..cd454b3c Binary files /dev/null and b/maui-toolkit/Otp-Input/images/overview.png differ diff --git a/maui-toolkit/Otp-Input/images/password.png b/maui-toolkit/Otp-Input/images/password.png new file mode 100644 index 00000000..eb586f0e Binary files /dev/null and b/maui-toolkit/Otp-Input/images/password.png differ diff --git a/maui-toolkit/Otp-Input/images/placeholder.png b/maui-toolkit/Otp-Input/images/placeholder.png new file mode 100644 index 00000000..133d1abb Binary files /dev/null and b/maui-toolkit/Otp-Input/images/placeholder.png differ diff --git a/maui-toolkit/Otp-Input/images/placeholderColor.png b/maui-toolkit/Otp-Input/images/placeholderColor.png new file mode 100644 index 00000000..537e9189 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/placeholderColor.png differ diff --git a/maui-toolkit/Otp-Input/images/placeholderLength.png b/maui-toolkit/Otp-Input/images/placeholderLength.png new file mode 100644 index 00000000..a5af2185 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/placeholderLength.png differ diff --git a/maui-toolkit/Otp-Input/images/separator.png b/maui-toolkit/Otp-Input/images/separator.png new file mode 100644 index 00000000..d8490814 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/separator.png differ diff --git a/maui-toolkit/Otp-Input/images/stroke.png b/maui-toolkit/Otp-Input/images/stroke.png new file mode 100644 index 00000000..5c0592ff Binary files /dev/null and b/maui-toolkit/Otp-Input/images/stroke.png differ diff --git a/maui-toolkit/Otp-Input/images/success.png b/maui-toolkit/Otp-Input/images/success.png new file mode 100644 index 00000000..82483cea Binary files /dev/null and b/maui-toolkit/Otp-Input/images/success.png differ diff --git a/maui-toolkit/Otp-Input/images/text.png b/maui-toolkit/Otp-Input/images/text.png new file mode 100644 index 00000000..cec5ce1c Binary files /dev/null and b/maui-toolkit/Otp-Input/images/text.png differ diff --git a/maui-toolkit/Otp-Input/images/textColor.png b/maui-toolkit/Otp-Input/images/textColor.png new file mode 100644 index 00000000..3ae53e92 Binary files /dev/null and b/maui-toolkit/Otp-Input/images/textColor.png differ diff --git a/maui-toolkit/Otp-Input/images/underlined.png b/maui-toolkit/Otp-Input/images/underlined.png new file mode 100644 index 00000000..c3ef7fbf Binary files /dev/null and b/maui-toolkit/Otp-Input/images/underlined.png differ diff --git a/maui-toolkit/Otp-Input/images/value.png b/maui-toolkit/Otp-Input/images/value.png new file mode 100644 index 00000000..cec5ce1c Binary files /dev/null and b/maui-toolkit/Otp-Input/images/value.png differ diff --git a/maui-toolkit/Otp-Input/images/warning.png b/maui-toolkit/Otp-Input/images/warning.png new file mode 100644 index 00000000..4ce4d42f Binary files /dev/null and b/maui-toolkit/Otp-Input/images/warning.png differ diff --git a/maui-toolkit/Popup/Images/popup-positioning/maui-popup-popsitioning-without-actionbar-consideration.png b/maui-toolkit/Popup/Images/popup-positioning/maui-popup-popsitioning-without-actionbar-consideration.png new file mode 100644 index 00000000..11abbefc Binary files /dev/null and b/maui-toolkit/Popup/Images/popup-positioning/maui-popup-popsitioning-without-actionbar-consideration.png differ diff --git a/maui-toolkit/Popup/popup-positioning.md b/maui-toolkit/Popup/popup-positioning.md index 472637f5..0abfe87a 100644 --- a/maui-toolkit/Popup/popup-positioning.md +++ b/maui-toolkit/Popup/popup-positioning.md @@ -322,6 +322,29 @@ popup.IsOpen = true;  +## Position the popup over the action bar + +The SfPopup can be positioned without considering the action bar by using the `SfPopup.IgnoreActionBar` property. When set to true, this allows the popup to be positioned over the action bar without any constraints. + +{% tabs %} +{% highlight xaml hl_lines="2" %} +<syncfusion:SfPopup x:Name="popup" + IgnoreActionBar="True"> +</syncfusion:SfPopup> +{% endhighlight %} +{% highlight c# hl_lines="2" %} +SfPopup popup = new SfPopup(); +popup.IgnoreActionBar = True; +popup.Show(0,0); +{% endhighlight %} +{% endtabs %} + + + +If `IgnoreActionBar` is set to false, the popup positioning will take the action bar into account, ensuring it does not overlap. + +This feature is useful when you want to display the popup freely across the screen, including over the action bar. + ## How to ### Returning result diff --git a/maui-toolkit/Release-notes/v1.0.4.md b/maui-toolkit/Release-notes/v1.0.4.md new file mode 100644 index 00000000..9b01e17e --- /dev/null +++ b/maui-toolkit/Release-notes/v1.0.4.md @@ -0,0 +1,17 @@ +--- +title: Syncfusion Toolkit for .NET MAUI Release Notes +description: Syncfusion Toolkit for .NET MAUI Release Notes +platform: maui-toolkit +documentation: ug +--- + +# Syncfusion Toolkit for .NET MAUI Release Notes + +{% include release-info.html date="March 13, 2025" version="v1.0.4" %} + +{% directory path: _includes/release-notes/v1.0.4 %} + +{% include {{file.url}} %} + +{% enddirectory %} + diff --git a/maui-toolkit/TabView/CenterButton-Customization.md b/maui-toolkit/TabView/CenterButton-Customization.md new file mode 100644 index 00000000..f0113440 --- /dev/null +++ b/maui-toolkit/TabView/CenterButton-Customization.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Center button customization in .NET MAUI Tab View | Syncfusion® +description: Learn here all about the center button customization in the Syncfusion® .NET MAUI Tab View(SfTabView) control. +platform: maui-toolkit +control: Tab View +documentation: ug +--- + +# Center Button Customization in .NET MAUI Tab View (SfTabView) + +This section explains how to enable and customize The center button in .NET MAUI [SfTabView.](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html) + +## Enable the center button + +You can enable the center button in Tab View by setting the `IsCenterButtonEnable` property to `True.` + +{% tabs %} + +{% highlight xaml %} + +<tabView:SfTabView x:Name="tabView" + IsCenterButtonEnabled="True" /> + +{% endhighlight %} + +{% highlight C# %} + +public MainPage() +{ + InitializeComponent(); + SfTabView tabView = new SfTabView(); + tabView.IsCenterButtonEnabled = true; + this.Content = tabView; +} +{% endhighlight %} + +{% endtabs %} + +## Customize the center button +You can customize the center button using the properties of `CenterButtonSetting.` The following properties are used to customize the view of the center button `Background,` `Stroke,` `StrokeThickness,` `CornerRadius,` `TextColor,` `Height,` `Title,` `FontAttributes,` `FontFamily,` `FontSize,` `Width,` `ImageSource,` `ImageSize,` and `DisplayMode.` + +{% tabs %} + +{% highlight xaml %} + +<tabView:SfTabView.CenterButtonSettings> + <tabView:CenterButtonSettings Title="Home" + Height="70" + Width="80" + Background="White" + Stroke="HotPink" + StrokeThickness="3" + CornerRadius="10" + TextColor="Green" + ImageSource="image.png" + ImageSize="24" + DisplayMode="ImageWithText" + FontFamily="SevillanaRegular" + FontAttributes="Bold" + FontSize="16" /> +</tabView:SfTabView.CenterButtonSettings> + +{% endhighlight %} + +{% highlight C# %} + +public MainPage() +{ + InitializeComponent(); + SfTabView tabView = new SfTabView(); + CenterButtonSettings centerButtonSettings = new CenterButtonSettings() + { + Height = 80, + Width = 100, + Title = "Center Button", + FontAttributes = FontAttributes.Bold, + TextColor = Colors.Green, + DisplayMode = CenterButtonDisplayMode.ImageWithText, + ImageSource = "Home.png", + ImageSize = 24, + FontFamily = "SevillanaRegular", + CornerRadius = new CornerRadius(10), + }; + + tabView.CenterButtonSettings = centerButtonSettings; +} +{% endhighlight %} + +{% endtabs %} + +## Center button tapped event + +When the center button is tapped, the `CenterButtonTapped` event occurs. Using this event we can set alert messages. + +{% tabs %} + +{% highlight xaml %} + +<tabView:SfTabView CenterButtonTapped="OnCenterButtonTapped"> +</tabView:SfTabView> + +{% endhighlight %} + +{% highlight C# %} + +public MainPage() +{ + InitializeComponent(); + tabView.CenterButtonTapped += OnCenterButtonTapped; +} + +private void OnCenterButtonTapped(object sender, EventArgs e) +{ + DisplayAlert("Message", "CenterButton Clicked", "Ok"); +} + +{% endhighlight %} + +{% endtabs %} diff --git a/maui-toolkit/TabView/Tab-Bar-Customization.md b/maui-toolkit/TabView/Tab-Bar-Customization.md index 0fda66e9..4b5a5ea1 100644 --- a/maui-toolkit/TabView/Tab-Bar-Customization.md +++ b/maui-toolkit/TabView/Tab-Bar-Customization.md @@ -119,6 +119,52 @@ tabView.HeaderHorizontalTextAlignment = TextAlignment.Center;  + +## Enable content transition + +The .NET MAUI Tab View allows users to enable or disable the transition animation for tab content when switching between tabs using `IsContentTransitionEnabled` property. + +{% tabs %} + +{% highlight xaml %} +<tabView:SfTabView IsContentTransitionEnabled="True" ContentTransitionDuration = 1000/> +{% endhighlight %} + +{% highlight C# %} +SfTabView tabView = new SfTabView(); +tabView.IsContentTransitionEnabled = "True"; +tabView.ContentTransitionDuration = 1000; +{% endhighlight %} + +{% endtabs %} + + +## Tab header alignment + +The .NET MAUI TabView allows users to customize the header position using the `TabHeaderAlignment` property, providing greater flexibility in tab layout customization. + +By default, the header is positioned at the Start. This property supports the following values: + +* **Start** - Positions the tab header at the beginning of the tab view. +* **Center** - Aligns the tab header at the center of the tab view. +* **End** - Places the tab header at the end of the tab view. + + +N> The `TabHeaderAlignment` property is applicable only when the `TabWidthMode` is set to SizeToContent. + +{% tabs %} + +{% highlight xaml %} +<tabView:SfTabView TabHeaderAlignment="Center"/> +{% endhighlight %} + +{% highlight C# %} +SfTabView tabView = new SfTabView(); + tabView.TabHeaderAlignment = TabHeaderAlignment.Center; +{% endhighlight %} + +{% endtabs %} + ## Tab bar placement options The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be done using the [TabBarPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html#Syncfusion_Maui_Toolkit_TabView_SfTabView_TabBarPlacement) property. diff --git a/maui-toolkit/TextInputLayout/Assistive-Labels.md b/maui-toolkit/TextInputLayout/Assistive-Labels.md index 32e3992b..f7d3aa04 100644 --- a/maui-toolkit/TextInputLayout/Assistive-Labels.md +++ b/maui-toolkit/TextInputLayout/Assistive-Labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Assistive Labels in .NET MAUI Text Input Layout control | Syncfusion<sup>®</sup> -description: Learn here all about Assistive Labels support in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Assistive Labels in .NET MAUI Text Input Layout control | Syncfusion® +description: Learn here all about Assistive Labels support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Container-Type.md b/maui-toolkit/TextInputLayout/Container-Type.md index 405a0287..9848cf56 100644 --- a/maui-toolkit/TextInputLayout/Container-Type.md +++ b/maui-toolkit/TextInputLayout/Container-Type.md @@ -1,7 +1,7 @@ --- layout: post -title: Container Type in .NET MAUI Text Input Layout control | Syncfusion<sup>®</sup> -description: Learn here all about Container Type support in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Container Type in .NET MAUI Text Input Layout control | Syncfusion® +description: Learn here all about Container Type support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Custom-Font.md b/maui-toolkit/TextInputLayout/Custom-Font.md index de4ba669..7532b017 100644 --- a/maui-toolkit/TextInputLayout/Custom-Font.md +++ b/maui-toolkit/TextInputLayout/Custom-Font.md @@ -1,7 +1,7 @@ --- layout: post -title: Font Customization in .NET MAUI TextInputLayout control | Syncfusion<sup>®</sup> -description: Learn here all about Font Customization support in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Font Customization in .NET MAUI TextInputLayout control | Syncfusion® +description: Learn here all about Font Customization support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Custom-Icons.md b/maui-toolkit/TextInputLayout/Custom-Icons.md index 0f857123..cf2325e7 100644 --- a/maui-toolkit/TextInputLayout/Custom-Icons.md +++ b/maui-toolkit/TextInputLayout/Custom-Icons.md @@ -1,7 +1,7 @@ --- layout: post -title: Custom Icons in .NET MAUI Text Input Layout control | Syncfusion<sup>®</sup> -description: Learn here all about Custom Icons support in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Custom Icons in .NET MAUI Text Input Layout control | Syncfusion® +description: Learn here all about Custom Icons support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Events.md b/maui-toolkit/TextInputLayout/Events.md index 3f07d520..675f5d87 100644 --- a/maui-toolkit/TextInputLayout/Events.md +++ b/maui-toolkit/TextInputLayout/Events.md @@ -1,7 +1,7 @@ --- layout: post -title: Events in MAUI TextInputLayout control | Syncfusion<sup>®</sup> -description: Learn about Events support in Syncfusion<sup>®</sup> Toolkit for .NET MAUI TextInputLayout control, its elements, and more. +title: Events in MAUI TextInputLayout control | Syncfusion® +description: Learn about Events support in Syncfusion® Toolkit for .NET MAUI TextInputLayout control, its elements, and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Fixed-Hint-Position.md b/maui-toolkit/TextInputLayout/Fixed-Hint-Position.md index d3144329..aed20b0f 100644 --- a/maui-toolkit/TextInputLayout/Fixed-Hint-Position.md +++ b/maui-toolkit/TextInputLayout/Fixed-Hint-Position.md @@ -1,7 +1,7 @@ --- layout: post -title: Fixed Hint Position in .NET MAUI TextInputLayout control | Syncfusion<sup>®</sup> -description: Learn here all about Fixed Hint Position support in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Fixed Hint Position in .NET MAUI TextInputLayout control | Syncfusion® +description: Learn here all about Fixed Hint Position support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Getting-Started.md b/maui-toolkit/TextInputLayout/Getting-Started.md index 610f367b..c5c2035b 100644 --- a/maui-toolkit/TextInputLayout/Getting-Started.md +++ b/maui-toolkit/TextInputLayout/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Text Input Layout | Syncfusion® -description: Learn here about getting started with Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control, its elements and more. +title: Getting Started with .NET MAUI Text Input Layout control | Syncfusion® +description: Learn here about getting started with Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control, its elements and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/How-To.md b/maui-toolkit/TextInputLayout/How-To.md index c7549515..ac114168 100644 --- a/maui-toolkit/TextInputLayout/How-To.md +++ b/maui-toolkit/TextInputLayout/How-To.md @@ -1,7 +1,7 @@ --- layout: post -title: How to | SfTextInputLayout |.NET MAUI | Syncfusion<sup>®</sup> -description: Learn here all about stroke thickness customization in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: How to | SfTextInputLayout |.NET MAUI | Syncfusion® +description: Learn here all about stroke thickness customization in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Overview.md b/maui-toolkit/TextInputLayout/Overview.md index bccc1b1b..073b2144 100644 --- a/maui-toolkit/TextInputLayout/Overview.md +++ b/maui-toolkit/TextInputLayout/Overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About .NET MAUI Text Input Layout control | Syncfusion<sup>®</sup> -description: Learn here all about introduction of Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control, its elements and more. +title: About .NET MAUI Text Input Layout control | Syncfusion® +description: Learn here all about introduction of Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control, its elements and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/States-And-Colors.md b/maui-toolkit/TextInputLayout/States-And-Colors.md index 929dfcbd..7c55656f 100644 --- a/maui-toolkit/TextInputLayout/States-And-Colors.md +++ b/maui-toolkit/TextInputLayout/States-And-Colors.md @@ -1,7 +1,7 @@ --- layout: post -title: States and Colors the .NET MAUI Text Input Layout control | Syncfusion<sup>®</sup> -description: Learn here all about States and Colors support in the Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: States and Colors the .NET MAUI Text Input Layout control | Syncfusion® +description: Learn here all about States and Colors support in the Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/Supported-input-views.md b/maui-toolkit/TextInputLayout/Supported-input-views.md index 34064305..6c8ec9dc 100644 --- a/maui-toolkit/TextInputLayout/Supported-input-views.md +++ b/maui-toolkit/TextInputLayout/Supported-input-views.md @@ -1,7 +1,7 @@ --- layout: post -title: Supported Input Views in .NET MAUI Text Input Layout | Syncfusion<sup>®</sup> -description: Learn here all about Supported Input Views support in the Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Supported Input Views in .NET MAUI Text Input Layout | Syncfusion® +description: Learn here all about Supported Input Views support in the Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug diff --git a/maui-toolkit/TextInputLayout/right-to-left.md b/maui-toolkit/TextInputLayout/right-to-left.md index e4aa5e2c..ad87a543 100644 --- a/maui-toolkit/TextInputLayout/right-to-left.md +++ b/maui-toolkit/TextInputLayout/right-to-left.md @@ -1,7 +1,7 @@ --- layout: post -title: Right-to-Left in .NET MAUI Text Input Layout control | Syncfusion<sup>®</sup> -description: Learn about Right-to-Left support in Syncfusion<sup>®</sup> .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: Right-to-Left in .NET MAUI Text Input Layout control | Syncfusion® +description: Learn about Right-to-Left support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui-toolkit control: SfTextInputLayout documentation: ug