From 480845f2c6e8fc14f9698db1a3214b78df7fd6ee Mon Sep 17 00:00:00 2001 From: TameemAnsari-SF4702 Date: Wed, 21 May 2025 18:38:57 +0530 Subject: [PATCH] 959291 - Tools Controls UG documentation Review changes by AI --- MAUI/Button/Customization.md | 10 +- MAUI/Button/Events.md | 8 +- MAUI/Button/Getting-Started.md | 9 +- MAUI/Button/Migration.md | 7 +- MAUI/Button/Overview.md | 17 ++-- MAUI/Button/Right-To-Left.md | 12 ++- MAUI/Button/Visual-States.md | 12 ++- .../how-to/Add-the-custom-view-for-button.md | 10 +- MAUI/Carousel-View/Animation.md | 21 ++-- MAUI/Carousel-View/Linear-Arrangement.md | 18 ++-- MAUI/Carousel-View/LoadMore.md | 41 ++++---- MAUI/Carousel-View/Migration.md | 10 +- MAUI/Carousel-View/Populating-Data.md | 19 ++-- MAUI/Carousel-View/SwipeEvents.md | 10 +- MAUI/Carousel-View/Transformation.md | 28 +++--- MAUI/Carousel-View/UIVirtualization.md | 22 ++--- MAUI/Carousel-View/getting-started.md | 16 ++-- MAUI/Carousel-View/how-to.md | 22 +++-- MAUI/Carousel-View/overview.md | 17 ++-- MAUI/Chips/Chips-Types.md | 8 +- MAUI/Chips/Customization.md | 80 ++++++++-------- MAUI/Chips/DataTemplateSelector.md | 16 ++-- MAUI/Chips/Events.md | 35 +++---- MAUI/Chips/Getting-Started.md | 21 ++-- MAUI/Chips/Migration.md | 5 +- MAUI/Chips/Overview.md | 18 ++-- MAUI/Chips/Populating-Items.md | 15 ++- ...ing-fonticon-to-Syncfusion-chip-control.md | 10 +- MAUI/Rotator/Adding-Looping-and-Delays.md | 7 +- MAUI/Rotator/DataTemplateSelector.md | 6 +- MAUI/Rotator/Events.md | 8 +- MAUI/Rotator/Getting-started.md | 17 ++-- MAUI/Rotator/Header-Visibility.md | 6 +- MAUI/Rotator/Loading-Online-Images.md | 4 +- MAUI/Rotator/Migration.md | 6 +- MAUI/Rotator/Navigation-Customization.md | 29 +++--- MAUI/Rotator/Navigation-Modes.md | 6 +- MAUI/Rotator/Overview.md | 12 +-- MAUI/Rotator/Placement-Modes.md | 10 +- MAUI/Rotator/Populating-Data.md | 16 ++-- MAUI/Rotator/Sliding-Direction.md | 14 +-- MAUI/SignaturePad/getting-started.md | 95 +++++++++---------- MAUI/SignaturePad/migration.md | 4 +- MAUI/SignaturePad/overview.md | 17 ++-- MAUI/TextInputLayout/Assistive-Labels.md | 30 +++--- MAUI/TextInputLayout/Container-Type.md | 23 +++-- MAUI/TextInputLayout/Custom-Font.md | 22 ++--- MAUI/TextInputLayout/Custom-Icons.md | 31 +++--- MAUI/TextInputLayout/Events.md | 10 +- MAUI/TextInputLayout/Fixed-Hint-Position.md | 23 ++--- MAUI/TextInputLayout/Getting-Started.md | 67 +++++++------ MAUI/TextInputLayout/How-To.md | 13 ++- MAUI/TextInputLayout/Migration.md | 11 +-- MAUI/TextInputLayout/Overview.md | 23 +++-- MAUI/TextInputLayout/States-And-Colors.md | 34 ++++--- MAUI/TextInputLayout/Supported-input-views.md | 47 ++++----- MAUI/TextInputLayout/right-to-left.md | 7 +- 57 files changed, 555 insertions(+), 560 deletions(-) diff --git a/MAUI/Button/Customization.md b/MAUI/Button/Customization.md index 597a9b409b..c7c89a6498 100644 --- a/MAUI/Button/Customization.md +++ b/MAUI/Button/Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Customization in .NET MAUI Button control | Syncfusion® -description: Learn here all about Customization support in Syncfusion® .NET MAUI Button (SfButton) control and more. +title: "Customization in .NET MAUI Button Control | Syncfusion®" +description: "Learn about customization support in the Syncfusion® .NET MAUI Button (SfButton) control." platform: maui control: SfButton documentation: ug @@ -9,15 +9,15 @@ documentation: ug # Customization in .NET MAUI Button (SfButton) -The [.NET MAUI Button](https://www.syncfusion.com/maui-controls/maui-button) control supports to customize the border color, image width, corner radius, background color, and more. The button control can be customized using the following properties: +The [.NET MAUI Button](https://www.syncfusion.com/maui-controls/maui-button) control allows you to customize aspects such as border color, image width, corner radius, background color, and more. The following properties are available for button customization: ## Text Customization -The text inside the button can be customized by its text color, font size, font attributes, font family and text alignment. +Customize the text inside the button using properties for text color, font size, font attributes, font family, and text alignment. ### TextColor -The [`TextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_TextColor) property is used to customize the color of text in [`SfButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html). +Use the [`TextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_TextColor) property to customize the text color in [`SfButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html). {% tabs %} {% highlight xaml %} diff --git a/MAUI/Button/Events.md b/MAUI/Button/Events.md index deb49389c8..7aa3614325 100644 --- a/MAUI/Button/Events.md +++ b/MAUI/Button/Events.md @@ -1,7 +1,7 @@ --- layout: post -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. +title: "Event in .NET MAUI Button Control | Syncfusion®" +description: "Learn about event support in the Syncfusion® .NET MAUI Button (SfButton) control, its elements, and more." platform: maui control: SfButton documentation: ug @@ -10,9 +10,9 @@ documentation: ug # Event in .NET MAUI Button (SfButton) -## Clicked event +## Clicked Event -The click event occurs when the [`SfButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) is clicked. The event argument is of type `EventArgs`. +The Clicked event is triggered when the [`SfButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) is clicked. The event argument is of type `EventArgs`. {% tabs %} {% highlight xaml %} diff --git a/MAUI/Button/Getting-Started.md b/MAUI/Button/Getting-Started.md index f41d13b403..777def36d8 100644 --- a/MAUI/Button/Getting-Started.md +++ b/MAUI/Button/Getting-Started.md @@ -1,13 +1,13 @@ --- layout: post -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. +title: "Getting Started with .NET MAUI Button | Syncfusion®" +description: "Learn how to get started with the Syncfusion® .NET MAUI Button (SfButton) control, its elements, and more." platform: MAUI control: SfButton documentation: ug --- -> **Notice**: After **Volume 1 2025 (Mid of March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition refer this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +> **Notice**: After **Volume 1 2025 (Mid March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition, refer to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Getting Started with .NET MAUI Button @@ -42,7 +42,7 @@ Before proceeding, ensure the following are in place: ## Step 3: Register the Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs file**, register the handler for Syncfusion® core. +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) NuGet package is a dependency for all Syncfusion® controls in .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} using Microsoft.Maui; @@ -271,3 +271,4 @@ button.WidthRequest = 150; Find the complete getting started sample of the .NET MAUI Button from this [link.](https://github.com/SyncfusionExamples/maui-button-samples) N> You can refer to our [.NET MAUI Button](https://www.syncfusion.com/maui-controls/maui-button) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Button Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons) that shows you how to render the Button in .NET MAUI. + diff --git a/MAUI/Button/Migration.md b/MAUI/Button/Migration.md index 93523669b4..82d5a57b5b 100644 --- a/MAUI/Button/Migration.md +++ b/MAUI/Button/Migration.md @@ -1,7 +1,7 @@ --- layout: post -title: Migrating from Xamarin to .NET MAUI Button | Syncfusion® -description: Learn about Migrating from Syncfusion® Xamarin Button to the Syncfusion® .NET MAUI Button control and more here. +title: "Migrating from Xamarin to .NET MAUI Button | Syncfusion®" +description: "Learn about migrating from the Syncfusion® Xamarin Button to the Syncfusion® .NET MAUI Button control." platform: maui control: SfButton documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Migrating from Xamarin SfButton to .NET MAUI SfButton -To migrate easier from Xamarin SfButton to [.NET MAUI SfButton](https://www.syncfusion.com/maui-controls/maui-button), we kept most of the APIs from Xamarin SfButton in MAUI SfButton. However, to maintain the consistency of the API naming in MAUI SfButton, we renamed some of the APIs. The APIs changed in MAUI SfButton from Xamarin SfButton are detailed as follows: +To facilitate an easier migration from Xamarin SfButton to the [.NET MAUI SfButton](https://www.syncfusion.com/maui-controls/maui-button), most APIs from the Xamarin SfButton have been retained in the MAUI version. However, some APIs have been renamed to maintain consistency in naming within the MAUI SfButton. The changes in API names between MAUI and Xamarin SfButton are detailed below: ## Namespaces @@ -50,3 +50,4 @@ To migrate easier from Xamarin SfButton to [.NET MAUI SfButton](https://www.sync ## Known Issues The gradient colors used as a background are not functioning as expected because of a framework-level issue. This issue is specifically related to the incorrect rendering of gradient color on iOS and macOS when clipping a view. Refer to this [link](https://github.com/dotnet/maui/issues/18671) for more details. + diff --git a/MAUI/Button/Overview.md b/MAUI/Button/Overview.md index ec95d95824..3405450e99 100644 --- a/MAUI/Button/Overview.md +++ b/MAUI/Button/Overview.md @@ -1,22 +1,23 @@ --- layout: post -title: About .NET MAUI Control | Syncfusion® -description: Learn here about introduction of the Syncfusion® .NET MAUI Button (SfButton) control, its elements and more. +title: "About .NET MAUI Control | Syncfusion®" +description: "Learn about the introduction of the Syncfusion® .NET MAUI Button (SfButton) control, its elements, and more." platform: maui control: SfButton documentation: ug --- -> **Notice**: After **Volume 1 2025 (Mid of March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition refer this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +> **Notice**: After **Volume 1 2025 (Mid-March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition, please refer to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # .NET MAUI Button (SfButton) Overview -The .NET MAUI Button is a custom button control with UI customization. Set icons, background images, and corner edge radii and customize the appearance for different visual states using the visual state manager. +The .NET MAUI Button is a customizable button control that allows for UI customization. You can set icons, background images, and corner edge radii, and customize the appearance for different visual states using the Visual State Manager. -## Key features +## Key Features - * Easily customize a button as an outline, flat, circle, or icon button. - * Display an image as the background for the control. - * Display custom content in the button control. +- Easily customize the button to be an outline, flat, circle, or icon button. +- Display an image as the background for the control. +- Display custom content within the button control. ![Overview image of SfButton](Images/overview/Overview.png) + diff --git a/MAUI/Button/Right-To-Left.md b/MAUI/Button/Right-To-Left.md index 40bfe2f9ef..a47ea6884f 100644 --- a/MAUI/Button/Right-To-Left.md +++ b/MAUI/Button/Right-To-Left.md @@ -1,15 +1,19 @@ --- layout: post -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. +title: "Right-To-Left in .NET MAUI Button Control | Syncfusion®" +description: "Learn about 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 --- -# Right To Left in .NET MAUI Button (SfButton) +# Right-To-Left in .NET MAUI Button (SfButton) -[SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) supports changing the layout direction of the control in the right-to-left direction by setting the [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.device.flowdirection?view=net-maui-7.0) to `RightToLeft` or by changing the device language. +The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) control supports layout direction changes to right-to-left by setting the [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.device.flowdirection?view=net-maui-7.0) property to `RightToLeft` or by changing the device language to an RTL language. + +## Example + +Below is an example of how you can enable right-to-left directionality in the SfButton: {% tabs %} {% highlight xaml %} diff --git a/MAUI/Button/Visual-States.md b/MAUI/Button/Visual-States.md index 9701acc99d..a52ef57277 100644 --- a/MAUI/Button/Visual-States.md +++ b/MAUI/Button/Visual-States.md @@ -1,7 +1,7 @@ --- layout: post -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. +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 @@ -10,7 +10,7 @@ documentation: ug # Visual States in .NET MAUI Button (SfButton) -The visual of the Button can be customized using `VisualStates`. The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) control contains the following five visual states: +The visual appearance of the SfButton can be customized using `VisualStates`. The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) control supports the following five visual states: * Normal * Hovered @@ -18,7 +18,11 @@ The visual of the Button can be customized using `VisualStates`. The [SfButton]( * Checked * Disabled -N> The visual states [Checked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_IsChecked) and Unchecked are only updated when enabling the [IsCheckable](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_IsCheckable) property in the SfButton. +> **Note:** The visual states [Checked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_IsChecked) and Unchecked are only activated when the [IsCheckable](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_IsCheckable) property is enabled in the SfButton. + +## Example + +The following example demonstrates how to define visual states for the SfButton: {% tabs %} {% highlight xaml %} diff --git a/MAUI/Button/how-to/Add-the-custom-view-for-button.md b/MAUI/Button/how-to/Add-the-custom-view-for-button.md index ad4b18e04a..d9af45a1ef 100644 --- a/MAUI/Button/how-to/Add-the-custom-view-for-button.md +++ b/MAUI/Button/how-to/Add-the-custom-view-for-button.md @@ -1,15 +1,15 @@ --- layout: post -title: How to Add the Custom View for Syncfusion® SfButton -description: Learn here about how to add the custom view for the Syncfusion® .NET MAUI Button (SfButton) control. +title: "How to Add a Custom View to the Syncfusion® SfButton" +description: "Learn how to add a custom view for the Syncfusion® .NET MAUI Button (SfButton) control." platform: maui -control: Sfbutton +control: SfButton documentation: ug --- -# Add the custom view for button +# Add a Custom View to the Button -You can customize the appearance of the button by adding your custom view in the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_Content) property. The following code sample demonstrates how to apply the busy indicator control as a custom view for a button. +Customize the appearance of the button by adding a custom view to the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_Content) property. The following code sample demonstrates how to apply a busy indicator control as a custom view for a button. {% tabs %} {% highlight xaml %} diff --git a/MAUI/Carousel-View/Animation.md b/MAUI/Carousel-View/Animation.md index 2f1ecd65d0..a3036573dc 100644 --- a/MAUI/Carousel-View/Animation.md +++ b/MAUI/Carousel-View/Animation.md @@ -1,15 +1,19 @@ --- -layout : post -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 +layout: post +title: "Animation in .NET MAUI CarouselView Control | Syncfusion®" +description: "Learn about animation support in the Syncfusion® .NET MAUI CarouselView (SfCarousel) control." +platform: maui +control: Carousel +documentation: ug --- -# Animation in .NET MAUI Carousel View (SfCarousel) +# Animation in .NET MAUI CarouselView (SfCarousel) -The [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_Duration) property of the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control specifies the time taken to move an item to the selected item position in the Default mode. The duration is specified in milliseconds. The default value is 600 ms. +The [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_Duration) property in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control specifies the time taken for an item to transition to the selected item position in Default mode. The duration is specified in milliseconds, with a default value of 600 ms. + +## Example + +Here's how you can set the animation duration for the SfCarousel: {% tabs %} @@ -33,3 +37,4 @@ carousel.Duration = 1000; {% endtabs %} + diff --git a/MAUI/Carousel-View/Linear-Arrangement.md b/MAUI/Carousel-View/Linear-Arrangement.md index 852d33e293..3fcb296408 100644 --- a/MAUI/Carousel-View/Linear-Arrangement.md +++ b/MAUI/Carousel-View/Linear-Arrangement.md @@ -1,15 +1,19 @@ --- -layout : post -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 +layout: post +title: "Linear Arrangement in .NET MAUI Carousel View Control | Syncfusion®" +description: "Learn about Linear Arrangement support in the Syncfusion® .NET MAUI Carousel View (SfCarousel) control." +platform: maui +control: Carousel +documentation: ug --- # Linear Arrangement in .NET MAUI Carousel View (SfCarousel) -The Carousel items can be populated in the view in a stacked linear layout by setting the [ViewMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_ViewMode) property to [Linear](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.ViewMode.html#Syncfusion_Maui_Core_Carousel_ViewMode_Linear). The present option is [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.ViewMode.html#Syncfusion_Maui_Core_Carousel_ViewMode_Default). +Carousel items can be arranged in a linear stacked layout by setting the [ViewMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_ViewMode) property to [Linear](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.ViewMode.html#Syncfusion_Maui_Core_Carousel_ViewMode_Linear). The default option is [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.ViewMode.html#Syncfusion_Maui_Core_Carousel_ViewMode_Default). + +## Example + +Here is how you can configure the Carousel in Linear ViewMode: {% tabs %} diff --git a/MAUI/Carousel-View/LoadMore.md b/MAUI/Carousel-View/LoadMore.md index b6107c6db5..28e83fb4c6 100644 --- a/MAUI/Carousel-View/LoadMore.md +++ b/MAUI/Carousel-View/LoadMore.md @@ -1,33 +1,31 @@ --- -layout : post -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 +layout: post +title: "Load More in .NET MAUI Carousel View Control | Syncfusion®" +description: "Learn about Load More support in the Syncfusion® .NET MAUI Carousel View (SfCarousel) control." +platform: maui +control: Carousel +documentation: ug --- # Load More in .NET MAUI Carousel View (SfCarousel) -To get start quickly to customize the Appearance of .NET MAUI Carousel, you can check on this video: +To quickly get started with customizing the appearance of the .NET MAUI Carousel, you can watch this video: {% youtube "https://www.youtube.com/watch?v=Q3eNppgpQ2Y" %} -Virtualization can be achieved by using the Load More concept. This support is used to handle the numerous items in the carousel control. Items are maintained in the viewport based on the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property. The LoadMore view is added after the last item in the collection of the carousel view. When tapping the LoadMore view, the next set of items in the collection can be added to the carousel. +Virtualization can be achieved using the Load More concept, allowing you to handle numerous items in the carousel control. Items are maintained in the viewport based on the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property. The Load More view is added after the last item in the collection of the carousel view. Tapping the Load More view adds the next set of items to the carousel. -The following properties are used to achieve this support: +The following properties are used to enable this feature: -* [AllowLoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_AllowLoadMore) - -* [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) - -* [LoadMoreView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreView) +- [AllowLoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_AllowLoadMore) +- [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) +- [LoadMoreView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreView) ## Allow Load More -By enabling the [AllowLoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_AllowLoadMore) property, the LoadMore support works in the carousel view. +Enable the [AllowLoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_AllowLoadMore) property to activate the Load More feature in the carousel view. -N>The default value of the [AllowLoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_AllowLoadMore) property is false. +> **Note:** The default value of the [AllowLoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_AllowLoadMore) property is `false`. {% tabs %} @@ -58,7 +56,8 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); ## Load More Items Count -Number of items can be maintained in the carousel control using the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property. By using the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property, numerous items can be separated. +Use the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property to specify the number of items maintained in the carousel control, allowing separation for a large number of items. +> **Note:** The default value of the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property is `3`. N>The default value of the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) property is 3. @@ -93,7 +92,7 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); ## Load More View -Custom view can be passed instead of the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMore) label using the [LoadMoreView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreView) property. +You can provide a custom view for the Load More label using the [LoadMoreView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreView) property. {% tabs %} @@ -161,9 +160,9 @@ carousel.LoadMoreView = grid; ![Load more](images/LoadMore.png) -## Load More method +## Load More Method -To load more items programmatically, the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMore) method can be called, which loads the items dynamically to the UI based on the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) API value. +To programmatically load more items, use the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMore) method, which dynamically loads items to the UI based on the [LoadMoreItemsCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMoreItemsCount) API value. {% tabs %} @@ -207,4 +206,4 @@ private void Button_Clicked(object sender, EventArgs e) {% endtabs %} -Find the complete Load More sample from this [link](https://github.com/SyncfusionExamples/maui-carousel-samples/tree/master/LoadMore/LoadMoreSample). \ No newline at end of file +Find the complete Load More sample from this [link](https://github.com/SyncfusionExamples/maui-carousel-samples/tree/master/LoadMore/LoadMoreSample). diff --git a/MAUI/Carousel-View/Migration.md b/MAUI/Carousel-View/Migration.md index 7b584b5103..966030e182 100644 --- a/MAUI/Carousel-View/Migration.md +++ b/MAUI/Carousel-View/Migration.md @@ -1,7 +1,7 @@ --- layout: post -title: Migrating from Xamarin to .NET MAUI Carousel View | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin Carousel View to Syncfusion® .NET MAUI Carousel View control and more. +title: "Migrating from Xamarin to .NET MAUI Carousel View | Syncfusion®" +description: "Learn about migrating from Syncfusion® Xamarin Carousel View to the Syncfusion® .NET MAUI Carousel View control." platform: maui control: Carousel documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Migrating from Xamarin Carousel View to .NET MAUI Carousel View -To migrate easier from [Xamarin SfCarousel](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfCarousel.XForms.SfCarousel.html) to [.NET MAUI SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html), we kept all the APIs from Xamarin SfCarousel in MAUI SfCarousel. We have renamed the namespace as follows. +To facilitate easier migration from [Xamarin SfCarousel](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfCarousel.XForms.SfCarousel.html) to [.NET MAUI SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html), all APIs from Xamarin SfCarousel have been maintained in the MAUI version. The namespace has been updated as follows: ## Namespaces @@ -22,6 +22,6 @@ To migrate easier from [Xamarin SfCarousel](https://help.syncfusion.com/cr/xamar Syncfusion.Maui.Carousel -## Upcoming features +## Upcoming Features - * Scroll support in the default mode for Mac Catalyst platform. \ No newline at end of file + * Scroll support in the default mode for Mac Catalyst platform. diff --git a/MAUI/Carousel-View/Populating-Data.md b/MAUI/Carousel-View/Populating-Data.md index 0a2a865ac5..5bbe912bf9 100644 --- a/MAUI/Carousel-View/Populating-Data.md +++ b/MAUI/Carousel-View/Populating-Data.md @@ -1,23 +1,23 @@ --- -layout : post -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 +layout: post +title: Populating Data in .NET MAUI Carousel View Control | Syncfusion® +description: Learn all about Populating Data support in Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. +platform: maui +control: Carousel +documentation: ug --- # Populating Data in .NET MAUI Carousel View (SfCarousel) -[SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control supports binding to different items sources such as IList and ObservableCollection type of items sources. +The [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control supports binding to different item sources, such as `IList` and `ObservableCollection` types. ## Through Binding -Items can be populated in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control through item source and applying a custom template, as explained in the following. +Items can be populated in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control through item source and applying a custom template, as explained below. ### Create a Model with Data -[SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) items can be populated with a collection of image data. For example, a user may want to create a [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control, which will display a list of images. +[SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) items can be populated with a collection of image data. For instance, you may want to create a `SfCarousel` control to display a list of images. The [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) model looks as follows. @@ -241,3 +241,4 @@ namespace CarouselSample Similarly, every item can be created and customized in case a different carousel item view is needed. + diff --git a/MAUI/Carousel-View/SwipeEvents.md b/MAUI/Carousel-View/SwipeEvents.md index 0cd7777a31..c5f8a9a635 100644 --- a/MAUI/Carousel-View/SwipeEvents.md +++ b/MAUI/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® .NET MAUI Carousel View (SfCarousel) control and more. +title: Swipe Events in .NET MAUI Carousel View Control | Syncfusion® +description: Learn all about Swipe Events support in the Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. platform: maui control: Carousel documentation: ug @@ -11,13 +11,13 @@ documentation: ug ## SwipeStarted Event -The [SwipeStarted](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SwipeStarted) event will be triggered when the swipe gesture is started. +The [SwipeStarted](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SwipeStarted) event is triggered when the swipe gesture starts. -[SwipeStartedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.SwipeStartedEventArgs.html#Syncfusion_Maui_Core_Carousel_SwipeStartedEventArgs__ctor) contains the [IsSwipeLeft](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.SwipeStartedEventArgs.html#Syncfusion_Maui_Core_Carousel_SwipeStartedEventArgs_IsSwipedLeft) value, which denotes whether the swipe direction is from the left side or not. +[SwipeStartedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.SwipeStartedEventArgs.html#Syncfusion_Maui_Core_Carousel_SwipeStartedEventArgs__ctor) contains the [IsSwipeLeft](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.SwipeStartedEventArgs.html#Syncfusion_Maui_Core_Carousel_SwipeStartedEventArgs_IsSwipedLeft) value, indicating whether the swipe direction is from the left side. ## SwipeEnded Event -The [SwipeEnded](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SwipeEnded) event can be triggered after the swiping is completed in the carousel items. +The [SwipeEnded](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SwipeEnded) event triggers after the swiping is completed in the carousel items. {% tabs %} diff --git a/MAUI/Carousel-View/Transformation.md b/MAUI/Carousel-View/Transformation.md index 133a1da467..9aa314fa49 100644 --- a/MAUI/Carousel-View/Transformation.md +++ b/MAUI/Carousel-View/Transformation.md @@ -1,21 +1,21 @@ --- -layout : post -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 +layout: post +title: Transformation in .NET MAUI Carousel View Control | Syncfusion® +description: Learn all about Transformation support in the Syncfusion® .NET MAUI Carousel View (SfCarousel) control, its elements, and more. +platform: maui +control: Carousel +documentation: ug --- # Transformation in .NET MAUI Carousel View (SfCarousel) -The [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_Offset) between selected and unselected item can be customized in [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control. And also the items can be scaled to the specified value. +The [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_Offset) between selected and unselected items can be customized in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control. Additionally, the items can be scaled to a specified value. -## Tilt Non Selected Items +## Tilt Non-Selected Items The [RotationAngle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_RotationAngle) property in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control is utilized to tilt all unselected items at a specified angle in the [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Carousel.ViewMode.html#Syncfusion_Maui_Core_Carousel_ViewMode_Default) mode. -N> If the angle value is positive, then the rotation is in the clockwise direction. If the angle value is negative, the rotation is in the counterclockwise direction. +> Note: If the angle value is positive, then the rotation is in the clockwise direction. If the angle value is negative, the rotation is in the counterclockwise direction. {% tabs %} @@ -50,7 +50,7 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); ## Set Gap between Selected Item -Distance between the selected item and other items can be customized by using [SelectedItemOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SelectedItemOffset) property of the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control in the Default mode. +Distance between the selected item and other items can be customized by using [SelectedItemOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SelectedItemOffset) property of the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control in the Default mode. {% tabs %} @@ -84,11 +84,11 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); ![SelectedItemOffset in .NET MAUI Carousel View.](images/net-maui-carousel-view-selectedoffset.png) -## Set Gap between unselected Items +## Set Gap between Unselected Items The [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_Offset) property is used to define the accurate distance between unselected items in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) panel in the Default mode. -N> The default offset value is 40 for desktop platforms and 18 for mobile platforms. +> Note: The default offset value is 40 for desktop platforms and 18 for mobile platforms. {% tabs %} @@ -124,7 +124,7 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); ## Set Scaling for Carousel Items -The [ScaleOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_ScaleOffset) property in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control is used to scale all the items to the specified scale value in the Default mode. +The [ScaleOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_ScaleOffset) property in the [SfCarousel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html) control is used to scale all the items to the specified scale value in the Default mode. {% tabs %} @@ -157,7 +157,7 @@ carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); ![Scale offset in .NET MAUI Carousel View.](images/net-maui-carousel-view-scaleoffset.png) -## Spacing between the Items in Linear mode +## Spacing between the Items in Linear Mode Spacing of all the items in Linear mode can be determined by using [ItemSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_ItemSpacing) property. diff --git a/MAUI/Carousel-View/UIVirtualization.md b/MAUI/Carousel-View/UIVirtualization.md index 1db2436a95..579c8a8d82 100644 --- a/MAUI/Carousel-View/UIVirtualization.md +++ b/MAUI/Carousel-View/UIVirtualization.md @@ -1,25 +1,21 @@ --- -layout : post -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 +layout: post +title: UI Virtualization in .NET MAUI Carousel View Control | Syncfusion® +description: Learn all about UI Virtualization support in the Syncfusion® .NET MAUI Carousel View (SfCarousel) control and more. +platform: maui +control: Carousel +documentation: ug --- -# UIVirtualization in .NET MAUI Carousel View (SfCarousel) +# UI Virtualization in .NET MAUI Carousel View (SfCarousel) -In the UI virtualization concept, only the number of items that can be adaptable to the viewport of our device are arranged. Even, if numerous items have been added to the collection, it only loads the viewport adaptable count of the carousel items. Items are added at the right of the view when swiping the countable items in the forward direction. At the same time, the same number of items are removed at the left of the view to maintain the same viewport items count. Similarly, items are added at the left of the view when swiping backward to maintain the same viewport items count. At the same time, the same number of items are removed at the right of the view. Using this mechanism, the virtualization concept is achieved in the carousel control. - -The following property has been used in UIVirtualization support: - -* `EnableVirtualization` +In UI virtualization, only the number of items that fit the viewport of your device are arranged. Even if numerous items are added to the collection, only the viewport adaptable number of carousel items are loaded. When you swipe the items forward, new items are added to the right of the view, and an equal number of items are removed from the left to maintain the viewport item count. Similarly, when swiping backward, items are added to the left, and an equal number are removed from the right. This mechanism achieves virtualization in the carousel control. ## EnableVirtualization The UI virtualization concept is implemented by enabling the [EnableVirtualization](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_EnableVirtualization) property in SfCarousel Linear mode. -N> The default value of the [EnableVirtualization](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_EnableVirtualization) property is false. +> Note: The default value of the [EnableVirtualization](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_EnableVirtualization) property is false. {% tabs %} diff --git a/MAUI/Carousel-View/getting-started.md b/MAUI/Carousel-View/getting-started.md index c581aca15e..faf9b997bb 100644 --- a/MAUI/Carousel-View/getting-started.md +++ b/MAUI/Carousel-View/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with .NET MAUI Carousel View control | Syncfusion® -description: Learn here about getting started with Syncfusion® .NET MAUI Carousel View (SfCarousel) control, its elements and more. +title: "Getting Started with .NET MAUI Carousel View Control | Syncfusion®" +description: "Learn about getting started with Syncfusion® .NET MAUI Carousel View (SfCarousel) control, its elements, and more." platform: maui control: Carousel documentation: ug --- -> **Notice**: After **Volume 1 2025 (Mid of March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition refer this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +> **Notice**: After **Volume 1 2025 (Mid-March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition, refer to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Getting Started with .NET MAUI Carousel -This section guides you through setting up and configuring a [Carousel](https://www.syncfusion.com/maui-controls/maui-carousel) in your .NET MAUI application. Follow the steps below to add a basic Carousel to your project. +This section guides you through setting up and configuring the [Carousel](https://www.syncfusion.com/maui-controls/maui-carousel) in your .NET MAUI application. Follow the steps below to add a basic Carousel to your project. To quickly get started with the .NET MAUI Carousel, watch this video. @@ -24,7 +24,7 @@ To quickly get started with the .NET MAUI Carousel, watch this video. Before proceeding, ensure the following are in place: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or a later version. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). ## Step 1: Create a New MAUI Project @@ -39,9 +39,9 @@ Before proceeding, ensure the following are in place: 2. Search for [Syncfusion.Maui.Carousel](https://www.nuget.org/packages/Syncfusion.Maui.Carousel) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Step 3: Register the handler +## Step 3: Register the Handler - [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion® core. +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} using Microsoft.Maui; @@ -405,4 +405,4 @@ N> The [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carou N> You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-SfCarousel). -N> You can also explore our [.NET MAUI Carousel Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Carousel) that shows you how to render and configure the Carousel in .NET MAUI. \ No newline at end of file +N> You can also explore our [.NET MAUI Carousel Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Carousel) that shows you how to render and configure the Carousel in .NET MAUI. diff --git a/MAUI/Carousel-View/how-to.md b/MAUI/Carousel-View/how-to.md index 699c39223a..33ec9c4b37 100644 --- a/MAUI/Carousel-View/how-to.md +++ b/MAUI/Carousel-View/how-to.md @@ -1,15 +1,19 @@ --- -layout : post -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 -documentation : ug +layout: post +title: "Interaction in Syncfusion® Carousel Control in .NET MAUI" +description: "Learn how to perform operations when changing the CarouselItem or collection in Carousel for .NET MAUI." +platform: maui +control: Carousel +documentation: ug --- -# How to perform an operation while changing the CarouselItem? +# How to Perform an Operation While Changing the CarouselItem? -We can perform the operation while changing the CarouselItem using the [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SelectionChanged) event. The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SelectionChanged) event returns the OldItem and selected NewItem. +You can perform operations while changing the CarouselItem using the [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_SelectionChanged) event. This event returns both the OldItem and the newly selected NewItem. + +## Example + +Here is an example of how to handle the SelectionChanged event in a Carousel: {% tabs %} @@ -37,7 +41,7 @@ carousel.ItemTemplate = itemTemplate; carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection"); carousel.SelectionChanged += Carousel_SelectionChanged; -// Trigger when selection changed in the carousel item. +// Event handler triggered when the carousel item's selection changes. private void Carousel_SelectionChanged(object sender, Syncfusion.Maui.Core.Carousel.SelectionChangedEventArgs e) { int count = (sender as SfCarousel).SelectedIndex + 1; diff --git a/MAUI/Carousel-View/overview.md b/MAUI/Carousel-View/overview.md index d2402b7c41..8c0ee78a2b 100644 --- a/MAUI/Carousel-View/overview.md +++ b/MAUI/Carousel-View/overview.md @@ -1,22 +1,23 @@ --- layout: post -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. +title: "About .NET MAUI Carousel View Control | Syncfusion®" +description: "Learn about the introduction of the Syncfusion® .NET MAUI Carousel View (SfCarousel) control, its elements, and more." platform: maui control: Carousel documentation: ug --- -> **Notice**: After **Volume 1 2025 (Mid of March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition refer this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +> **Notice**: After **Volume 1 2025 (Mid-March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition, please refer to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # .NET MAUI Carousel View (SfCarousel) Overview -The .NET MAUI Carousel control allows users to navigate through image data in an interactive way so that it can be viewed or selected. It provides various customization options for its item arrangements. +The .NET MAUI Carousel control allows users to navigate through image data interactively, enabling viewing or selection of items. It offers various customization options for item arrangements. ![Carousel OverView](images/gettingstarted.png) -## Key Features: +## Key Features + +- **Offset**: Specify the space between unselected items in the Carousel. +- **Rotation Angle**: Rotate all items to a specified angle. +- **Duration**: Define the time it takes to move an item to the selected item position. -* Offset: Specify the space between the unselected items in the Carousel. -* Rotation angle: Rotate all the items to a specified angle. -* Duration: Specify the time it should take to move an item to the selected item position. diff --git a/MAUI/Chips/Chips-Types.md b/MAUI/Chips/Chips-Types.md index ec3589554c..e252bdede9 100644 --- a/MAUI/Chips/Chips-Types.md +++ b/MAUI/Chips/Chips-Types.md @@ -1,17 +1,17 @@ --- layout: post -title: Chips Types in .NET MAUI Chips control | Syncfusion® -description: Learn about Chips Types support in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements and more. +title: Chip Types in .NET MAUI Chips Control | Syncfusion® +description: Learn about Chip Types support in the Syncfusion® Essential Studio® .NET MAUI Chips control, its elements, and more. platform: maui control: Chips documentation: ug --- -# Chips Types in .NET MAUI Chips +# Chip Types in .NET MAUI Chips ## Input -Arranges the [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) in a layout and enables the close button for each chip. Using the close button, a chip can be removed from children and layout as well. Additionally, it has support to add an option at the end of the layout, from which users can obtain the chip text for creating a chip at run time. +The [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) can be arranged in a layout with a close button for each chip. Using the close button, a chip can be removed from the layout. Additionally, it supports adding an option at the end of the layout, enabling users to input text to create a chip at runtime. The following code illustrates how to get an input type chip. diff --git a/MAUI/Chips/Customization.md b/MAUI/Chips/Customization.md index 13abc272f3..cee331f1d5 100644 --- a/MAUI/Chips/Customization.md +++ b/MAUI/Chips/Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Customization in .NET MAUI Chips control | Syncfusion® -description: Learn about Customization support in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements and more. +title: Customization in .NET MAUI Chips Control | Syncfusion® +description: Learn about the customization support in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements, and more. platform: maui control: Chips documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Customization in .NET MAUI Chips -The [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) control supports to customize the background color, border color, close button color, and more. The chip control can be customized using the following properties: +The [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) control supports customization of background color, border color, close button color, and more. The chip control can be customized using the following properties: ## ShowCloseButton -The [`ShowCloseButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ShowCloseButton) property sets the visible state of close button in SfChip. +The [`ShowCloseButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ShowCloseButton) property sets the visibility of the close button in `SfChip`. {% tabs %} @@ -40,11 +40,11 @@ SfChip chip = new SfChip() ![SfChip with CloseButton](images/customization-images/chip_showclosebutton_image.png) -N> The default value of ShowCloseButton is [`false`]. +> Note: The default value of `ShowCloseButton` is `false`. ## ShowSelectionIndicator -The [`ShowSelectionIndicator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ShowSelectionIndicator) property sets the visible state of selection indicator in SfChip. +The [`ShowSelectionIndicator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ShowSelectionIndicator) property sets the visibility of the selection indicator in `SfChip`. {% tabs %} @@ -72,11 +72,11 @@ SfChip chip = new SfChip() ![SfChip with ShowSelectionIndicator](images/customization-images/chip_showselectionindicator_image.png) -N> The default value of ShowSelectionIndicator is [`false`]. +> Note: The default value of `ShowSelectionIndicator` is `false`. ## CloseButtonColor -The [`CloseButtonColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_CloseButtonColor) property customizes the color of the close button in SfChip. +The [`CloseButtonColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_CloseButtonColor) property customizes the color of the close button in `SfChip`. {% tabs %} @@ -105,11 +105,11 @@ SfChip chip = new SfChip() ![SfChip with CloseButtonColor](images/customization-images/chip_closebuttoncolor_image.png) -N> The Default value of CloseButtonColor is [`Color.FromArgb("#49454E")`]. +> Note: The default value of `CloseButtonColor` is `Color.FromArgb("#49454E")`. ## SelectionIndicatorColor -The [`SelectionIndicatorColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_SelectionIndicatorColor) property customizes the selection indicator color in SfChip. +The [`SelectionIndicatorColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_SelectionIndicatorColor) property customizes the selection indicator color in `SfChip`. {% tabs %} @@ -138,11 +138,11 @@ SfChip chip = new SfChip() ![SfChip with SelectionIndicatorColor](images/customization-images/chip_selectionindicatorcolor_image.png) -N> The default value of SelectionIndicatorColor is [`Color.FromRgb(30, 25, 43)`]. +> Note: The default value of `SelectionIndicatorColor` is `Color.FromRgb(30, 25, 43)`. ## Background Color -The [`Background`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_Background) property customizes the background color of SfChip. +The [`Background`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_Background) property customizes the background color of `SfChip`. {% tabs %} @@ -171,7 +171,7 @@ SfChip chip = new SfChip() ## Stroke -The [`Stroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_Stroke) property customizes the color of border in SfChip. +The [`Stroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_Stroke) property customizes the color of the border in `SfChip`. {% tabs %} @@ -199,7 +199,7 @@ SfChip chip = new SfChip() ## StrokeThickness -The [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_StrokeThickness) property is used to customizes the border thickness of the SfChip on four sides. +The [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_StrokeThickness) property customizes the border thickness of `SfChip` on all sides. {% tabs %} @@ -231,7 +231,7 @@ SfChip chip = new SfChip() ## CornerRadius -The [`CornerRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_CornerRadius) property is used to customize the rounded edges in SfChip as demonstrated in the following code sample. +The [`CornerRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_CornerRadius) property customizes the rounded edges of `SfChip`. {% tabs %} @@ -259,11 +259,11 @@ SfChip chip = new SfChip() ![SfChip with CornerRadius](images/customization-images/chip_cornerradius_image.png) -N> The default value of CornerRadius is [`Thickness(8)`]. +> Note: The default value of `CornerRadius` is `Thickness(8)`. ## FontAttributes -The [`FontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontAttributes) property customizes the font style of text in SfChip. +The [`FontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontAttributes) property customizes the font style of text in `SfChip`. {% tabs %} @@ -292,7 +292,7 @@ SfChip chip = new SfChip() ## FontFamily -The [`FontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontFamily) property customizes the font family of text in SfChip. +The [`FontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontFamily) property customizes the font family of text in `SfChip`. {% tabs %} @@ -320,7 +320,7 @@ SfChip chip = new SfChip() ## FontSize -The [`FontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontSize) property customizes the size of text in SfChip. +The [`FontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontSize) property customizes the size of text in `SfChip`. {% tabs %} @@ -347,11 +347,11 @@ SfChip chip = new SfChip() ![SfChip with FontSize](images/customization-images/chip_fontsize_image.png) -N> Default Value of FontSize is [`14d`] +> Note: The default value of `FontSize` is `14d`. ## TextColor -The [`TextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_TextColor) property customizes the color of text in SfChip. +The [`TextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_TextColor) property customizes the color of the text in `SfChip`. {% tabs %} @@ -378,11 +378,11 @@ SfChip chip = new SfChip() ![SfChip with TextColor](images/customization-images/chip_textcolor_image.png) -N> The default value of TextColor is [`Color.FromArgb("#1C1B1F")`]. +> Note: The default value of `TextColor` is `Color.FromArgb("#1C1B1F")`. ## TextAlignment -The [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_HorizontalTextAlignment) and [`VerticalTextAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_VerticalTextAlignment) properties customize the alignment of text in SfChip. +The [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_HorizontalTextAlignment) and [`VerticalTextAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_VerticalTextAlignment) properties customize the alignment of text in `SfChip`. {% tabs %} @@ -412,11 +412,11 @@ SfChip chip = new SfChip() ![SfChip with TextAlignment](images/customization-images/chip_textalignment_image.png) -N> The default values of HorizontalTextAlignment and VerticalTextAlignment are [`TextAlignment.Center`]. +> Note: The default values of `HorizontalTextAlignment` and `VerticalTextAlignment` are `TextAlignment.Center`. ## ShowIcon -You can enable the icon image using the [`ShowIcon`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ShowIcon) property to know whether any image appears to the SfChip. +The [`ShowIcon`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ShowIcon) property enables the display of an icon image in `SfChip`. {% tabs %} @@ -444,11 +444,11 @@ SfChip chip = new SfChip() ![SfChip with ShowIcon](images/customization-images/chip_showicon_image.png) -N> The default value of ShowIcon is [`false`]. +> Note: The default value of `ShowIcon` is `false`. ## BackgroundImageSource -The [`BackgroundImageSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_BackgroundImageSource) property is used to customize the aspect for the image of SfChip. +The [`BackgroundImageSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_BackgroundImageSource) property customizes the background image of `SfChip`. {% tabs %} @@ -462,17 +462,17 @@ The [`BackgroundImageSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Mau {% highlight c# %} SfChip chip = new SfChip(); -chip.BackgroundImageSource="lion.png"; +chip.BackgroundImageSource = "lion.png"; {% endhighlight %} {% endtabs %} -![SfChip with image property](images/customization-images/chip_chipbackground_image.png) +![SfChip with Image Property](images/customization-images/chip_chipbackground_image.png) ## ImageSource -The [`ImageSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageSource) property customizes the icon image of SfChip by adding a custom image. +The [`ImageSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageSource) property customizes the icon image in `SfChip`. {% tabs %} @@ -500,11 +500,11 @@ SfChip chip = new SfChip() ![SfChip with ImageSource](images/customization-images/chip_imagesource_image.png) -N> Enable the [`ShowIcon`] property to enable the [`ImageSource`] property. +> Note: Enable the [`ShowIcon`] property to enable the [`ImageSource`] property. ## ImageSize -The [`ImageSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ImageSize) property customizes the width and height of icon image in SfChip. +The [`ImageSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ImageSize) property customizes the width and height of the icon image in `SfChip`. {% tabs %} @@ -534,11 +534,11 @@ SfChip chip = new SfChip() ![SfChip with ImageSize](images/customization-images/chip_imagesize_image.png) -N> The default value of ImageSize is [`18d`]. +> Note: The default value of `ImageSize` is `18d`. ## ImageAlignment -The [`ImageAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageAlignment) property customizes the alignment of icon image in SfChip. +The [`ImageAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageAlignment) property customizes the alignment of the icon image in `SfChip`. {% tabs %} @@ -568,11 +568,11 @@ SfChip chip = new SfChip() ![SfChip with ImageAlignment](images/customization-images/chip_imagealignment_image.png) -N> The default value of ImageAlignment is [`Alignment.Start`]. +> Note: The default value of `ImageAlignment` is `Alignment.Start`. ## Command -The [`Command`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_Command) property associates a command with an instance of SfChip. This property is most often set with MVVM pattern to bind callbacks back into the ViewModel. +The [`Command`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_Command) property associates a command with an instance of `SfChip`. It is commonly used to bind callbacks to a ViewModel using the MVVM pattern. {% tabs %} @@ -633,15 +633,15 @@ public class CommandDemoViewModel : INotifyPropertyChanged ![SfChip with Command](images/customization-images/chip_command_image.png) -N> The default value of Command is [`null`]. +> Note: The default value of `Command` is `null`. ## Customization of SfChipGroup -The chip group supports to customize the chip's background color, border color, text color, and more. The chip group can be customized using the following properties: +The chip group supports customization of chip attributes such as background color, border color, text color, and more. These attributes can be customized using the following properties: ## InputView -The [`InputView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_InputView) property allows to provide a view to the input chip. In this example, the input chip is used to add an employee at run time. To get the employee name as input, an entry is added as InputView. +The [`InputView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_InputView) property allows providing a view to the input chip, enabling runtime addition of items. In this example, an `Entry` is added as `InputView` to input employee names. {% tabs %} @@ -686,7 +686,7 @@ chipGroup.SetBinding(SfChipGroup.ItemsSourceProperty, new Binding("Employees")); ![SfChipGroup with InputView](images/customization-images/chipgroup_inputview_image.png) -N> The InputView is visible only in the Input type. The default value of InputView is [`null`]. +> Note: The `InputView` is visible only in the `Input` type. The default value of `InputView` is `null`. ## ChipBackground diff --git a/MAUI/Chips/DataTemplateSelector.md b/MAUI/Chips/DataTemplateSelector.md index 164680cbe3..790f9ea8f9 100644 --- a/MAUI/Chips/DataTemplateSelector.md +++ b/MAUI/Chips/DataTemplateSelector.md @@ -1,7 +1,7 @@ --- layout: post -title: DataTemplateSelector in .NET MAUI Chips control | Syncfusion® -description: Learn about DataTemplateSelector support in Syncfusion® .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 control: Chips documentation: ug @@ -9,7 +9,7 @@ documentation: ug # DataTemplateSelector in .NET MAUI Chips -You can customize the appearance of each chip with different templates based on specific constraints using the `DataTemplateSelector`. +The `DataTemplateSelector` allows you to customize the appearance of each chip with different templates based on specific criteria. ## Create and initialize business models @@ -51,9 +51,9 @@ Define a simple model class ChipModel with fields Text, CanSelect, ImageSource, {% endtabs %} -### Create a data template selector +### Create a DataTemplateSelector -Create a custom class by inheriting `DataTemplateSelector`, and override the `OnSelectTemplate` method to return the `DataTemplate` for that item. At runtime, the SfChipGroup invokes the `OnSelectTemplate` method for each item and passes the data object as parameter. +Create a custom class by inheriting `DataTemplateSelector`, and override the `OnSelectTemplate` method to return the appropriate `DataTemplate` for each item. At runtime, the `SfChipGroup` invokes the `OnSelectTemplate` method for each item and passes the data object as a parameter. {% tabs %} {% highlight c# %} @@ -72,9 +72,9 @@ public class ChipDataTemplateSelector : DataTemplateSelector {% endhighlight %} {% endtabs %} -### Applying the data template selector +### Applying the DataTemplateSelector -Assign the already defined `DataTemplateSelector` to the [`ItemTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ItemTemplate) of the SfChipGroup in either XAML or C#. +Assign the created `DataTemplateSelector` to the [`ItemTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ItemTemplate) property of `SfChipGroup` in either XAML or C#. {% tabs %} {% highlight xaml %} @@ -119,4 +119,4 @@ this.Content = chipGroup; {% endhighlight %} {% endtabs %} -![DataTemplateSelector support for SfChipGroup in .NET MAUI](images\customization-images/datatemplateselector.png) +![DataTemplateSelector support for SfChipGroup in .NET MAUI](images/customization-images/datatemplateselector.png) diff --git a/MAUI/Chips/Events.md b/MAUI/Chips/Events.md index 972a169a6d..fdf246b314 100644 --- a/MAUI/Chips/Events.md +++ b/MAUI/Chips/Events.md @@ -1,7 +1,7 @@ --- layout: post -title: Events in .NET MAUI Chips control | Syncfusion® -description: Learn about Events support in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements and more. +title: Events in .NET MAUI Chips Control | Syncfusion® +description: Learn about event support in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements, and more. platform: maui control: Chips documentation: ug @@ -11,35 +11,35 @@ documentation: ug ## SelectionChanging Event -The [SelectionChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_SelectionChanging) event is triggered before the Chip is selected. You can restrict a chip from being selected, by canceling this event, by setting `Cancel` property in the event argument to true. The argument contains the following information, +The [SelectionChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_SelectionChanging) event is triggered before a chip is selected. You can prevent a chip from being selected by setting the `Cancel` property in the event arguments to `true`. The event arguments contain the following details: - * [AddedItem] - Used to get the selected chip from `SfChipGroup`. - * [RemovedItem] - Used to get the previous selected or deselected chip from `SfChipGroup`. - * [Cancel] - Used to set the value indicating whether the selection should be canceled. + * **AddedItem**: Retrieves the selected chip from `SfChipGroup`. + * **RemovedItem**: Retrieves the previously selected or deselected chip from `SfChipGroup`. + * **Cancel**: Indicates whether the selection should be canceled. ## SelectionChanged Event -The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_SelectionChanged) event triggered after a chip is selected. The argument contains the following information, +The [SelectionChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_SelectionChanged) event is triggered after a chip is selected. The event arguments contain the following details: - * [AddedItem] - Get the selected chip from `SfChipGroup`. - * [RemovedItem] - Get the previous selected or deselected chip from `SfChipGroup`. + * **AddedItem**: Retrieves the selected chip from `SfChipGroup`. + * **RemovedItem**: Retrieves the previously selected or deselected chip from `SfChipGroup`. -N> Currently, [`Choice`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipsType.html#Syncfusion_Maui_Core_SfChipsType_Choice) and [`Filter`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipsType.html#Syncfusion_Maui_Core_SfChipsType_Filter) types are only supported for `SelectionChanging` and `SelectionChanged` events. +> Note: Currently, [`Choice`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipsType.html#Syncfusion_Maui_Core_SfChipsType_Choice) and [`Filter`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipsType.html#Syncfusion_Maui_Core_SfChipsType_Filter) chip types support the `SelectionChanging` and `SelectionChanged` events. -## ChipClicked +## ChipClicked -The [`ChipClicked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ChipClicked) event is triggered when a chip clicked in the [SfChipGroup]. The event argument is type of `EventArgs`. +The [`ChipClicked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ChipClicked) event is triggered when a chip is clicked in the `SfChipGroup`. The event arguments are of type `EventArgs`. ## ItemRemoved Event -The [ItemRemoved](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ItemRemoved) event is triggered after the chip is removed from `SfChipGroup`. The argument contains the following information, +The [ItemRemoved](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ItemRemoved) event is triggered after a chip is removed from `SfChipGroup`. The event arguments contain the following detail: -* [RemovedItem] - Get the removed chip item from the `SfChipGroup`. +* **RemovedItem**: Retrieves the removed chip item from the `SfChipGroup`. -N> The [ItemRemoved] event is supported only in the `Input` type. +> Note: The `ItemRemoved` event is supported only in the `Input` chip type. -## CloseButtonClicked +## CloseButtonClicked -The `CloseButtonClicked` event is triggered when the closed button is clicked. The event argument is type of `EventArgs`. +The `CloseButtonClicked` event is triggered when the close button of a chip is clicked. The event arguments are of type `EventArgs`. {% tabs %} {% highlight xaml %} @@ -72,3 +72,4 @@ private async void SfChip_CloseButtonClicked(object sender, EventArgs e) {% endtabs %} + diff --git a/MAUI/Chips/Getting-Started.md b/MAUI/Chips/Getting-Started.md index 7ac1f845c1..27d0e91205 100644 --- a/MAUI/Chips/Getting-Started.md +++ b/MAUI/Chips/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with .NET MAUI Chips control | Syncfusion® -description: Learn here about getting started with Syncfusion® Essential Studio® .NET MAUI Chips control, its elements and more. +title: Getting Started with .NET MAUI Chips Control | Syncfusion® +description: Learn how to get started with Syncfusion® Essential Studio® .NET MAUI Chips control, its elements, and more. platform: maui control: Chips documentation: ug @@ -11,10 +11,9 @@ documentation: ug # Getting Started with .NET MAUI Chips -This section guides you through setting up and configuring a [Chips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html) in your .NET MAUI application. Follow the steps below to add a basic Chips to your project. - -To quickly get started with the .NET MAUI Chips, watch this video. +This section guides you through setting up and configuring a [Chips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html) control in your .NET MAUI application. Follow these steps to add a basic Chips control to your project. +Watch the video below to quickly get started with the .NET MAUI Chips. {% youtube "https://www.youtube.com/watch?v=hr4GmmvS9EE" %} {% tabcontents %} @@ -22,26 +21,26 @@ To quickly get started with the .NET MAUI Chips, watch this video. ## Prerequisites -Before proceeding, ensure the following are in place: +Before proceeding, ensure the following requirements are met: 1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). ## Step 1: Create a New 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**. +1. Go to **File > New > Project** and select the **.NET MAUI App** template. +2. Name the project, choose a location, and click **Next**. 3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer**, right-click the project and select **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. +3. Ensure all necessary dependencies are installed correctly and the project is restored. ## Step 3: Register the Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs file**, register the handler for Syncfusion® core. +[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) is a dependent package for all Syncfusion® .NET MAUI controls. Register the handler for the Syncfusion® core in the **MauiProgram.cs** file. {% highlight c# hl_lines="6 17" %} using Microsoft.Maui; diff --git a/MAUI/Chips/Migration.md b/MAUI/Chips/Migration.md index 56efe77f87..da3b5ed920 100644 --- a/MAUI/Chips/Migration.md +++ b/MAUI/Chips/Migration.md @@ -1,7 +1,7 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI Chips | Syncfusion® -description: Learn all about Migrating from Syncfusion® Xamarin Chips to Syncfusion® .NET MAUI Chips control and more here. +description: Learn how to migrate from Syncfusion® Xamarin Chips to Syncfusion® .NET MAUI Chips control and more here. platform: maui control: SfChips documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Migrating from Xamarin SfChips to .NET MAUI SfChips -To migrate easier from Xamarin SfChips to [.NET MAUI SfChips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html), we kept most of the APIs from Xamarin SfChips in MAUI SfChips. However, to maintain the consistency of API naming in MAUI SfChips, we renamed some of the APIs. The APIs changed in MAUI SfChips from Xamarin SfChips are detailed as follows: +To facilitate an easier migration from Xamarin SfChips to [.NET MAUI SfChips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html), most of the APIs from Xamarin SfChips have been retained in MAUI SfChips. However, for consistency in API naming within MAUI SfChips, some APIs have been renamed. Below are the API changes in MAUI SfChips from Xamarin SfChips: ## Namespaces @@ -94,3 +94,4 @@ To migrate easier from Xamarin SfChips to [.NET MAUI SfChips](https://help.syncf + diff --git a/MAUI/Chips/Overview.md b/MAUI/Chips/Overview.md index dce9acf01f..4cf1f01980 100644 --- a/MAUI/Chips/Overview.md +++ b/MAUI/Chips/Overview.md @@ -2,21 +2,21 @@ layout: post title: Overview | .NET MAUI Chips | Syncfusion® platform: maui -description: Learn here about overall key features in Essential Studio® for .NET MAUI SfChip Control, its elements, and more. +description: Learn about the key features in Essential Studio® for .NET MAUI SfChip Control, its elements, and more. control: SfChip --- -> **Notice**: After **Volume 1 2025 (Mid of March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition refer this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +> **Notice**: As of **Volume 1 2025 (mid-March 2025)**, updates, bug fixes, and feature enhancements for this control will no longer be available in the Syncfusion® package. Please switch to the **Syncfusion® Toolkit for .NET MAUI** for continued support. For a smooth transition, refer to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). -# Overview in .NET MAUI Chips +# Overview of .NET MAUI Chips -The [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) control is a versatile and feature-rich component that allows you to present information in an interactive and customizable layout. It enables you to arrange multiple chips in a layout and group them, making a selection and interaction seamless. +The [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) control is a versatile and feature-rich component that enables the presentation of information in an interactive and customizable layout. It allows multiple chips to be arranged within a layout and grouped, facilitating seamless selection and interaction. -## Key features +## Key Features -* Choose from various layout options such as stack, flex, and more to arrange the chips according to your needs. -* Convert text into compact chips, providing a concise way to display information. -* Customize the appearance of the chips by adding a background image. -* Easily modify the text color, background color, border color, border thickness, and selection color of the MAUI Chips, ensuring a cohesive and visually appealing design. +* Choose from various layout options, such as stack, flex, and others, to arrange the chips according to your specifications. +* Transform text into compact chips, offering a concise way to display information. +* Customize the appearance of chips by adding background images. +* Easily adjust the text color, background color, border color, border thickness, and selection color of the MAUI Chips to ensure a cohesive and aesthetically pleasing design. ![NET MAUI Chip](images/overview/maui_chip.png) diff --git a/MAUI/Chips/Populating-Items.md b/MAUI/Chips/Populating-Items.md index e72f5cb450..384b71814c 100644 --- a/MAUI/Chips/Populating-Items.md +++ b/MAUI/Chips/Populating-Items.md @@ -1,7 +1,7 @@ --- layout: post -title: Populating Items in .NET MAUI Chips control | Syncfusion® -description: Learn about Populating Items support in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements and more. +title: Populating Items in .NET MAUI Chips Control | Syncfusion® +description: Learn about populating items in Syncfusion® Essential Studio® .NET MAUI Chips control, its elements, and more. platform: maui control: Chips documentation: ug @@ -9,16 +9,15 @@ documentation: ug # Populating Items in .NET MAUI Chips -[.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) can be populated with either business objects and SfChip. This section explain how to populate the chips control with business objects and SfChip. +The [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) control can be populated with either business objects or `SfChip` instances. This section explains how to populate the chips control with both business objects and `SfChip`. -## Populating business objects as items +## Populating Business Objects as Items -Business objects can be populated in Chips using the [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ItemsSource) property. -Refer to this `documentation` to know more details about populating the chips control with list of employee details. +Business objects can be populated in Chips using the [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_ItemsSource) property. Refer to this [documentation](https://help.syncfusion.com/maui/Syncfusion.Maui.Core.SfChipGroup.html) for more details on populating the chips control with a list of employee details. -## Populating SfChip as items +## Populating SfChip as Items -Chips control also provides support to create and set [`SfChip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html) as item. It can be achieved using the [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_Items) property. +The Chips control also supports creating and setting [`SfChip`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html) as an item. This can be achieved using the [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChipGroup.html#Syncfusion_Maui_Core_SfChipGroup_Items) property. {% tabs %} diff --git a/MAUI/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md b/MAUI/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md index b515a9c994..6363289c09 100644 --- a/MAUI/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md +++ b/MAUI/Chips/how-to/Applying-fonticon-to-Syncfusion-chip-control.md @@ -1,17 +1,17 @@ --- layout: post -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 +title: How to Apply a Font Icon to the Syncfusion® Chip Control | .NET MAUI +description: Learn how to apply a font icon to the SfChip and explore its customization options along with basic features in .NET MAUI. platform: maui control: Chips documentation: ug --- -# Setting the FontIcon to SfChip +# Setting the FontIcon for SfChip -SfChip is supported to display the font icon by setting [`FontImageSource`] to its [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ImageSource) property with following below steps. +The SfChip supports displaying a font icon by setting a [`FontImageSource`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.fontimagesource) to its [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html#Syncfusion_Maui_Core_SfChip_ImageSource) property. Follow the steps below. -Create the instance for `FontImageSource` and set to `ImageSource` property of SfChip as shown in the below code snippet. +Create an instance of `FontImageSource` and set it to the `ImageSource` property of SfChip as shown in the code snippet below. {% tabs %} diff --git a/MAUI/Rotator/Adding-Looping-and-Delays.md b/MAUI/Rotator/Adding-Looping-and-Delays.md index b87ccb82bf..1ccd695561 100644 --- a/MAUI/Rotator/Adding-Looping-and-Delays.md +++ b/MAUI/Rotator/Adding-Looping-and-Delays.md @@ -1,7 +1,7 @@ --- layout: post title: Adding Looping and Delays in .NET MAUI Rotator control | Syncfusion® -description: Learn about Adding Looping and Delay support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more. +description: Learn how to add Looping and Delay support in the Syncfusion® .NET MAUI Rotator (SfRotator) control. platform: maui control: Rotator documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Adding Looping and Delays in .NET MAUI Rotator (SfRotator) -Looping and delay can be enabled in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) control in .NET MAUI. +Enable looping and delays in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) control for .NET MAUI. ## Enable AutoPlay -The [`EnableAutoPlay`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_EnableAutoPlay) property specifies whether the items should navigate automatically based on the [`NavigationDelay`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_NavigationDelay) property when the property value is set to true. +The [`EnableAutoPlay`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_EnableAutoPlay) property determines if items should automatically navigate based on the [`NavigationDelay`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_NavigationDelay) property. By default, this property is set to `false`. N> By default, the property value is set to false. @@ -374,3 +374,4 @@ namespace Rotator {% endhighlight %} {% endtabs %} + diff --git a/MAUI/Rotator/DataTemplateSelector.md b/MAUI/Rotator/DataTemplateSelector.md index 10f61421dd..2d8d2754ba 100644 --- a/MAUI/Rotator/DataTemplateSelector.md +++ b/MAUI/Rotator/DataTemplateSelector.md @@ -1,7 +1,7 @@ --- layout: post title: DataTemplateSelector in .NET MAUI Rotator control | Syncfusion® -description: Learn about DataTemplateSelector support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more. +description: Learn about DataTemplateSelector support in the Syncfusion® .NET MAUI Rotator (SfRotator) control and more. platform: maui control: Rotator documentation: ug @@ -9,7 +9,7 @@ documentation: ug # DataTemplateSelector in .NET MAUI Rotator (SfRotator) -The [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) supports DataTemplateSelector, from which you can choose a DataTemplate based on the data object. +The [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) supports `DataTemplateSelector`, allowing you to choose a `DataTemplate` based on the data object. {% tabs %} @@ -140,4 +140,4 @@ The following screenshot illustrates the output of above code. ![DataTemplateSelector](images/DataTemplateSelector.png) -Find the complete DataTemplateSelector sample from this [link.](https://github.com/SyncfusionExamples/data-template-selector-rotator/tree/main/DataTemplateSelectorSample) \ No newline at end of file +Find the complete DataTemplateSelector sample from this [link.](https://github.com/SyncfusionExamples/data-template-selector-rotator/tree/main/DataTemplateSelectorSample) diff --git a/MAUI/Rotator/Events.md b/MAUI/Rotator/Events.md index 2199074435..91c00df176 100644 --- a/MAUI/Rotator/Events.md +++ b/MAUI/Rotator/Events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in .NET MAUI Rotator control | Syncfusion® -description: Learn about Events support in Syncfusion® .NET MAUI Rotator (SfRotator) control, its elements, and more. +description: Learn about Events support in the Syncfusion® .NET MAUI Rotator (SfRotator) control, its elements, and more. platform: maui control: Rotator documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Selected Index Changed Event -The SelectedIndexChanged event is used to notify when the selection is changed by swiping or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_SelectedIndex) property of the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1). +The `SelectedIndexChanged` event notifies you when the selection changes, either by swiping or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_SelectedIndex) property of the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1). {% tabs %} @@ -125,11 +125,11 @@ namespace Rotator {% endtabs %} -![Rotator_SelectedIndexChanged](images/SelectedIndexChanged.png) +![Rotator_SelectedIndexChanged event](images/SelectedIndexChanged.png) ## Item Tapped Event -The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_ItemTapped) event will be triggered whenever tapping the item. +The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_ItemTapped) event is triggered when an item is tapped. {% tabs %} diff --git a/MAUI/Rotator/Getting-started.md b/MAUI/Rotator/Getting-started.md index 4983f32189..331b6d2e3a 100644 --- a/MAUI/Rotator/Getting-started.md +++ b/MAUI/Rotator/Getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with .NET MAUI Rotator control | Syncfusion® -description: Learn here about getting started with Syncfusion® .NET MAUI Rotator (SfRotator) control, its elements and more. +description: Learn about getting started with the Syncfusion® .NET MAUI Rotator (SfRotator) control, its elements, and more. platform: maui control: Rotator documentation: ug @@ -20,26 +20,25 @@ To quickly get started with the .NET MAUI Rotator, watch this video. ## Prerequisites -Before proceeding, ensure the following are in place: - -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +Ensure the following prerequisites are in place before proceeding: +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or a later version. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later). ## Step 1: Create a New 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**. +2. Name the project, choose a location, and click **Next**. +3. Select the desired .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Rotator NuGet Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer**, right-click the project and select **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Rotator](https://www.nuget.org/packages/Syncfusion.Maui.Rotator) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. +3. Ensure all dependencies are properly installed, and the project is restored successfully. ## Step 3: Register the Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the **MauiProgram.cs file**, register the handler for Syncfusion® core. +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) package is required for all Syncfusion® .NET MAUI controls. In **MauiProgram.cs**, register the handler for Syncfusion® Core. {% highlight c# hl_lines="6 17" %} diff --git a/MAUI/Rotator/Header-Visibility.md b/MAUI/Rotator/Header-Visibility.md index abb69fd46c..512c4d7e4c 100644 --- a/MAUI/Rotator/Header-Visibility.md +++ b/MAUI/Rotator/Header-Visibility.md @@ -1,7 +1,7 @@ --- layout: post title: Header Visibility in .NET MAUI Rotator control | Syncfusion® -description: Learn about the Header Visibility support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more. +description: Learn about the Header Visibility support in the Syncfusion® .NET MAUI Rotator (SfRotator) control and more. platform: maui control: Rotator documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Header Visibility in .NET MAUI Rotator (SfRotator) -The [`IsTextVisible`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_IsTextVisible) property can be used to enable the text area visibility in the bottom area of the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) for providing additional information of items. The [`IsTextVisible`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_IsTextVisible) property is used to change the visibility of the Text panel that is displayed when the [`SfRotatorItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotatorItem.html) collection is set and will have no effect when setting the Item template. +The [`IsTextVisible`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_IsTextVisible) property can be used to enable text visibility in the bottom area of the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) to provide additional information about items. The `IsTextVisible` property is utilized to change the visibility of the text pane when the [`SfRotatorItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotatorItem.html) collection is set. It has no effect when setting the ItemTemplate. -N> By default, the property value is false. +> **Note**: By default, the property value is `false`. {% tabs %} diff --git a/MAUI/Rotator/Loading-Online-Images.md b/MAUI/Rotator/Loading-Online-Images.md index 02e0aba6f7..1556bb7ae6 100644 --- a/MAUI/Rotator/Loading-Online-Images.md +++ b/MAUI/Rotator/Loading-Online-Images.md @@ -1,7 +1,7 @@ --- layout: post title: Loading Online Images in .NET MAUI Rotator control | Syncfusion® -description: Learn about Loading Online Images support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more. +description: Learn about how to load Online Images in the Syncfusion® .NET MAUI Rotator (SfRotator) control. platform: maui control: Rotator documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Loading Online Images in .NET MAUI Rotator (SfRotator) -This section describes loading the online images in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) Control. +This section describes how to load online images in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) control. {% tabs %} {% highlight xaml %} diff --git a/MAUI/Rotator/Migration.md b/MAUI/Rotator/Migration.md index c19073a268..2340073f43 100644 --- a/MAUI/Rotator/Migration.md +++ b/MAUI/Rotator/Migration.md @@ -1,7 +1,7 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI Rotator | Syncfusion® -description: Learn about Migrating from Syncfusion® Xamarin Rotator to Syncfusion® .NET MAUI Rotator control and more. +description: Learn about migrating from the Syncfusion® Xamarin Rotator to the Syncfusion® .NET MAUI Rotator control and more. platform: maui control: Rotator documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Migrating from Xamarin Rotator to .NET MAUI Rotator -To migrate easily from [`Xamarin SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) to [`.NET MAUI SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1), we kept all the APIs from Xamarin SfRotator in MAUI SfRotator. However, to maintain the consistency of API naming in MAUI SfRotator, we renamed some of the APIs. The APIs that have been changed in MAUI SfRotator from Xamarin SfRotator are detailed as follows. +Transitioning from the [`Xamarin SfRotator`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRotator.XForms.SfRotator.html) to the [`.NET MAUI SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) is streamlined, as all APIs from Xamarin SfRotator have been retained in the MAUI SfRotator. However, to ensure consistency in API naming conventions, some APIs have been renamed. Below are the details of these changes in the MAUI SfRotator compared to the Xamarin SfRotator. ## Namespaces @@ -34,4 +34,4 @@ To migrate easily from [`Xamarin SfRotator`](https://help.syncfusion.com/cr/xama DotsStroke Gets or sets the value of DotsStroke. - \ No newline at end of file + diff --git a/MAUI/Rotator/Navigation-Customization.md b/MAUI/Rotator/Navigation-Customization.md index f853225865..765e38ab88 100644 --- a/MAUI/Rotator/Navigation-Customization.md +++ b/MAUI/Rotator/Navigation-Customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Dots Customization in .NET MAUI Rotator control | Syncfusion® -description: Learn about Navigation Customization support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more. +title: Navigation Customization in .NET MAUI Rotator control | Syncfusion® +description: Learn about navigation customization support in the Syncfusion® .NET MAUI Rotator (SfRotator) control. platform: maui control: Rotator documentation: ug @@ -9,15 +9,14 @@ documentation: ug # Navigation Customization in .NET MAUI Rotator (SfRotator) -The Rotator control supports customizing dots, thumbnails and navigation buttons. +The Rotator control supports customizing dots, thumbnails, and navigation buttons to enhance the user interface. ## Dots Customization -In Dot Customization we can customise the dots' stroke, selected and unselected dots' color. +You can customize the dots' stroke, as well as the colors for selected and unselected dots. +### Dots Stroke Color -### DotsStroke Color - -The [`DotsStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_DotsStroke) property is used to customize the color of the dots stroke in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1). +Use the [`DotsStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_DotsStroke) property to customize the color of the dot strokes in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1). {% tabs %} {% highlight xaml %} @@ -100,7 +99,7 @@ rotator.UnselectedDotColor = Color.Gray; ## Thumbnails Customization -In Thumbnail Customization we can customise the selected and unselected thumbnail's stroke. +Customize the strokes of selected and unselected thumbnails. ### Selected Thumbnail Stroke @@ -130,7 +129,7 @@ rotator.SelectedThumbnailStroke = Colors.Green; ![SfRotator with selected thumbnail stroke](images/SelectedThumbnailStroke.png) -### UnSelected Thumbnail Stroke +### Unselected Thumbnail Stroke The [`UnSelectedThumbnailStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_UnselectedThumbnailStroke) property is used to customize the color of the unselected thumbnails stroke in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1). @@ -162,8 +161,7 @@ rotator.UnSelectedThumbnailStroke = Colors.Red; ## Navigation Button Customization -In Navigation Button Customization we can customise the navigation button's icon and Background color. - +Customize the icon and background color of navigation buttons. ### Navigation Button Icon Color The [`NavigationButtonIconColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_NavigationButtonIconColor) property is used to customize the color of the navigation buttons icon in the [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1). @@ -189,7 +187,7 @@ rotator.NavigationButtonIconColor = Colors.Blue; {% endhighlight %} {% endtabs %} -![SfRotator with navigation button icon Color](images/NavigationButtonIconColor.png) +![SfRotator with navigation button icon color](images/NavigationButtonIconColor.png) ### Navigation Button Background Color @@ -218,11 +216,11 @@ rotator.NavigationButtonIconColor = Colors.Blue; {% endhighlight %} {% endtabs %} -![SfRotator with navigation button Background Color](images/NavigationButtonBackgroundColor.png) +![SfRotator with navigation button background color](images/NavigationButtonBackgroundColor.png) ## Navigation Visibility -We can show or hide Navigation Button using [`ShowNavigationButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_ShowNavigationButton) property. +Show or hide the navigation buttons using the [`ShowNavigationButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_ShowNavigationButton) property. {% tabs %} {% highlight xaml %} @@ -244,5 +242,4 @@ rotator.ShowNavigationButton = false; {% endhighlight %} {% endtabs %} -![SfRotator with ShowNavigationButton property](images/ShowNavigationButton.png) - +![SfRotator with Show Navigation Button property](images/ShowNavigationButton.png) diff --git a/MAUI/Rotator/Navigation-Modes.md b/MAUI/Rotator/Navigation-Modes.md index 6ba36a29b0..9e9af6def0 100644 --- a/MAUI/Rotator/Navigation-Modes.md +++ b/MAUI/Rotator/Navigation-Modes.md @@ -2,7 +2,7 @@ layout: post title: Navigation Modes in .NET MAUI Rotator control | Syncfusion® -description: Learn about the Navigation Modes support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more +description: Learn about the support for Navigation Modes in Syncfusion® .NET MAUI Rotator (SfRotator) control and more platform: maui control: Rotator documentation: ug @@ -11,11 +11,11 @@ documentation: ug # Navigation Modes in .NET MAUI Rotator (SfRotator) -The [`NavigationStripMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_NavigationStripMode) property specifies the appearance of navigation bar items. The image data can be selected either by [`Thumbnail`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator_NavigationStripMode_Thumbnail) or by [`Dots`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator_NavigationStripMode_Dots) navigation modes. +The [`NavigationStripMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html#Syncfusion_Maui_Rotator_SfRotator_NavigationStripMode) property specifies the appearance of navigation bar items. Image data can be selected using either [`Thumbnail`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator.NavigationStripMode_Thumbnail) or [`Dots`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator.NavigationStripMode_Dots) navigation modes. ## Thumbnail -The slider items will also be loaded in the thumbnail view. When a thumbnail item is clicked, the slider will switch to the corresponding image data. +Slider items are loaded in the thumbnail view. Clicking on a thumbnail item will switch the slider to the corresponding image data. {% tabs %} diff --git a/MAUI/Rotator/Overview.md b/MAUI/Rotator/Overview.md index 14bccde731..a982e5cd4b 100644 --- a/MAUI/Rotator/Overview.md +++ b/MAUI/Rotator/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About .NET MAUI Rotator control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Rotator (SfRotator) control, its elements and more. +description: Learn about the Syncfusion® .NET MAUI Rotator (SfRotator) control, its elements, and more. platform: maui control: Rotator documentation: ug @@ -9,12 +9,12 @@ documentation: ug # .NET MAUI Rotator (SfRotator) Overview -The Rotator is a data control used to display image data and navigate through them. The images can be selected either by [`Thumbnail`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator_NavigationStripMode_Thumbnail) or by [`Dots`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator_NavigationStripMode_Dots) support. +The Rotator is a data control used to display image data and navigate through them. Images can be selected using either the [`Thumbnail`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator_NavigationStripMode_Thumbnail) or [`Dots`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationStripMode.html#Syncfusion_Maui_Core_Rotator_NavigationStripMode_Dots) support. ![Rotator Overview Image](images/RotatorOverview.png) -## Key features +## Key Features -* `Modes` - Options to navigate data using dots or thumbnail navigation modes. -* `Position` - Support to decide the placement position of dots or thumbnail items in any of the four sides. -* `Autoplay and Items Looping` - Options for auto playing items and navigate items in loop. \ No newline at end of file +- **Modes**: Options to navigate data using dots or thumbnail navigation modes. +- **Position**: Support to decide the placement position of dots or thumbnail items on any of the four sides. +- **Autoplay and Items Looping**: Options for autoplaying items and navigating items in a loop. diff --git a/MAUI/Rotator/Placement-Modes.md b/MAUI/Rotator/Placement-Modes.md index 3918144b22..2498546ccb 100644 --- a/MAUI/Rotator/Placement-Modes.md +++ b/MAUI/Rotator/Placement-Modes.md @@ -9,15 +9,15 @@ documentation: ug # Placement Modes in .NET MAUI Rotator (SfRotator) -By default, the rotator control displays the dots of each rotator item. It can be changed to any of the following types: +By default, the rotator control displays navigation dots for each item. This can be customized to any of the following types: -* [`Default`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.DotsPlacement.html#Syncfusion_Maui_Core_Rotator_DotsPlacement_Default) - Shows dots for each item in the .NET MAUI Rotator (SfRotator) by default. -* [`None`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.DotsPlacement.html#Syncfusion_Maui_Core_Rotator_DotsPlacement_None)- Hides the dots, creating a clean appearance with no navigation indicators. -* [`Outside`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.DotsPlacement.html#Syncfusion_Maui_Core_Rotator_DotsPlacement_OutSide) - Puts the dots around the rotator, offering a different style for navigation. +- [`Default`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.DotsPlacement.html#Syncfusion_Maui_Core_Rotator_DotsPlacement_Default): Displays dots for each item in the .NET MAUI Rotator (SfRotator) by default. +- [`None`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.DotsPlacement.html#Syncfusion_Maui_Core_Rotator_DotsPlacement_None): Hides the dots to create a clean appearance without navigation indicators. +- [`Outside`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.DotsPlacement.html#Syncfusion_Maui_Core_Rotator_DotsPlacement_Outside): Positions dots around the rotator, offering a different navigation style. ## DotsPlacement -The Display Type of Rotator can be modified using the `DotsPlacement` Mode. The `“None”` type can be used when the dots are not needed for the rotator control. +The display type of the Rotator control can be modified using the `DotsPlacement` property. You can use the `None` type when navigation dots are not needed for the rotator control. {% tabs %} diff --git a/MAUI/Rotator/Populating-Data.md b/MAUI/Rotator/Populating-Data.md index a7bf6158cf..77ae9c55df 100644 --- a/MAUI/Rotator/Populating-Data.md +++ b/MAUI/Rotator/Populating-Data.md @@ -1,23 +1,23 @@ --- -layout : post +layout: post title: Populating Data in .NET MAUI Rotator control | Syncfusion® -description: Learn about the Populating Data support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more.. -platform : maui -control : Rotator -documentation : ug +description: Learn about data population support in Syncfusion® .NET MAUI Rotator (SfRotator) control and more. +platform: maui +control: Rotator +documentation: ug --- # Populating Data in .NET MAUI Rotator (SfRotator) -The [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) control supports binding to different data sources such as IList Data Source and Observable Collection Data Source. +The [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) control supports binding to different data sources such as `IList` and `ObservableCollection`. ## Through Binding -This section explains about setting Item Source and applying custom template to the data. +This section explains setting the `ItemSource` and applying a custom template to the data in the rotator. ### Create a Model with Data -The [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1)items can be populated with a collection of image data. Assign a collection to it. Collections include arrays, Lists, and DataTables. For example, you may want to create a Rotator model with an Image as follows. +The [`SfRotator`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Rotator.SfRotator.html?tabs=tabid-1) items can be populated with a collection of image data. Assign a collection to it, which can include arrays, lists, and DataTables. {% tabs %} diff --git a/MAUI/Rotator/Sliding-Direction.md b/MAUI/Rotator/Sliding-Direction.md index 0db28d9259..84553b30ad 100644 --- a/MAUI/Rotator/Sliding-Direction.md +++ b/MAUI/Rotator/Sliding-Direction.md @@ -9,14 +9,14 @@ documentation: ug # Sliding Direction in .NET MAUI Rotator (SfRotator) -There are Six available positions, +There are six available positions: -* [`Horizontal`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_Horizontal) - Rotator Items can be navigated in horizontal direction. -* [`Vertical`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_Vertical) - Rotator Items can be navigated in vertical direction. -* [`LeftToRight`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_LeftToRight) - Rotator items can be navigate from Left to Right only. -* [`RightToLeft`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_RightToLeft) - Rotator items can be navigate from Right to Left only. -* [`TopToBottom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_TopToBottom) - Rotator items can be navigate from Top to Bottom only. -* [`BottomToTop`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_BottomToTop) - Rotator items can be navigate from Bottom to Top only. +* [`Horizontal`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_Horizontal) - Navigate rotator items in the horizontal direction. +* [`Vertical`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_Vertical) - Navigate rotator items in the vertical direction. +* [`LeftToRight`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_LeftToRight) - Navigate rotator items from left to right only. +* [`RightToLeft`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_RightToLeft) - Navigate rotator items from right to left only. +* [`TopToBottom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_TopToBottom) - Navigate rotator items from top to bottom only. +* [`BottomToTop`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.Rotator.NavigationDirection.html#Syncfusion_Maui_Core_Rotator_NavigationDirection_BottomToTop) - Navigate rotator items from bottom to top only. {% tabs %} diff --git a/MAUI/SignaturePad/getting-started.md b/MAUI/SignaturePad/getting-started.md index 2fdf1c3371..a4b79f93ba 100644 --- a/MAUI/SignaturePad/getting-started.md +++ b/MAUI/SignaturePad/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with .NET MAUI SignaturePad control | Syncfusion® +title: Getting Started with .NET MAUI SignaturePad Control | Syncfusion® description: Learn here about getting started with .NET MAUI SignaturePad (SfSignaturePad) control, its elements, and more. platform: maui control: SfSignaturePad @@ -20,26 +20,26 @@ To quickly get started with the .NET MAUI SignaturePad, watch this video. ## Prerequisites -Before proceeding, ensure the following are in place: +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. 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**. +1. Navigate to **File > New > Project** and select the **.NET MAUI App** template. +2. Name your project, choose a location, and click **Next**. +3. Select the desired .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI SignaturePad NuGet Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer**, right-click your project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.SignaturePad](https://www.nuget.org/packages/Syncfusion.Maui.SignaturePad) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. +3. Ensure all necessary dependencies are installed correctly, and restore the project if needed. -## Step 3: Register the handler +## Step 3: Register the Handler - [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion® core. +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) package is a dependency for all Syncfusion® controls in .NET MAUI. Register the core handler in your `MauiProgram.cs`. {% highlight c# hl_lines="1 12" %} using Syncfusion.Maui.Core.Hosting; @@ -108,31 +108,30 @@ namespace SignaturePadGettingStarted ## Prerequisites -Before proceeding, ensure the following are set up: +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. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 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) +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 press Enter. +1. Open the Command Palette (`Ctrl+Shift+P`), type **.NET: New Project**, and press **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** +3. Select the project location, name your project, and press **Enter**. +4. Click **Create Project**. ## Step 2: Install the Syncfusion® MAUI SignaturePad NuGet Package -1. Press Ctrl + ` (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.SignaturePad` to install the Syncfusion® .NET MAUI SignaturePad package. -4. To ensure all dependencies are installed, run `dotnet restore`. +1. Press Ctrl + ` to open the terminal in Visual Studio Code. +2. Ensure you're in the project root directory where your `.csproj` file is located. +3. Run `dotnet add package Syncfusion.Maui.SignaturePad` to install the package. +4. Run `dotnet restore` to verify all dependencies are installed. -## Step 3: Register the handler +## Step 3: Register the Handler - [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion® core. - -{% highlight c# hl_lines="1 12" %} +Register the Syncfusion core handler in `MauiProgram.cs`. +{% highlight csharp hl_lines="1 12" %} using Syncfusion.Maui.Core.Hosting; namespace SignaturePadGettingStarted @@ -159,7 +158,7 @@ namespace SignaturePadGettingStarted ## Step 4: Add a Basic SignaturePad -Import the [SfSignaturePad](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html) namespace and initialize the SignaturePad as shown below. +Import the [SfSignaturePad](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html) namespace. {% tabs %} @@ -201,29 +200,28 @@ namespace SignaturePadGettingStarted ## Prerequisites -Before proceeding, ensure the following are set up: +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) +1. Latest version of JetBrains Rider. +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0). +3. Ensure MAUI workloads are installed as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## 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. +1. Go to **File > New Solution**, select .NET (C#), and choose the .NET MAUI App template. +2. Define the project name, solution name, and location. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI SignaturePad NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. Right-click the project in **Solution Explorer** and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.SignaturePad](https://www.nuget.org/packages/Syncfusion.Maui.SignaturePad/) 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 +3. Ensure all necessary dependencies are installed and restore the project if needed. - [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion® core. +## Step 3: Register the Handler -{% highlight c# hl_lines="1 12" %} +Register the Syncfusion core handler as outlined earlier. +{% highlight csharp hl_lines="1 12" %} using Syncfusion.Maui.Core.Hosting; namespace SignaturePadGettingStarted @@ -250,7 +248,7 @@ namespace SignaturePadGettingStarted ## Step 4: Add a Basic SignaturePad -Import the [SfSignaturePad](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html) namespace and initialize the SignaturePad as shown below. +Import the [SfSignaturePad](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html) namespace and initialize the SignaturePad. {% tabs %} @@ -291,9 +289,9 @@ namespace SignaturePadGettingStarted ![SignaturePad default](images/getting-started/default.png) -## Customize signature stroke color +## Customize Signature Stroke Color -Customize the stroke color of the SignaturePad control by using the [StrokeColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_StrokeColor) property. The default stroke color is **Colors.Black**. +You can customize the stroke color of the SignaturePad using the [StrokeColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_StrokeColor) property. By default, the stroke color is **Colors.Black**. {% tabs %} @@ -314,10 +312,9 @@ signaturePad.StrokeColor = Colors.Red; ![SignaturePad stroke color](images/getting-started/stroke-color.png) -## Customize signature stroke thickness - -The thickness of the stroke drawn can be customized by setting the [MinimumStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_MinimumStrokeThickness) and [MaximumStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_MaximumStrokeThickness) properties. The [MinimumStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_MinimumStrokeThickness) defines the minimum thickness of the stroke and the [MaximumStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_MaximumStrokeThickness) defines the maximum thickness of the stroke that can be drawn based on the speed and impression we provide through gesture within its minimum and maximum stroke thickness ranges. So that the signature will be more realistic. +## Customize Signature Stroke Thickness +The stroke thickness can be customized with the [MinimumStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_MinimumStrokeThickness) and [MaximumStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_MaximumStrokeThickness) properties. {% tabs %} {% highlight xaml %} @@ -341,9 +338,9 @@ SfSignaturePad signaturePad = new SfSignaturePad() ![SignaturePad stroke thickness](images/getting-started/stroke-thickness.png) -## Saving the signature as an image +## Saving the Signature as an Image -Save the signature drawn in the SignaturePad as an [ImageSource](https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.imagesource?view=xamarin-forms) using the [ToImageSource()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_ToImageSource) method which can further be synchronized with your devices and documents that need your signature. +Save the signature drawn in the SignaturePad as an [ImageSource](https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.imagesource?view=xamarin-forms) using the [ToImageSource()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_ToImageSource) method. {% tabs %} @@ -371,9 +368,9 @@ private void OnSaveButtonClicked(object? sender, EventArgs e) {% endtabs %} -## Clear the existing signature in SignaturePad +## Clear the Existing Signature in SignaturePad -Clear the signature drawn in the SignaturePad using the [Clear()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_Clear) method as shown in the code snippet below: +Clear the drawn signature using the [Clear()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_Clear) method. {% tabs %} @@ -431,7 +428,7 @@ private void OnDrawStarted(object? sender, CancelEventArgs e) ### DrawCompleted -This event will be triggered when we complete the drawing in the SignaturePad. +This event is triggered when drawing is completed. {% tabs %} diff --git a/MAUI/SignaturePad/migration.md b/MAUI/SignaturePad/migration.md index cdf7f1bd98..4252a2d25c 100644 --- a/MAUI/SignaturePad/migration.md +++ b/MAUI/SignaturePad/migration.md @@ -9,7 +9,7 @@ documentation: ug # Migrate from Xamarin.Forms SfSignaturePad to .NET MAUI SfSignaturePad -To migrate from the [Xamarin SignaturePad](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.SignaturePad.SfSignaturePad.html) to [.NET MAUI SignaturePad](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html) easier, most of the APIs from the Xamarin SfSignaturePad were kept in the .NET MAUI SfSignaturePad. However, to maintain the consistency of API naming in the.NET MAUI SfSignaturePad, some of the APIs have been renamed. Please find the difference in the following topics. +This guide helps you migrate from the [Xamarin SignaturePad](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.SignaturePad.SfSignaturePad.html) to the [.NET MAUI SignaturePad](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html). To ease this transition, most APIs from Xamarin SfSignaturePad are retained in the .NET MAUI SfSignaturePad. However, to maintain consistency in API naming for .NET MAUI SfSignaturePad, some APIs have been renamed. The differences are highlighted in the sections below. ## Namespaces @@ -75,4 +75,4 @@ To migrate from the [Xamarin SignaturePad](https://help.syncfusion.com/cr/xamari {{'[StrokeCompleted](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.SignaturePad.SfSignaturePad.html#Syncfusion_XForms_SignaturePad_SfSignaturePad_StrokeCompleted)'| markdownify }} {{'[DrawCompleted](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SignaturePad.SfSignaturePad.html#Syncfusion_Maui_SignaturePad_SfSignaturePad_DrawCompleted)'| markdownify }} Occurs when the drawing is completed in the SfSignaturePad. - \ No newline at end of file + diff --git a/MAUI/SignaturePad/overview.md b/MAUI/SignaturePad/overview.md index 3ed8bd39b8..fbbcb7089e 100644 --- a/MAUI/SignaturePad/overview.md +++ b/MAUI/SignaturePad/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: .NET MAUI SignaturePad control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI SignaturePad (SfSignaturePad) widget, its features, and more. +title: .NET MAUI SignaturePad Control | Syncfusion® +description: Learn about the introduction of Syncfusion® .NET MAUI SignaturePad (SfSignaturePad) widget, its features, and more. platform: maui control: SfSignaturePad documentation: ug @@ -9,12 +9,11 @@ documentation: ug # .NET MAUI SignaturePad (SfSignaturePad) Overview -The .NET MAUI SignaturePad ([`SfSignaturePad`](https://www.syncfusion.com/maui-controls/maui-signaturepad)) is an interactive UI control, allowing users to capture smooth and realistic signatures. It also allows you to save signatures as images and synchronize them across devices and documents that need signatures. You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this SignaturePad control. +The .NET MAUI SignaturePad ([`SfSignaturePad`](https://www.syncfusion.com/maui-controls/maui-signaturepad)) is an interactive UI control that allows users to capture smooth and realistic signatures. This control also enables saving signatures as images, which can be synchronized across various devices and documents requiring signatures. Users can draw their own signature using a finger, pen, or mouse on tablets, touchscreens, etc., directly within the SignaturePad control. -## Key features - -* **Signature stroke color customization** - Allows you to set the stroke color for the signatures. -* **Signature stroke thickness customization** - Allows you to set the minimum and maximum stroke thickness for the signatures. -* **Save as image** - Provides the option to save the drawn signature as an image. This converted image can be embedded in documents, PDFs, and anything else that supports using images to denote a signature. -* **More realistic handwritten look and feel** - The unique stroke rendering algorithm draws a signature based on the speed of the drawn gestures along minimum and maximum stroke thicknesses, which brings a more realistic, handwritten look and feel to the signature. +## Key Features +* **Signature Stroke Color Customization** - Enables customization of the stroke color for signatures. +* **Signature Stroke Thickness Customization** - Allows setting the minimum and maximum stroke thickness for signatures. +* **Save as Image** - Provides options to save the drawn signature as an image. This converted image can then be embedded in documents, PDFs, and various platforms that use images to denote a signature. +* **Realistic Handwritten Look and Feel** - Utilizes a unique stroke rendering algorithm that adapts to the speed of drawn gestures, along with minimum and maximum stroke thickness settings, to deliver a more realistic, handwritten appearance to signatures. diff --git a/MAUI/TextInputLayout/Assistive-Labels.md b/MAUI/TextInputLayout/Assistive-Labels.md index 9500cb19e8..069dfc9f0c 100644 --- a/MAUI/TextInputLayout/Assistive-Labels.md +++ b/MAUI/TextInputLayout/Assistive-Labels.md @@ -1,20 +1,20 @@ --- layout: post -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. +title: Assistive Labels in .NET MAUI Text Input Layout Control | Syncfusion® +description: Learn all about Assistive Labels support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui error label, .net maui hint label. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui error label, .net maui hint label --- # Assistive Labels in .NET MAUI Text Input Layout (SfTextInputLayout) -Assistive labels provide additional information about text entered in the input view controls. +Assistive labels provide additional information about the text entered in input view controls, enhancing user experience by offering clarity and guidance. -## Helper text +## Helper Text -Helper text conveys additional guidance about the input field, such as how it will be used. It can be set using the [HelperText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HelperText) property. +Helper text provides additional information about the input field, such as its intended use. This feature is enabled using the [HelperText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HelperText) property. {% tabs %} @@ -38,13 +38,13 @@ inputLayout.Content = new Entry(); {% endtabs %} -The visibility of the helper text can be disabled by setting the [ShowHelperText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowHelperText) property to false. By default, it is set to true. +The visibility of the helper text can be disabled by setting the [ShowHelperText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowHelperText) property to false. By default, this property is set to true. ![maui-textinputlayout-helpertext label](images/AssistiveLabels/Maui-TextInputLayout-HelperText.jpg) -## Error message +## Error Message -When the text input is not accepted, an error message will display instructions to fix it. Error messages will be displayed below the input line till entering the correct text. It can be set using the [ErrorText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ErrorText) property, but it will be displayed only when the [HasError](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HasError) property is set to `true.` +When the text input is incorrect, an error message will guide the user on how to rectify the issue. Display error messages using the [ErrorText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ErrorText) property, which is visible only when the [HasError](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HasError) property is set to true. {% tabs %} @@ -76,11 +76,11 @@ inputLayout.Content = new Entry(); ![maui-textinputlayout-error label](images/AssistiveLabels/Maui-TextInputLayout-ErrorLabel.jpg) -N> Error validations should be done in the application level. +N> Perform error validations at the application level. -## Character counter +## Character Counter -Character counter is used when you need to limit the characters. Character limit can be set using the [CharMaxLength](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_CharMaxLength) property. +To enforce character limits, the character counter is used. Set the character limit using the [CharMaxLength](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_CharMaxLength) property. {% tabs %} @@ -111,11 +111,11 @@ inputLayout.Content = new Entry(); ![Character Maximum Length](images/AssistiveLabels/MaxCharCount.png) -N> When character count reaches the maximum character length, the error color will be applied to hint, border, and counter label. +N> When the character count reaches the maximum limit, the error color will be applied to the hint, border, and counter label. -## Reserve spaces for assistive labels +## Reserve Spaces for Assistive Labels -The reserved spaces for assistive labels can be removed by setting the [ReserveSpaceForAssistiveLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ReserveSpaceForAssistiveLabels) property to false. +The space reserved for assistive labels can be removed by setting the [ReserveSpaceForAssistiveLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ReserveSpaceForAssistiveLabels) property to false. {% tabs %} diff --git a/MAUI/TextInputLayout/Container-Type.md b/MAUI/TextInputLayout/Container-Type.md index bd2c04f197..213107c83a 100644 --- a/MAUI/TextInputLayout/Container-Type.md +++ b/MAUI/TextInputLayout/Container-Type.md @@ -1,20 +1,20 @@ --- layout: post -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. +title: Container Type in .NET MAUI Text Input Layout Control | Syncfusion® +description: Learn all about Container Type support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- # Container Type in .NET MAUI Text Input Layout (SfTextInputLayout) -Containers improve the discoverability of input view by creating a contrast between the input view and assistive elements. +Containers enhance the discoverability of input views by creating a visual contrast between the input field and assistive elements. ## Filled -The background of the input view will be filled with container color, and its stroke (at the bottom edge) color and thickness will be changed based on its states. It can be enabled by setting the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property to [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled). +When the background of the input view is filled with container color, the stroke color and thickness at the bottom edge change based on the state. Enable this by setting the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property to [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled). {% tabs %} @@ -44,7 +44,7 @@ inputLayout.Content = new Entry() { Text = "John" }; ## Outlined -When setting the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property to [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined), the container will be covered with a rounded-corner border. +Set the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property to [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined) to surround the container with an outlined rounded-corner border. {% tabs %} @@ -73,9 +73,9 @@ inputLayout.Content = new Entry() { Text = "John" }; ![Outlined type](images/ContainerType/Outlined.png) -### Customize the corner radius of the outline border +### Customize the Corner Radius of the Outline Border -When setting the [OutlineCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_OutlineCornerRadius) property to double value, the corner radius of the container will be changed. +Customize the corner radius by setting the [OutlineCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_OutlineCornerRadius) property. {% tabs %} @@ -103,12 +103,11 @@ inputLayout.Content = new Entry(); ![OutlineCornerRadius img](images/ContainerType/CornerRadius.png) ->**NOTE** -It is applicable for the outline border when setting the container type to outlined. +> **NOTE**: This is applicable for the outline border when the container type is set to outlined. ### Custom Padding -Spaces around the input view can be customized by setting the InputViewPadding property to [thickness](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.thickness?view=net-maui-7.0) value. +Customize spaces around the input view by setting the `InputViewPadding` property to a [Thickness](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.thickness?view=net-maui-7.0) value. {% tabs %} @@ -140,7 +139,7 @@ inputLayout.Content = new Entry(); ## None -When setting the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property to [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_None), the container will have an empty background and enough spacing. +For an unstyled container with a plain background and ample spacing, set the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property to [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_None). {% tabs %} diff --git a/MAUI/TextInputLayout/Custom-Font.md b/MAUI/TextInputLayout/Custom-Font.md index 42c9d7437f..8bffd8583e 100644 --- a/MAUI/TextInputLayout/Custom-Font.md +++ b/MAUI/TextInputLayout/Custom-Font.md @@ -1,22 +1,20 @@ --- layout: post -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. +title: Font Customization in .NET MAUI TextInputLayout Control | Syncfusion® +description: Learn all about font customization support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui error label, .net maui hint label. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui error label, .net maui hint label --- -# Font Customization in .NET MAUI Text Input Layout (SfTextInputLayout) +# Font Customization in .NET MAUI Text Input Layout (SfTextInputLayout) -You can customize the appearance (size, attributes, and family) of the font by setting the [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_FontFamilyProperty), [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_FontSizeProperty), and [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_FontAttributesProperty) properties of the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html) property. - -Refer to this [documentation](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/fonts) to configure the custom fonts in the .NET MAUI. +Customize the font appearance (size, attributes, and family) by setting the [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_FontFamilyProperty), [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_FontSizeProperty), and [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_FontAttributesProperty) properties of the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html). Refer to this [documentation](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/fonts) to configure custom fonts in .NET MAUI. ## Hint -You can customize the font of the `hint` label by setting the FontFamily, FontSize, and FontAttributes, properties of [HintLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HintLabelStyle) in the [SfTextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). +Customize the font of the `hint` label by setting the `FontFamily`, `FontSize`, and `FontAttributes` properties in [HintLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HintLabelStyle) within [SfTextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). {% tabs %} @@ -48,9 +46,9 @@ inputLayout.Content = new Entry(); ![Hint label style](images/CustomFont/HintLabelStyle.png) -## Helper text +## Helper Text -You can customize the font of the `helper text` label by setting the FontFamily, FontSize, and FontAttributes properties of [HelperLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HelperLabelStyle) in the [SfTextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). +Customize the font of the `helper text` label by setting the `FontFamily`, `FontSize`, and `FontAttributes` properties in [HelperLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_HelperLabelStyle) within [SfTextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). {% tabs %} @@ -83,9 +81,9 @@ inputLayout.Content = new Entry(); ![Helper label style](images/CustomFont/HelperLabelStyle.png) -## Error text +## Error Text -You can customize the font of `error text` label by setting the FontFamily, FontSize, and FontAttributes properties of [ErrorLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ErrorLabelStyle) in [SfTextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). +Customize the font of the `error text` label by setting the `FontFamily`, `FontSize`, and `FontAttributes` properties in [ErrorLabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ErrorLabelStyle) within [SfTextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). {% tabs %} diff --git a/MAUI/TextInputLayout/Custom-Icons.md b/MAUI/TextInputLayout/Custom-Icons.md index 31e39aedc3..5ba7a6a8e9 100644 --- a/MAUI/TextInputLayout/Custom-Icons.md +++ b/MAUI/TextInputLayout/Custom-Icons.md @@ -1,26 +1,24 @@ --- layout: post -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. +title: Custom Icons in .NET MAUI Text Input Layout Control | Syncfusion® +description: Learn about Custom Icons support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui leading icon entry. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui leading icon entry --- # Custom Icons in .NET MAUI Text Input Layout (SfTextInputLayout) -Any custom icons can be added to the leading edge or the trailing edge of the input view in the text input layout control. The events and commands related to the custom icons should be handled at the application level. +The .NET MAUI Text Input Layout control allows custom icons to be added to either the leading or trailing edge of the input view. The associated events and commands should be handled at the application level. Unicode or font icons can be displayed as icons in labels. -Unicode or font icons for the labels can be displayed as icons. +For more information on font icons, refer to the following: +* [Create font icons using Syncfusion Metro Studio and export as TTF](https://help.syncfusion.com/metro-studio/export-icon-font) +* [Set font family for custom fonts in labels](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/fonts?view=net-maui-7.0#display-font-icons) -N> Refer to the following links to learn more about font icons: -* [How to create font icons using our metro studio and export as ttf?](https://help.syncfusion.com/metro-studio/export-icon-font) -* [How to set font family for the custom fonts in labels?](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/fonts?view=net-maui-7.0#display-font-icons) +## Leading View -## Leading view - -A label can be added as a leading icon for the input view by setting the [LeadingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_LeadingView) property. It can be positioned either inside or outside the container by setting the [LeadingViewPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_LeadingViewPosition) property. By default, it is positioned [Outside](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ViewPosition.html#Syncfusion_Maui_Core_ViewPosition_Outside). +A label can be added as a leading icon for the input view by setting the [LeadingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_LeadingView) property. It can be positioned either inside or outside the container by setting the [LeadingViewPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_LeadingViewPosition) property, with the default position being [Outside](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ViewPosition.html#Syncfusion_Maui_Core_ViewPosition_Outside). {% tabs %} @@ -52,9 +50,9 @@ inputLayout.Content = new Entry(); ![Leading view position](images/CustomIcons/LeadingView.png) -## Trailing view +## Trailing View -A label can be added as a trailing icon for the input view by setting the [TrailingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_TrailingView) property. It can be positioned either inside or outside the container of the input view by setting the [TrailingViewPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_TrailingViewPosition) property. By default, it is positioned as [Inside](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ViewPosition.html#Syncfusion_Maui_Core_ViewPosition_Inside). +A label can be added as a trailing icon for the input view by setting the [TrailingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_TrailingView) property. It can be positioned either inside or outside the container by setting the [TrailingViewPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_TrailingViewPosition) property, with the default position being [Inside](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ViewPosition.html#Syncfusion_Maui_Core_ViewPosition_Inside). {% tabs %} @@ -86,10 +84,9 @@ inputLayout.Content = new Entry(); ![Trailing view position](images/CustomIcons/TrailingView.png) +## Leading and Trailing View Visibility Customization -## Leading and trailing view visibility customization - -The [ShowLeadingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowLeadingView) and [ShowTrailingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowTrailingView) properties in the SfTextInputLayout can be used to control the visibility of the leading and trailing views, respectively. +Control the visibility of the leading and trailing views using the [ShowLeadingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowLeadingView) and [ShowTrailingView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowTrailingView) properties in `SfTextInputLayout`. {% tabs %} @@ -129,4 +126,4 @@ inputLayout.ShowTrailingView = false; {% endtabs %} -![Visibility customisation](images/CustomIcons/LeadTrailCust.png) +![Visibility customization](images/CustomIcons/LeadTrailCust.png) diff --git a/MAUI/TextInputLayout/Events.md b/MAUI/TextInputLayout/Events.md index 33992ff1ba..547584969b 100644 --- a/MAUI/TextInputLayout/Events.md +++ b/MAUI/TextInputLayout/Events.md @@ -1,20 +1,20 @@ --- layout: post -title: Events in MAUI TextInputLayout control | Syncfusion® +title: Events in MAUI TextInputLayout Control | Syncfusion® description: Learn about Events support in Syncfusion® Essential Studio® MAUI TextInputLayout control, its elements, and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- # Events in MAUI TextInputLayout ## PasswordVisibilityToggled Event -The [PasswordVisibilityToggled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_PasswordVisibilityToggled) event will be triggered whenever you toggle the password toggle icon in the SfTextInputLayout. The event arguments are of type [PasswordVisibilityToggledEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.PasswordVisibilityToggledEventArgs.html) and expose the following property: +The [PasswordVisibilityToggled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_PasswordVisibilityToggled) event is triggered whenever the password toggle icon in the `SfTextInputLayout` is toggled. The event provides arguments of type [PasswordVisibilityToggledEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.PasswordVisibilityToggledEventArgs.html) which expose the following property: -* [IsPasswordVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.PasswordVisibilityToggledEventArgs.html#Syncfusion_Maui_Core_PasswordVisibilityToggledEventArgs_IsPasswordVisible): Its value is defined based on the visibility of the password. +- [IsPasswordVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.PasswordVisibilityToggledEventArgs.html#Syncfusion_Maui_Core_PasswordVisibilityToggledEventArgs_IsPasswordVisible): Indicates the current visibility state of the password. {% tabs %} {% highlight xaml %} @@ -44,4 +44,4 @@ inputLayout.Content = new Entry() { Text = "1234" }; } {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} diff --git a/MAUI/TextInputLayout/Fixed-Hint-Position.md b/MAUI/TextInputLayout/Fixed-Hint-Position.md index 0e744a5be8..3eddb79d8a 100644 --- a/MAUI/TextInputLayout/Fixed-Hint-Position.md +++ b/MAUI/TextInputLayout/Fixed-Hint-Position.md @@ -1,24 +1,23 @@ --- layout: post -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. +title: Fixed Hint Position in .NET MAUI Text Input Layout Control | Syncfusion® +description: Learn about Fixed Hint Position support in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui hint label. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui hint label --- # Fixed Hint Position in .NET MAUI Text Input Layout (SfTextInputLayout) -Hint label for the text input layout is always fixed at the top position. This helps users make the hint label float even when the input view is not focused. It can be enabled by setting the [IsHintAlwaysFloated](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_IsHintAlwaysFloated) property. +The hint label for the text input layout is positioned at the top permanently, which allows users to see the hint label even when the input view is not focused. Enable this feature by setting the [IsHintAlwaysFloated](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_IsHintAlwaysFloated) property. ->**NOTE** -The default value of the `IsHintAlwaysFloated` is `false`. +> **NOTE** +> The default value of `IsHintAlwaysFloated` is `false`. ## Filled -The hint label position of the input view will be set always at the top for the [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled) container type. - +For the [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled) container type, the hint label position will always be at the top. {% tabs %} {% highlight xaml %} @@ -47,8 +46,7 @@ inputLayout.Content = new Entry(); ## Outlined -The hint label position of the input view will be set always at the top for the [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined) container type. - +For the [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined) container type, the hint label position will also always be at the top. {% tabs %} {% highlight xaml %} @@ -77,8 +75,7 @@ inputLayout.Content = new Entry(); ## None -The hint label position of the input view will be set always at the top for the [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_None) container type. - +For the [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_None) container type, the hint label also remains fixed at the top. {% tabs %} {% highlight xaml %} @@ -103,4 +100,4 @@ inputLayout.Content = new Entry(); {% endtabs %} -![None type](images/FixedHintPosition/HintPositionNone.png) \ No newline at end of file +![None type](images/FixedHintPosition/HintPositionNone.png) diff --git a/MAUI/TextInputLayout/Getting-Started.md b/MAUI/TextInputLayout/Getting-Started.md index c4668e326c..d10a04758b 100644 --- a/MAUI/TextInputLayout/Getting-Started.md +++ b/MAUI/TextInputLayout/Getting-Started.md @@ -1,18 +1,18 @@ --- layout: post -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. +title: Getting Started with .NET MAUI Text Input Layout Control | Syncfusion® +description: Learn about getting started with Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control, its elements, and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui hint label. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui hint label --- # Getting Started with .NET MAUI TextInputLayout This section guides you through setting up and configuring a [TextInputLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html) in your .NET MAUI application. Follow the steps below to add a basic TextInputLayout to your project. -To quickly get started with the .NET MAUI TextInputLayout, watch this video. +To get started quickly with the .NET MAUI TextInputLayout, watch this video. {% youtube "https://www.youtube.com/watch?v=VKo3vNBzNbw" %} @@ -21,26 +21,26 @@ To quickly get started with the .NET MAUI TextInputLayout, watch this video. ## Prerequisites -Before proceeding, ensure the following are in place: +Before you proceed, ensure the following are in place: 1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 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**. +1. Go to **File > New > Project** and select the **.NET MAUI App** template. +2. Name the project and choose a location. Click **Next**. +3. Select the desired .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package -1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. +1. In **Solution Explorer**, right-click the project and select **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. +3. Ensure all necessary dependencies are installed correctly, and the project is restored. ## Step 3: Register the Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion controls of .NET MAUI. In the **MauiProgram.cs file**, register the handler for Syncfusion core. +The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) NuGet package is required for all Syncfusion controls in .NET MAUI. Register the handler in the **MauiProgram.cs file**. {% highlight c# hl_lines="6 17" %} using Microsoft.Maui; @@ -69,14 +69,13 @@ namespace TextInputLayoutSample } } } - {% endhighlight %} ## Step 4: Add a Basic TextInputLayout -Step 1: Add the namespace as shown in the following code sample. - +**Step 1:** Add the namespace as shown in the following code sample. Add the following namespace to add [.NET MAUI Text Input Layout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). +Include the following namespace to add [.NET MAUI Text Input Layout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). {% tabs %} @@ -94,7 +93,7 @@ Add the following namespace to add [.NET MAUI Text Input Layout](https://help.sy {% endtabs %} -Step 2: Add any input view control such as [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) and [Editor](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), [SfAutocomplete](https://help.syncfusion.com/maui/autocomplete/overview), [SfComboBox](https://help.syncfusion.com/maui/combobox/overview) controls and add hint label (floating label). +**Step 2:** Add any input view control such as [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) and [Editor](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), [SfAutocomplete](https://help.syncfusion.com/maui/autocomplete/overview), or [SfComboBox](https://help.syncfusion.com/maui/combobox/overview) controls, and add a hint label (floating label). {% tabs %} @@ -120,24 +119,24 @@ inputLayout.Content = new Entry(); ## Prerequisites -Before proceeding, ensure the following are set up: +Before starting, 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. +1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 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) +3. Make sure 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 press Enter. +1. Open the Command Palette by pressing **Ctrl+Shift+P**, type **.NET: New Project**, and press **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** +3. Select the project location, name the project, and press **Enter**. +4. Then click **Create Project**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package -1. Press Ctrl + ` (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. +1. Press **Ctrl + `** (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.Core` to install the Syncfusion® .NET MAUI Core package. 4. To ensure all dependencies are installed, run `dotnet restore`. @@ -177,11 +176,11 @@ namespace TextInputLayoutSample ## Step 4: Add a Basic TextInputLayout -Step 1: Add the NuGet to the project as discussed in the above reference section. +**Step 1:** Add the NuGet package to the project as discussed in the reference section above. -Step 2: Add the namespace as shown in the following code sample. +**Step 2:** Include the namespace as shown in the following code sample. -Add the following namespace to add [.NET MAUI Text Input Layout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). +Include the following namespace to add [.NET MAUI Text Input Layout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html). {% tabs %} @@ -199,7 +198,7 @@ Add the following namespace to add [.NET MAUI Text Input Layout](https://help.sy {% endtabs %} -Step 3: Add any input view control such as [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) and [Editor](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), [SfAutocomplete](https://help.syncfusion.com/maui/autocomplete/overview), [SfComboBox](https://help.syncfusion.com/maui/combobox/overview) controls and add hint label (floating label). +**Step 3:** Add any input view control such as [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) and [Editor](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), [SfAutocomplete](https://help.syncfusion.com/maui/autocomplete/overview), or [SfComboBox](https://help.syncfusion.com/maui/combobox/overview) controls, and add a hint label (floating label). {% tabs %} @@ -223,9 +222,9 @@ inputLayout.Content = new Entry(); {% endtabcontent %} {% endtabcontents %} -## Adding hint +## Adding Hint -Floating label for the text input layout can be added by setting the [Hint](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Hint) property. Visibility of the hint can be collapsed by setting the [ShowHint](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowHint) property to `false.` By default, this property is set to `true.` +A floating label for the text input layout can be added by setting the [Hint](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Hint) property. The visibility of the hint can be collapsed by setting the [ShowHint](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ShowHint) property to `false`. By default, this property is set to `true`. {% tabs %} @@ -247,15 +246,15 @@ inputLayout.Content = new Entry(); {% endtabs %} -When focusing on the input view, the hint label will be moved to the top position; it will be returned to the original position when proceeding further (on unfocused) without entering any value. +When focusing on the input view, the hint label will be moved to the top position. It will return to its original position when proceeding further (on unfocused) without entering any value. -Run the project, and check if you get the following output to ensure that the project has been appropriately configured to add the text input layout control. +Run the project, and verify that you get the following output to ensure the project is correctly configured to add the text input layout control. ![Adding hint](images/GettingStarted/GettingStarted.png) -## Enabling password visibility toggle +## Enabling Password Visibility Toggle -The password visibility toggle is used to show or hide the visibility of characters in the input view added to the control. You can enable this toggle by setting the [EnablePasswordVisibilityToggle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_EnablePasswordVisibilityToggle) property to `true.` +The password visibility toggle is used to show or hide the characters in the input view added to the control. Enable this feature by setting the [EnablePasswordVisibilityToggle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_EnablePasswordVisibilityToggle) property to `true`. {% tabs %} @@ -281,7 +280,7 @@ inputLayout.Content = new Entry() { Text = "1234" }; ![Enable password toggling image](images/GettingStarted/PasswordGettingStarted.png) -N> Password visibility toggle can be enabled only for [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) control. +N> Password visibility toggle can be enabled only for the [Entry](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) control. You can find the complete getting started sample from this [link.](https://github.com/SyncfusionExamples/maui-textinputlayout-samples) diff --git a/MAUI/TextInputLayout/How-To.md b/MAUI/TextInputLayout/How-To.md index 67ab20c243..c1e09d56aa 100644 --- a/MAUI/TextInputLayout/How-To.md +++ b/MAUI/TextInputLayout/How-To.md @@ -1,17 +1,16 @@ --- layout: post -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. +title: How to Customize Stroke Thickness | SfTextInputLayout | .NET MAUI | Syncfusion® +description: Learn about stroke thickness customization in Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- -# How to Customize the thickness of stroke? +# How to Customize the Thickness of Stroke -## Customize the thickness of stroke - -The stroke width (for [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined)) and line thickness (for [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled) and [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_None)) can be customized based on the focus state of the input view by setting the [FocusedStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_FocusedStrokeThickness) and [UnfocusedStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_UnfocusedStrokeThickness) properties. +## Customizing Stroke Thickness +The stroke width for the [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined) container type and the line thickness for the [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled) and [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_None) container types can be customized based on the focus state of the input view by setting the [FocusedStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_FocusedStrokeThickness) and [UnfocusedStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_UnfocusedStrokeThickness) properties. {% tabs %} diff --git a/MAUI/TextInputLayout/Migration.md b/MAUI/TextInputLayout/Migration.md index 0281bffef7..77e71e35f4 100644 --- a/MAUI/TextInputLayout/Migration.md +++ b/MAUI/TextInputLayout/Migration.md @@ -1,17 +1,16 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfTextInputLayout | Syncfusion® -description: Learn all about Migrating from Syncfusion® Xamarin TextInputLayout to Syncfusion® .NET MAUI TextInputLayout control and more here. +description: Learn about migrating from Syncfusion® Xamarin TextInputLayout to Syncfusion® .NET MAUI TextInputLayout control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- -# Migrating from Xamarin TextInputLayout to .NET MAUI TextInputLayout. - -To migrate easier from Xamarin SfTextInputLayout to .NET MAUI SfTextInputLayout, we kept most of the APIs from Xamarin SfTextInputLayout in MAUI SfTextInputLayout. However, to maintain the consistency of API naming in MAUI SfTextInputLayout, we renamed some of the APIs. The APIs changed in MAUI SfTextInputLayout from Xamarin SfTextInputLayout as detailed in the following: +# Migrating from Xamarin TextInputLayout to .NET MAUI TextInputLayout +Migrating from Xamarin SfTextInputLayout to .NET MAUI SfTextInputLayout is facilitated by retaining most of the APIs from Xamarin. However, to maintain consistency in API naming conventions in .NET MAUI, some APIs have been renamed. The following sections detail the changes: ## Namespaces @@ -66,4 +65,4 @@ To migrate easier from Xamarin SfTextInputLayout to .NET MAUI SfTextInputLayout, ## Known Issues -Manually input values don't update the Stroke Value due to an issue at the framework level in .NET 8.0. This problem arises because the manual value doesn't override an implicit style. However, you can resolve this by setting the Stroke Value using the Visual State Manager (VSM) through Style. Refer to this [link](https://github.com/dotnet/maui/issues/18103) for more details. +There is a known issue in .NET 8.0 where manually input values do not update the stroke value due to an implicit style not being overridden. You can resolve this by setting the stroke value using the Visual State Manager (VSM) through style. For more details, refer to this [link](https://github.com/dotnet/maui/issues/18103). diff --git a/MAUI/TextInputLayout/Overview.md b/MAUI/TextInputLayout/Overview.md index 0419d27ead..92da3ecc9c 100644 --- a/MAUI/TextInputLayout/Overview.md +++ b/MAUI/TextInputLayout/Overview.md @@ -1,25 +1,24 @@ --- layout: post -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. +title: About .NET MAUI Text Input Layout Control | Syncfusion® +description: Learn about the introduction of Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control, its elements, and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui leading icon entry. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui, .net maui leading icon entry --- # .NET MAUI Text Input Layout (SfTextInputLayout) Overview -The text input layout adds decorative elements like floating labels, icons, and assistive labels on top of input views such as [`Entry`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) and [`Editor`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), [`SfAutocomplete`](https://help.syncfusion.com/maui/autocomplete/overview), [`SfComboBox`](https://help.syncfusion.com/maui/combobox/overview) controls. - +The .NET MAUI Text Input Layout enhances input views like [`Entry`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry), [`Editor`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), [`SfAutocomplete`](https://help.syncfusion.com/maui/autocomplete/overview), and [`SfComboBox`](https://help.syncfusion.com/maui/combobox/overview) by adding decorative elements such as floating labels, icons, and assistive labels. ![The customizable text input layout control for .NET MAUI](images/Overview/net_maui_text_input_layout.gif) -## Key features +## Key Features -* Display floating label when the input view is focused. -* Display error label. -* Support filled and outlined container type. -* Display leading and trailing icons. -* Display help label. -* Password visibility toggling. \ No newline at end of file +* **Floating Label**: Automatically displays a floating label when the input view is focused. +* **Error Label**: Provides an error label for validation messages. +* **Container Types**: Supports both filled and outlined container styles. +* **Icon Display**: Offers options to display leading and trailing icons. +* **Help Label**: Includes a help label for additional guidance. +* **Password Visibility Toggle**: Facilitates easy toggling of password visibility. diff --git a/MAUI/TextInputLayout/States-And-Colors.md b/MAUI/TextInputLayout/States-And-Colors.md index 29742e2ea5..c6d1f28fbd 100644 --- a/MAUI/TextInputLayout/States-And-Colors.md +++ b/MAUI/TextInputLayout/States-And-Colors.md @@ -1,25 +1,25 @@ --- layout: post -title: States and Colors the .NET MAUI Text Input Layout | Syncfusion® -description: Learn here all about States and Colors support in the Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. +title: States and Colors in .NET MAUI Text Input Layout | Syncfusion® +description: Learn about States and Colors support in the Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- # States and Colors in .NET MAUI Text Input Layout (SfTextInputLayout) -Use the visual state manager to change the [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Stroke) properties based on the visual states set from the code. The applicable visual states are normal, focused, and error. +Utilize the Visual State Manager to change the [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Stroke) properties based on visual states set in code. Applicable visual states include normal, focused, and error. -Based on the states, the colors will be applied to the floated hint label and borders. So, when the input view is in a focused state, the focused state [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Stroke) will be applied; it is similar to other states also. The current stroke can be obtained from the [CurrentActiveColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_CurrentActiveColor) property. +Depending on the state, colors are applied to the floating hint label and borders. For instance, when the input view is focused, the focused state [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Stroke) will be applied; the other states follow suit. You can obtain the current stroke color via the [CurrentActiveColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_CurrentActiveColor) property. -N> The error color will not be set to `CurrentActiveColor` when the `HasError` property is set to `true.` +N> The error color will not be set to `CurrentActiveColor` when the `HasError` property is set to `true`. ## Stroke -The [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Stroke) property value will be applied to the hint label and border of the SfTextInputLayout. +The [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_Stroke) property value applies to the hint label and border of the `SfTextInputLayout`. -I> Cursor color of the input view will be same as the `Accent` color of the application in each platform. +I> The cursor color of the input view will match the `Accent` color of the application on each platform. {% tabs %} @@ -101,9 +101,9 @@ inputLayout.Style = style; ![States](images/StatesAndColors/States.png) -## Disabled state +## Disabled State -The text input layout is disabled by setting the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_IsEnabled) property to `false.` The color of the container and other UI elements will also be changed to the disabled state, but its color cannot be customized. +The text input layout can be disabled by setting the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_IsEnabled) property to `false`. The color of the container and other UI elements will change to the disabled state, though this color cannot be customized. {% tabs %} @@ -129,13 +129,12 @@ inputLayout.Content = new Entry(); ![Disabled state](images/StatesAndColors/Disabled.jpg) - -## Container color -The color of the container can be customized by setting the [ContainerBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerBackground) property. It is applicable when the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property is set to [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled) and [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined). +## Container Color +Customize the color of the container using the [ContainerBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerBackground) property. This applies when the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) property is set to [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled) or [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined). ### Filled -The color of the container is customized when the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) is [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled). +Customize the container color when the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) is [Filled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Filled). {% tabs %} @@ -167,7 +166,7 @@ inputLayout.Content = new Entry() { Text = "John" }; ### Outlined -The color of the container is customized when the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) is [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined). +Customize the container color when the [ContainerType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfTextInputLayout.html#Syncfusion_Maui_Core_SfTextInputLayout_ContainerType) is [Outlined](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContainerType.html#Syncfusion_Maui_Core_ContainerType_Outlined). {% tabs %} @@ -197,10 +196,9 @@ inputLayout.Content = new Entry(); ![outlined](images/StatesAndColors/OutlinedContainerBackground.png) +## Customizing the Text Color of Label -## Customizing the text color of label - -You can customize the text color of the `hint` label, `helper` label, and `error` label using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_TextColor) property of the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html). +Customize the text color of the `hint`, `helper`, and `error` labels using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html#Syncfusion_Maui_Core_LabelStyle_TextColor) property of [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.LabelStyle.html). {% tabs %} diff --git a/MAUI/TextInputLayout/Supported-input-views.md b/MAUI/TextInputLayout/Supported-input-views.md index 88520b35b9..5333a72a14 100644 --- a/MAUI/TextInputLayout/Supported-input-views.md +++ b/MAUI/TextInputLayout/Supported-input-views.md @@ -1,11 +1,11 @@ --- layout: post 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. +description: Learn about supported input views in the Syncfusion® .NET MAUI Text Input Layout (SfTextInputLayout) control and more. platform: maui control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- # Supported Input Views in .NET MAUI TextInputLayout (SfTextInputLayout) @@ -14,7 +14,7 @@ Input views can be added to the text input layout control by setting the [Conten ## Entry -To enter a single line text input, add [`Entry`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry). +For single-line text input, use the [`Entry`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry) control. {% tabs %} @@ -43,9 +43,7 @@ inputLayout.Content = new Entry(); ## Editor - -To enter multi-line text input, add [`Editor`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor), then set the [AutoSize](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.editor.autosize?view=net-maui-7.0#microsoft-maui-controls-editor-autosize) property to `TextChanges`. - +For multi-line text input, use the [`Editor`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/editor) control, and set the [AutoSize](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.editor.autosize?view=net-maui-7.0#microsoft-maui-controls-editor-autosize) property to `TextChanges`. {% tabs %} @@ -73,14 +71,13 @@ inputLayout.Content = new Editor(); ## Autocomplete -To initialize the [Autocomplete](https://help.syncfusion.com/maui/autocomplete/overview) control and launch it in each platform, refer to the [getting started with autocomplete](https://help.syncfusion.com/maui/autocomplete/getting-started) documentation. +To use the [Autocomplete](https://help.syncfusion.com/maui/autocomplete/overview) control across platforms, refer to the [getting started with autocomplete](https://help.syncfusion.com/maui/autocomplete/getting-started) guide. ### Selection Mode -There are two different selection modes in [Autocomplete](https://help.syncfusion.com/maui/autocomplete/selection) control. - -N> For more information regarding Autocomplete selection modes, refer to the [Single Selection](https://help.syncfusion.com/maui/autocomplete/selection#single-selection) and [Multiple Selection](https://help.syncfusion.com/maui/autocomplete/selection#multiple-selection) documentation. +The [Autocomplete](https://help.syncfusion.com/maui/autocomplete/selection) control supports two selection modes: Single and Multiple. +N> For more details on Autocomplete selection modes, refer to the [Single Selection](https://help.syncfusion.com/maui/autocomplete/selection#single-selection) and [Multiple Selection](https://help.syncfusion.com/maui/autocomplete/selection#multiple-selection) documentation. #### Single Selection @@ -176,16 +173,14 @@ inputLayout.Content = autocomplete; ![Autocomplete Multi Selection](images/SupportedInputViews/Autocomplete-Multi.jpg) -## Combo box +## ComboBox -To initialize the [ComboBox](https://help.syncfusion.com/maui/combobox/overview) control and launch it in each platform, refer to the [getting started with combo box](https://help.syncfusion.com/maui/combobox/getting-started) documentation. +To initialize and launch the [ComboBox](https://help.syncfusion.com/maui/combobox/overview) control across platforms, refer to the [getting started with combo box](https://help.syncfusion.com/maui/combobox/getting-started) guide. ### Selection Mode -There are two different selection modes in [ComboBox](https://help.syncfusion.com/maui/combobox/selection) control. - - -N> For more information regarding ComboBox selection modes, refer to the [Single Selection](https://help.syncfusion.com/maui/combobox/selection#single-selection) and [Multiple Selection](https://help.syncfusion.com/maui/combobox/selection#multiple-selection) documentation. +The [ComboBox](https://help.syncfusion.com/maui/combobox/selection) control supports two selection modes: Single and Multiple. +N> For more information on ComboBox selection modes, see the [Single Selection](https://help.syncfusion.com/maui/combobox/selection#single-selection) and [Multiple Selection](https://help.syncfusion.com/maui/combobox/selection#multiple-selection) documentation. #### Single Selection @@ -226,7 +221,7 @@ inputLayout.Content = combobox; {% endtabs %} -![Combobox Single Selection](images/SupportedInputViews/ComboBox.jpg) +![ComboBox Single Selection](images/SupportedInputViews/ComboBox.jpg) #### Multiple Selection @@ -283,7 +278,7 @@ inputLayout.Content = combobox; ## Masked Entry -To initialize the [MaskedEntry](https://help.syncfusion.com/maui/masked-entry/overview) control and launch it in each platform, refer to the [getting started with masked entry](https://help.syncfusion.com/maui/masked-entry/getting-started) documentation. +To initialize and launch the [MaskedEntry](https://help.syncfusion.com/maui/masked-entry/overview) control across platforms, refer to the [getting started with masked entry](https://help.syncfusion.com/maui/masked-entry/getting-started) guide. {% tabs %} {% highlight XAML %} @@ -311,7 +306,7 @@ inputLayout.Content = new SfMaskedEntry() { MaskType = MaskedEntryMaskType.Simpl ## NumericEntry -To initialize the `NumericEntry` control and launch it in each platform, refer to the `getting started with numeric entry` documentation. +To initialize and launch the `NumericEntry` control across platforms, refer to the `getting started with numeric entry` guide. {% tabs %} {% highlight XAML %} @@ -342,7 +337,7 @@ inputLayout.Content = new SfNumericEntry() { Value=100, ## Picker -To initialize the [Picker](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/picker) control and launch it in each platform, refer to the `getting started with picker` documentation. +To initialize and launch the [Picker](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/picker) control across platforms, refer to the `getting started with picker` guide. {% tabs %} {% highlight XAML %} @@ -380,10 +375,11 @@ inputLayout.Content = picker; ![Picker](images/SupportedInputViews/Picker.jpg) -N> Windows platform will not support `.NET MAUI Picker` as input view of the text input layout. +N> The Windows platform does not support `.NET MAUI Picker` as an input view for the text input layout. + ## TimePicker -To initialize the [TimePicker](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/timepicker) control and launch it in each platform, refer to the `getting started with time picker` documentation. +To initialize and launch the [TimePicker](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/timepicker) control across platforms, refer to the `getting started with time picker` guide. {% tabs %} {% highlight XAML %} @@ -408,11 +404,11 @@ inputLayout.Content = new TimePicker(); ![TimePicker](images/SupportedInputViews/TimePicker.jpg) -N> Windows platform will not support `.NET MAUI TimePicker` as input view of the text input layout. +N> The Windows platform does not support `.NET MAUI TimePicker` as an input view for the text input layout. ## DatePicker -To initialize the [DatePicker]( https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/DatePicker) control and launch it in each platform, refer to the `getting started with date picker` documentation. +To initialize and launch the [DatePicker](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/datepicker) control across platforms, refer to the `getting started with date picker` guide. {% tabs %} {% highlight XAML %} @@ -437,5 +433,4 @@ inputLayout.Content = new DatePicker(); ![DatePicker](images/SupportedInputViews/DatePicker.jpg) -N> Windows platform will not support `.NET MAUI DatePicker` as input view of the text input layout. - +N> The Windows platform does not support `.NET MAUI DatePicker` as an input view for the text input layout. diff --git a/MAUI/TextInputLayout/right-to-left.md b/MAUI/TextInputLayout/right-to-left.md index ec23251746..37e396e4d7 100644 --- a/MAUI/TextInputLayout/right-to-left.md +++ b/MAUI/TextInputLayout/right-to-left.md @@ -1,16 +1,16 @@ --- layout: post -title: Right-to-Left in .NET MAUI Text Input Layout control | Syncfusion® +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 control: SfTextInputLayout documentation: ug -keywords: .net maui text input layout, syncfusion text input layout, text input layout maui. +keywords: .net maui text input layout, syncfusion text input layout, text input layout maui --- # Right-to-Left in .NET MAUI Text Input Layout (SfTextInputLayout) -The TextInputLayout supports to changing the flow of text to the right-to-left direction by setting the [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.device.flowdirection?view=net-maui-7.0) to `RightToLeft.` +The TextInputLayout supports changing the flow of text to the right-to-left direction by setting the [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.device.flowdirection?view=net-maui-7.0) property to `RightToLeft`. {% tabs %} {% highlight xaml %} @@ -38,3 +38,4 @@ inputLayout.Content = new Entry(); ![.NET MAUI TextInputLayout with right to left](images/RightToLeft/RTL.png) +