From 0edb822a52da916151825bb6bef02da50d1ccf60 Mon Sep 17 00:00:00 2001 From: snehakPV Date: Mon, 19 May 2025 11:51:34 +0530 Subject: [PATCH 1/6] Reviewed UG content for Avatar View, Badge View and Busy Indicator controls. --- MAUI/Avatar-view/Content-type.md | 56 +++++++-------- MAUI/Avatar-view/Getting-Started.md | 46 ++++++------ MAUI/Avatar-view/Migration.md | 10 +-- MAUI/Avatar-view/Overview.md | 20 +++--- MAUI/Avatar-view/customization.md | 72 ++++++++++--------- MAUI/Avatar-view/how-to.md | 62 ++++++++-------- MAUI/Avatar-view/visualstyles.md | 21 +++--- MAUI/Badge-View/Animation.md | 16 ++--- MAUI/Badge-View/Badge-customization.md | 36 +++++----- MAUI/Badge-View/Getting-Started.md | 48 ++++++------- MAUI/Badge-View/Migration.md | 6 +- MAUI/Badge-View/Overview.md | 14 ++-- MAUI/Badge-View/Position-customization.md | 10 +-- MAUI/Badge-View/Predefined-symbols.md | 16 ++--- MAUI/Busy-Indicator/AnimationType.md | 26 +++---- MAUI/Busy-Indicator/Duration.md | 13 ++-- MAUI/Busy-Indicator/Getting-Started.md | 56 +++++++-------- MAUI/Busy-Indicator/IndicatorColor.md | 25 +++---- .../Make-Busy-Animation-Idle.md | 12 ++-- MAUI/Busy-Indicator/Migration.md | 14 ++-- MAUI/Busy-Indicator/Overview.md | 22 +++--- MAUI/Busy-Indicator/Set-Header.md | 31 ++++---- MAUI/Busy-Indicator/Sizing.md | 12 ++-- 23 files changed, 323 insertions(+), 321 deletions(-) diff --git a/MAUI/Avatar-view/Content-type.md b/MAUI/Avatar-view/Content-type.md index 6cfe84627a..0e82cf8acb 100644 --- a/MAUI/Avatar-view/Content-type.md +++ b/MAUI/Avatar-view/Content-type.md @@ -1,10 +1,10 @@ --- layout: post -title: Various customization in Syncfusion® AvatarView control. -description: Learn what are the types in AvatarType and how to set value for the Avatartype in .NET MAUI AvatarView. -platform: maui +title: Various customizations in Syncfusion® AvatarView control. +description: Learn about the types in AvatarType and how to set values for AvatarType in .NET MAUI AvatarView. +platform: MAUI control: SfAvatarView -documentation: ug +documentation: UG --- # Content Types in SfAvatarView @@ -15,18 +15,18 @@ The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv * [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Default) - Displays the default image when initializing without any other source such as image and group. -* [Initials](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Initials) - Displays the initial in the view. +* [Initials](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Initials) - Displays the initials in the view. -* [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_AvatarCharacter) - Displays the default image in the view. +* [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_AvatarCharacter) - Displays a preset vector image in the view. * [Custom](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Custom) - Displays a custom image in the view. -* [Group](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Group) - Displays a maximum of three images or initials in a single view. +* [Group](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ContentType.html#Syncfusion_Maui_Core_ContentType_Group) - Displays up to three images or initials in a single view. ## Default -Default type avatar view is used for displaying the default vector image when initializing without the initials, custom, or group view types. +The default type avatar view is used to display the default vector image when initializing without specifying initials, custom, or group view types. {% tabs %} @@ -69,24 +69,24 @@ this.Content = mainGrid; ## Initials -When using the [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) as initials, you need to set the initial character using the following properties: +When using [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) as initials, set the initial character using the following properties: * [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) - Defines the type of characters to be displayed. * [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName)- Gets or sets the value for the initials type, which displays the text in the avatar view. -* [InitialsColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsColor)- Gets or sets the color of the initial color value that defines color for the initial string. +* [InitialsColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsColor)- Gets or sets the color of the initials. ### InitialsType -The [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) contains the following two types: +The [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) includes the following types: * SingleCharacter * DoubleCharacter -You must set the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) string property for displaying the initial value in the AvatarView. +Set the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) property to display initials in the AvatarView. #### SingleCharacter -The `SingleCharacter` is used for displaying the first character in the string you have set in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. +The `SingleCharacter` type displays the first character of the string specified in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. {% tabs %} {% highlight xaml %} @@ -133,7 +133,7 @@ this.Content = mainGrid; ### DoubleCharacter -The `DoubleCharacter` is used for displaying a two-characters text you have set in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. If the initials contain one word, it shows the first and last letters of the single string. If it contains two or more words, it displays the first letter of the first string and first letter of the last string. +The `DoubleCharacter` type is used to display two-character text based on the value set in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. If the initials contain one word, it shows the first and last letters. If it contains multiple words, it displays the first letter of the first and last string. {% tabs %} {% highlight xaml %} @@ -182,7 +182,7 @@ You can add a custom user image by setting the [ImageSource](https://help.syncfu ## Avatar characters -You can set the default vector images that already present in avatar view by setting the [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarCharacter) property. +The pre-set vector images in avatar view can be utilized by setting the [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarCharacter) property. {% tabs %} {% highlight xaml %} @@ -224,9 +224,9 @@ this.Content = mainGrid; ## GroupView -You can add maximum three images or initials in the same view using a GroupView type. +Add up to three images or initials in the same view using the GroupView type. -Set the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) for displaying the initials in the group view. For image, set the [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath). The following code sample demonstrates how to add images using the [GroupSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_GroupSource) property. +Use [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) for initials and [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath) for images. The following code sample demonstrates how to add images using the [GroupSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_GroupSource) property. {% tabs %} {% highlight c# %} @@ -350,7 +350,7 @@ Set the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui ## Add initials only in GroupView -You can set the initials only in the group view by setting the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) alone. It is demonstrated in the following code sample. +Set the initials only in the group view by using the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) alone. The following example shows how this is done. {% tabs %} @@ -410,22 +410,20 @@ public partial class MainPage : ContentPage, INotifyPropertyChanged ## Add both image and initials in a GroupView -You have to set both the image and initials based on what should be added in the collection. If the image needs to be added, set [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath), or if initials need to be added, set [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath). This is demonstrated in the following code snippet. +Set both the image and initials as necessary for the collection. If the image needs to be displayed, set [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath); if initials need to be displayed, set [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath). This is illustrated in the following code: {% tabs %} {% highlight c# %} - public class EmployeeViewModel : INotifyPropertyChanged +public class EmployeeViewModel : INotifyPropertyChanged +{ + public EmployeeViewModel() { - public EmployeeViewModel() - { - CollectionImage = new ObservableCollection(); - CollectionImage.Add(new Employee { ImageSource="mike.png" }); - CollectionImage.Add(new Employee { Name= "alex", Colors=Colors.White }); - CollectionImage.Add(new Employee { ImageSource= "ellanaa.png" }); - } - - } + CollectionImage = new ObservableCollection(); + CollectionImage.Add(new Employee { ImageSource="mike.png" }); + CollectionImage.Add(new Employee { Name= "alex", Colors=Colors.White }); + CollectionImage.Add(new Employee { ImageSource= "ellanaa.png" }); + } } {% endhighlight %} diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index ee03846f3d..02ecf635ca 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -1,10 +1,10 @@ --- layout: post title: Getting Started with Syncfusion® .NET MAUI Avatar View -description: This section will explain how to initialize and use the .NET MAUI Avatar View control in simple way. -platform: maui +description: Learn how to initialize and use the .NET MAUI Avatar View control in a simple way. +platform: MAUI control: SfAvatarView -documentation: ug +documentation: UG --- # Getting Started with .NET MAUI Avatar View @@ -21,24 +21,24 @@ To quickly get started with the .NET MAUI Avatar View, watch this video. ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install the [.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.3 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. +2. Name the project and choose a location, then click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® 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 choose **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. ## 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; @@ -123,10 +123,10 @@ Before proceeding, ensure the following are set up: ## Step 1: Create a new .NET MAUI Project -1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. +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, type the project name, and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package @@ -135,9 +135,9 @@ Before proceeding, ensure the following are set up: 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`. -## 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; @@ -219,24 +219,24 @@ namespace AvatarViewSample Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install the [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or a later version. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +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 choose **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. If not, Open the Terminal in Rider and manually run: `dotnet restore` +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 +## 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; @@ -313,9 +313,9 @@ namespace AvatarViewSample {% endtabcontents %} -## Adding a image in .NET MAUI Avatar View +## Adding an Image in .NET MAUI Avatar View -You can add a custom image for displaying in [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. And set the [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) to `Custom.` To ensure the avatar image appears correctly, place the image in the `Resources/Images` directory. +You can add a custom image to display in the [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. Set the [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) to `Custom.` To ensure the avatar image appears correctly, place the image in the `Resources/Images` directory. {% tabs %} diff --git a/MAUI/Avatar-view/Migration.md b/MAUI/Avatar-view/Migration.md index 5445d27bcf..501b5ec5fe 100644 --- a/MAUI/Avatar-view/Migration.md +++ b/MAUI/Avatar-view/Migration.md @@ -1,15 +1,15 @@ --- layout: post -title: Migrating from Xamarin to .NET MAUI SfAvatarView | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin Avatar View to Syncfusion® .NET MAUI Avatar View control and more. -platform: maui +title: Migrating from Xamarin to .NET MAUI Avatar View | Syncfusion® +description: Learn how to migrate from Syncfusion® Xamarin Avatar View to the Syncfusion® .NET MAUI Avatar View control and more. +platform: MAUI control: SfAvatarView -documentation: ug +documentation: UG --- # Migrating from Xamarin SfAvatarView to .NET MAUI SfAvatarView -To migrate easier from Xamarin [SfAvatarView](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.html) to .NET MAUI SfAvatarView, we kept most of the APIs from Xamarin SfAvatarView in MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html). However, to maintain the consistency of API naming in MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html), we renamed some of the APIs. The APIs that have been changed in MAUI SfAvatarView from Xamarin SfAvatarView are detailed as follows. +To ease the migration from Xamarin [SfAvatarView](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.html) to .NET MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html), most APIs from the Xamarin version have been retained in the MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html). However, to ensure consistency in API naming within the MAUI environment, some APIs have been renamed. The changes in MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) from Xamarin [SfAvatarView](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.AvatarView.html) are detailed below. ## Namespaces diff --git a/MAUI/Avatar-view/Overview.md b/MAUI/Avatar-view/Overview.md index a58a76b90f..77c04c9a47 100644 --- a/MAUI/Avatar-view/Overview.md +++ b/MAUI/Avatar-view/Overview.md @@ -1,22 +1,22 @@ --- layout: post title: Overview of Syncfusion® Avatar View control for .NET MAUI -description: A quick go through to learn about the .NET MAUI SfAvatarView control and the key features available in it. -platform: maui +description: Quickly learn about the .NET MAUI Avatar View control and its key features. +platform: MAUI control: SfAvatarView -documentation: ug +documentation: UG --- # .NET MAUI Avatar View (SfAvatarView) Overview -The [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides a graphical representation of user image that allows you to customize the view by adding image, background color, icon, text, etc. +The [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides a graphical representation of a user's image. It allows customization of the view by adding an image, background color, icon, and text. -![.NET MAUI SfAvatarview overview.](Overview_Images/overview.png) +![.NET MAUI Avatar View overview.](Overview_Images/overview.png) ## Key features -* Supports for adding image and initials. -* Customizes the height, width, Stroke, BackgroundColor, and CornerRadius of the view. -* `GroupView`: Supports to add maximum three custom images or initials in a single view. -* Supports different types of visual styles. -* Supports [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html). +* **Image and Initials Support:** Facilitates adding both images and initials. +* **View Customization:** Allows customization of the height, width, stroke, background color, and corner radius of the view. +* **GroupView:** Supports adding a maximum of three custom images or initials in a single view. +* **Visual Styles:** Offers support for different types of visual styles. +* **BadgeView Integration:** Compatible with [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html). diff --git a/MAUI/Avatar-view/customization.md b/MAUI/Avatar-view/customization.md index b0600789f1..c8fd083c68 100644 --- a/MAUI/Avatar-view/customization.md +++ b/MAUI/Avatar-view/customization.md @@ -1,26 +1,30 @@ --- layout: post title: Customization in Syncfusion® Avatar View .NET MAUI -description: This section will explain about how to achieve the customization of default View in .NET MAUI SfAvatarView. -platform: maui -control: AvatarView -documentation: ug +description: Learn how to achieve various customizations for the default view in .NET MAUI SfAvatarView. +platform: MAUI +control: SfAvatarView +documentation: UG --- -# Customization in SfAvatarView +# Customization in .NET MAUI AvatarView(SfAvatarView) -## Customization in .NET MAUI Avatar View(SfAvatarView) +The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides options to customize its appearance, including color and size attributes. -The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides options to customize the color and size. The control can be customized using the following properties: +To learn how to customize the .NET MAUI Avatar View quickly, you can check the below video. + +{% youtube "https://www.youtube.com/watch?v=xD28viNV2bI" %} + +The control can be customized using the following properties: ## Aspect -The [Aspect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Aspect) property in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) controls how the picture is adjusted to fit the display. By default, its set to `AspectFill`. +The [Aspect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Aspect) property defines how the image fits the display in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). By default, it is set to `AspectFill`. -* AspectFit: Ensures the entire picture fits, adding space if needed. -* AspectFill: Clips the image to fill the display while keeping its shape. -* Fill: Stretches the image to fill the entire display, but it may look distorted. -* Center: Places the image in the center, maintaining its original shape. +* **AspectFit:** Ensures the entire image fits, adding space if necessary. +* **AspectFill:** Clips the image to fill the display while preserving its shape. +* **Fill:** Stretches the image to fill the entire display; may result in distortion. +* **Center:** Places the image in the center, maintaining its original shape. {% tabs %} @@ -65,11 +69,11 @@ this.Content = mainGrid; ## Colors -Color in the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) can be customized by the stroke, the default background color, and automatic background color. +The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides options to customize colors, including the stroke, default background color, and automatic background color. ### Stroke -The [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Stroke) property is used for setting color to the stroke of [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). +The [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Stroke) property is used to set the stroke color of the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). {% tabs %} @@ -110,9 +114,9 @@ this.Content = mainGrid; ![AvatarControl Stroke](Customization_Images/Stroke_AvatarView.png) -### Default background color +### Default Background Color -The background color for the SfAvatarView control can be set using the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. When the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property is set to default, it displays the background color set in the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Background) property. +The background color of the SfAvatarView control can be specified using the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. When the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property is set to default, it displays the background color specified in the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Background) property. {% tabs %} @@ -160,16 +164,16 @@ this.Content = mainGrid; ![Default background color](Customization_Images/Default_Background_AvatarView.png) -### Automatic background color +### Automatic Background Color -The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control allows automatic background color while initializing. It contains the following properties: +The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control supports automatic background colors through the following properties: -* `DarkBackground`: Shows a dark color for the initials and background color. -* `LightBackground`: Shows a light color for the initials and background color. +* `DarkBackground`: Applies a dark tone to the initials and background color. +* `LightBackground`: Applies a light tone to the initials and background color. -#### Dark color +#### Dark Color -The dark background color can be set using `DarkBackground` in the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. +You can set the background color to dark by using the `DarkBackground` option in the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. {% tabs %} @@ -216,9 +220,9 @@ this.Content = mainGrid; ![Dark color](Customization_Images/Dark_SfAvatarView.png) -#### Light color +#### Light Color -The light background color can be set using `LightBackground` in the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. +The background color can be set to a light tone by using the `LightBackground` option in the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. {% tabs %} @@ -266,7 +270,7 @@ this.Content = mainGrid; ### Gradients -You can also specify a range of colors using `LinearGradientBrush` in [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Background) Property as demonstrated in the following code example. +Utilize `LinearGradientBrush` to specify gradient colors in the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Background) property, as shown in the example below. {% tabs %} @@ -327,19 +331,19 @@ this.Content = mainGrid; ## Sizing -In the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control, size of the view can be controlled using width, height, stroke thickness, and corner radius. +The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control allows you to control the view size using properties for width, height, stroke thickness, and corner radius. ### Width -You can customize the width of the avatar view using the [WidthRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_WidthRequest) property. +The width of the avatar view can be customized using the [WidthRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_WidthRequest) property. ### Height -You can customize the height of the avatar view using the [HeightRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_HeightRequest) property. +The height of the avatar view can be customized using the [HeightRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_HeightRequest) property. ### Stroke Thickness -You can customize the thickness of the avatar view using the [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_StrokeThickness) property. +Customize the thickness of the avatar view using the [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_StrokeThickness) property. {% tabs %} @@ -380,9 +384,9 @@ this.Content = mainGrid; ![AvatarView Stroke Thickness](Customization_Images/StrokeThickness_AvatarView.png) -### Corner radius +### Corner Radius -You can customize the corner radius of the avatar view using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_CornerRadius) property. +Customize the corner radius of the avatar view using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_CornerRadius) property. {% tabs %} @@ -427,7 +431,7 @@ this.Content = mainGrid; ### Content Padding -You can customize the spacing between the stroke and content in view using the [ContentPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentPadding) property. +Customize the spacing between the stroke and content in the view using the [ContentPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentPadding) property. {% tabs %} @@ -466,9 +470,9 @@ this.Content = mainGrid; ![SfAvatarView content padding](Customization_Images/ContentPadding_AvatarView.png) -### Font auto scaling enabled +### Font Auto Scaling Enabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_FontAutoScalingEnabled) property is used to automatically scale the avatar view's font size based on the operating system's text size. The default value of the [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_FontAutoScalingEnabled) property is `false.` +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_FontAutoScalingEnabled) property automatically scales the avatar view's font size based on the operating system's text size. The default value is `false.` {% tabs %} diff --git a/MAUI/Avatar-view/how-to.md b/MAUI/Avatar-view/how-to.md index 1c424ec1aa..4553f668b8 100644 --- a/MAUI/Avatar-view/how-to.md +++ b/MAUI/Avatar-view/how-to.md @@ -1,17 +1,17 @@ --- layout: post -title: States in SyncfusionSyncfusion® Avatar View control for .NET MAUI. -description: This section will explain about how to use the different states that exist in .NET MAUI SfAvatarView. -platform: maui -control: AvatarView -documentation: ug +title: States in Syncfusion® Avatar View control for .NET MAUI. +description: Learn how to use the different states available in .NET MAUI SfAvatarView. +platform: MAUI +control: SfAvatarView +documentation: UG --- -# How to use different states +# How to Use Different States -## Set badge view to avatar +## Set Badge View to Avatar -The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control provides support for [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) to notify users of new or unread messages, notifications, or the status of something. +The .NET MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control supports integrating a [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) to notify users of new or unread messages, notifications, or any updates. Below is a demonstration of how to accomplish this setup within your application. {% tabs %} @@ -20,28 +20,28 @@ The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv xmlns:badge="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" ....... - - - - - - - - - + + + + + + + + + {% endhighlight %} @@ -81,4 +81,4 @@ this.Content = mainGrid; ![BadgeView support](HowTo_Images/BadgeView_AvatarView.jpg) -To know more about [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) view, refer to this [documentation](https://help.syncfusion.com/maui/badge-view/getting-started). +To learn more about the [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1), refer to this [documentation](https://help.syncfusion.com/maui/badge-view/getting-started). diff --git a/MAUI/Avatar-view/visualstyles.md b/MAUI/Avatar-view/visualstyles.md index 5f606cdcc6..867d2654f1 100644 --- a/MAUI/Avatar-view/visualstyles.md +++ b/MAUI/Avatar-view/visualstyles.md @@ -1,15 +1,14 @@ --- layout: post title: Visual Style in Syncfusion® Avatar View .NET MAUI. -description: This section will explain about the different visual style types that exists in .NET MAUI SfAvatarView. -platform: maui -control: AvatarView -documentation: ug +description: This section explains the different visual style types available in .NET MAUI SfAvatarView. +platform: MAUI +control: SfAvatarView +documentation: UG --- # Visual Style in .NET MAUI Avatar View(SfAvatarView) -## Visual styles in .NET MAUI Avatar View(SfAvatarView) The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control supports customization using the following built-in visual styles: * Custom @@ -18,13 +17,13 @@ The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv ## Custom -Custom type allows you to customize the control, where you can handle the size, colors, images, etc. of the control. Refer to this Customization documentation in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) +The Custom style allows you to customize the control by adjusting size, colors, images, etc. For detailed customization options, refer to the Customization documentation in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). -N> The default visual type is custom. +N> The default visual type is Custom. ## Circle -You can directly set value to the circle in the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the following styles: +You can directly apply circular styling to the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the following styles: * ExtraLargeCircle * LargeCircle @@ -32,7 +31,7 @@ You can directly set value to the circle in the [SfAvatarView](https://help.sync * SmallCircle * ExtraSmallCircle -The following code sample demonstrates how to define visual style of circle AvatarView. +The following code sample demonstrates how to define the visual style of a circle AvatarView. {% tabs %} @@ -245,7 +244,7 @@ this.Content = stack; ## Square -You can directly set value to the square in the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the following styles: +You can directly apply square styling to the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the following styles: * ExtraLargeSquare * LargeSquare @@ -253,7 +252,7 @@ You can directly set value to the square in the [SfAvatarView](https://help.sync * SmallSquare * ExtraSmallSquare -The following code sample demonstrates how to define visual style of square AvatarView. +The following code sample demonstrates how to define visual style of a square AvatarView. {% tabs %} diff --git a/MAUI/Badge-View/Animation.md b/MAUI/Badge-View/Animation.md index 5361b6992b..e895d1dc3b 100644 --- a/MAUI/Badge-View/Animation.md +++ b/MAUI/Badge-View/Animation.md @@ -1,19 +1,19 @@ --- layout: post -title: Badge animation with Syncfusion® Badge View control for .NET MAUI -description: Learn here all about Animation support in Syncfusion® .NET MAUI Badge View (SfBadgeView) control and more. -platform: maui +title: Badge Animation with Syncfusion® Badge View control for .NET MAUI +description: Learn all about Animation support in the Syncfusion® .NET MAUI Badge View (SfBadgeView) control and more. +platform: MAUI control: Badge View -documentation: ug +documentation: UG --- # Animation in .NET MAUI Badge View (SfBadgeView) -## Enable animation +## Enable Animation -You can enable or disable the animation of the badge text using [Scale](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeAnimation.html#Syncfusion_Maui_Core_BadgeAnimation_Scale) or [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeAnimation.html#Syncfusion_Maui_Core_BadgeAnimation_None) enum values of the BadgeAnimation property. You can see the animation when you change the badge text. +You can enable or disable the animation of the badge text using [Scale](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeAnimation.html#Syncfusion_Maui_Core_BadgeAnimation_Scale) or [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeAnimation.html#Syncfusion_Maui_Core_BadgeAnimation_None) enum values of the `BadgeAnimation` property. The animation becomes visible when you change the badge text. {% tabs %} @@ -58,9 +58,9 @@ Content = sfBadgeView; ![.NET Maui Badge View Animation](animation_images/net_maui_badge_view_animation.gif) -## Animation duration +## Animation Duration -The [AnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_AnimationDuration) property of the [Badge Settings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) in the [Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) can be used to set the animation speed based on the given value. Setting a smaller duration value accelerates the animation speed. Its default value is 250. +The [AnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_AnimationDuration) property in the [Badge Settings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) of the [Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) can be used to set the animation speed based on your specified value. A smaller duration value accelerates the animation speed. The default value is 250. {% tabs %} diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index 3fa6d1dc91..b6e037f514 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -2,10 +2,10 @@ layout: post title: Customization of Syncfusion® Badge View control for .NET MAUI -description: This section explains how to customize the font, stroke, and text in the Syncfusion® SfBadgeView control in MAUI platform -platform: maui +description: This section explains how to customize the font, stroke, and text in the Syncfusion® SfBadgeView control on the MAUI platform. +platform: MAUI control: Badge View -documentation: ug +documentation: UG --- @@ -13,11 +13,11 @@ documentation: ug The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) property helps you to customize the basic look and feel of the badge view. -[BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html) contains the sub-elements such as badge types, positions and colors. You can customize the background color, text color, stroke, width, offset, and font attributes. +The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html) contains the sub-elements such as badge types, positions and colors. You can customize various aspects, including background color, text color, stroke, width, offset, and font attributes. -## Font customization +## Font Customization -The font can be customized using the [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontSizeProperty), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAttributesProperty), and [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontFamilyProperty) properties. +Customize the font using the [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontSizeProperty), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAttributesProperty), and [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontFamilyProperty) properties. {% tabs %} @@ -112,7 +112,7 @@ Content = sfBadgeView; ## Text customization -The text color and margin of badge view can be changed using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextColorProperty) and [TextPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextPaddingProperty) properties, respectively. +The text color and margin of the badge view can be changed using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextColorProperty) and [TextPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextPaddingProperty) properties, respectively. {% tabs %} @@ -156,9 +156,9 @@ Content = sfBadgeView; ![.NET MAUI Badge View Text Customization](badge-customization_images/net_maui_badge_notifications_text_customization.png) -## Predefined styles +## Predefined Styles -The colors of the badge can be customized using the [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property of the [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties). The badge supports the following eight different essential colors for various situations: +The colors of the badge can be customized using the [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property of the [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties). The badge supports the following essential colors for different scenarios: * Dark * Error @@ -208,7 +208,7 @@ The colors of the badge can be customized using the [Type](https://help.syncfusi ![.NET MAUI Badge View Types](badge-customization_images/net_maui_badge_notifications_badge_type.png) -## Badge background customization +## Badge Background Customization Other than the predefined styles, the color of the badge can be customized using the [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property of the[BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties) which has to be set as [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeType.html#Syncfusion_Maui_Core_BadgeType_None). Then the color of the badge view can be set using the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Background) property. @@ -253,9 +253,9 @@ Content = sfBadgeView; ![.NET MAUI Badge View Background](badge-customization_images/net_maui_badge_notifications_background_customization.png) -## Setting corner radius of the badge +## Setting Corner Radius of the Badge -The [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_CornerRadius) property is used to reduce the radius of the corners. +The [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_CornerRadius) property reduces the corners' radius. {% tabs %} @@ -298,9 +298,9 @@ Content = sfBadgeView; ![.NET MAUI Badge View Corner Radius](badge-customization_images/net_maui_badge_notifications_corner_radius.png) -## Alignment of badge +## Alignment of Badge -Align the badge view using the Center, Start, and End properties of [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property. +Align the badge view using the Center, Start, and End properties of the [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property. {% tabs %} @@ -345,9 +345,9 @@ Content = sfBadgeView; ![BadgeView Alignment](badge-customization_images/badge_alignment.png) -## Font auto scaling enabled +## Font Auto Scaling Enabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAutoScalingEnabled) property is used to automatically scale the badge text's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false.` +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAutoScalingEnabled) property automatically scales the badge text's font size based on the operating system's text size. The default value is `false`. {% tabs %} @@ -372,9 +372,9 @@ sfBadgeView.BadgeSettings = badgeSetting; {% endtabs %} -## Visibility of badge +## Visibility of Badge -You can show or hide the badges in the .NET MAUI BadgeView by setting the [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_IsVisible) property in the [BadgeSetting](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings). By default, the badge will be visible. +Show or hide the badges in the .NET MAUI Badge View by setting the [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_IsVisible) property in the [BadgeSetting](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings). By default, the badge will be visible. {% tabs %} {% highlight xaml %} diff --git a/MAUI/Badge-View/Getting-Started.md b/MAUI/Badge-View/Getting-Started.md index 51ca59d67b..3a21002a77 100644 --- a/MAUI/Badge-View/Getting-Started.md +++ b/MAUI/Badge-View/Getting-Started.md @@ -1,10 +1,10 @@ --- layout: post title: Getting Started with Syncfusion® Badge View control for .NET MAUI -description: Learn here all about getting started with Syncfusion® .NET MAUI Badge View (SfBadgeView) control its elements and more. -platform: maui +description: Learn all about getting started with the Syncfusion® .NET MAUI Badge View (SfBadgeView) control, its elements, and more. +platform: MAUI control: Badge View -documentation: ug +documentation: UG --- # Getting Started with .NET MAUI Badge View @@ -21,24 +21,24 @@ To quickly get started with the .NET MAUI Badge View, watch this video. ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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.** +2. Name the project and choose a location, then click **Next**. 3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® 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 choose **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. ## 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; @@ -116,16 +116,16 @@ namespace BadgeViewMauiSample ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install the [.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 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 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, type the project name, and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package @@ -134,9 +134,9 @@ Before proceeding, ensure the following are set up: 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`. -## 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; @@ -217,24 +217,24 @@ namespace BadgeViewMauiSample Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install the [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or a later version. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +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 choose **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. If not, Open the Terminal in Rider and manually run: `dotnet restore` +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 +## 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; @@ -310,7 +310,7 @@ namespace BadgeViewMauiSample {% endtabcontents %} -## Adding a badge notification text +## Adding a Badge Notification Text Add text to Badge View using the [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeText) property. @@ -338,7 +338,7 @@ this.Content = badgeView; {% endtabs %} -## Adding a content +## Adding a Content An Image, button, or label or any view can be added to the Badge View using the [Content](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_Content) property.If you need to display a custom icon or image in the badge, ensure the image is included correctly in your project resources. diff --git a/MAUI/Badge-View/Migration.md b/MAUI/Badge-View/Migration.md index da99ff2bdc..5c864c2076 100644 --- a/MAUI/Badge-View/Migration.md +++ b/MAUI/Badge-View/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfBadgeView | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin BadgeView to Syncfusion® .NET MAUI BadgeView control and more. +description: Learn how to migrate from Syncfusion® Xamarin BadgeView to Syncfusion® .NET MAUI BadgeView control and more. platform: MAUI control: SfBadgeView -documentation: ug +documentation: UG --- # Migrating from Xamarin SfBadgeView to .NET MAUI SfBadgeView -To migrate easier from Xamarin SfBadgeView to .NET MAUI SfBadgeView, we kept most of the APIs from Xamarin SfBadgeView in MAUI SfBadgeView. However, to maintain the consistency of API naming in MAUI SfBadgeView, we renamed some of the APIs. The APIs that have been changed in MAUI SfBadgeView from Xamarin SfBadgeView are detailed as follows. +To migrate easier from Xamarin SfBadgeView to .NET MAUI SfBadgeView, we kept most of the APIs from Xamarin SfBadgeView in MAUI SfBadgeView. However, some APIs have been renamed to ensure consistency with MAUI naming conventions. Below are the details of the changes from Xamarin SfBadgeView to .NET MAUI SfBadgeView. ## Namespaces diff --git a/MAUI/Badge-View/Overview.md b/MAUI/Badge-View/Overview.md index 2aeddd801b..3e24eb470e 100644 --- a/MAUI/Badge-View/Overview.md +++ b/MAUI/Badge-View/Overview.md @@ -2,23 +2,23 @@ layout: post title: Overview of Syncfusion® Badge View control for .NET MAUI -description: This section explains the key features and quick overview about Syncfusion® Badge view control for .NET MAUI -platform: maui +description: This section provides a quick overview and explains the key features of the Syncfusion® Badge View control for .NET MAUI. +platform: MAUI control: Badge View -documentation: ug +documentation: UG --- # Overview of .NET MAUI Badge View (SfBadgeView) -Badges are used to notify users of new or unread messages, notifications, or the status of something. +The .NET MAUI Badge View (SfBadgeView) is used to notify users of new or unread messages, notifications, or the status of various events within your application. ## Key features -* **Position** : Position the badge text around the badge content. +* **Position** : Allows positioning of the badge text around the badge content, offering flexibility to display badges effectively. -* **Predefined styles** : Customize the badge background with predefined colors. +* **Predefined styles** : Offers predefined colors to customize the badge background, enhancing the visual appeal. -* **Animation** : Use animations for badge text. +* **Animation** : Enables animations for badge text, adding dynamic visuals to your application's user interface. ![.NET MAUI Badge View Overview](overview_images/net_maui_badge_view_overview.png) \ No newline at end of file diff --git a/MAUI/Badge-View/Position-customization.md b/MAUI/Badge-View/Position-customization.md index 37380a8330..6b012b93ea 100644 --- a/MAUI/Badge-View/Position-customization.md +++ b/MAUI/Badge-View/Position-customization.md @@ -1,10 +1,10 @@ --- layout: post -title: Position customization of Syncfusion® Badge view for .NET MAUI +title: Position Customization of Syncfusion® Badge View for .NET MAUI description: Learn here all about position customization in Syncfusion® .NET MAUI Badge View (SfBadgeView) control and more. -platform: maui +platform: MAUI control: Badge View -documentation: ug +documentation: UG --- # Position customization @@ -52,9 +52,9 @@ Content = sfBadgeView; ![.NET MAUI Badge View Badge Position](badge-position_images/net_maui_badge_view_position.png) -## Setting a badge offset +## Setting a Badge Offset -The badge view x,y position can be adjusted using the [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Offset) property. +The x,y position of the badge view can be adjusted using the [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Offset) property to achieve precise placement. {% tabs %} diff --git a/MAUI/Badge-View/Predefined-symbols.md b/MAUI/Badge-View/Predefined-symbols.md index d803f38d65..7720019920 100644 --- a/MAUI/Badge-View/Predefined-symbols.md +++ b/MAUI/Badge-View/Predefined-symbols.md @@ -1,17 +1,17 @@ --- layout: post -title: Predefined symbols of Syncfusion® Badge view control for .NET MAUI -description: Learn how to set Syncfusion® badge view predefined symbols and types of badge icons in .NET MAUI platform -platform: maui -control: SfBadgeView -documentation: ug +title: Predefined Symbols of Syncfusion® Badge view control for .NET MAUI +description: Learn how to set Syncfusion® badge view predefined symbols and types of badge icons on the .NET MAUI platform. +platform: MAUI +control: Badge View +documentation: UG --- -# Predefined symbols in .NET MAUI Badge View (SfBadgeView) +# Predefined Symbols in .NET MAUI Badge View (SfBadgeView) -The [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) icon has been changed using the `Icon` property. Badge icons will be visible when you do not set the badge text. The badge supports the following types of `Icon`. +The [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) allows you to set badge icons using the `Icon` property. Badge icons will be visible when the badge text is not set. The badge supports the following types of `Icon`: * Add * Available @@ -23,7 +23,7 @@ The [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-v * Prohibit1 * Prohibit2 -N> When both the `Icon` and `BadgeText` are set for badge view, then badge text has a higher priority. The badge text will be rendered in output. +N> When both the `Icon` and `BadgeText` are set for the badge view, the badge text has higher priority and will be rendered in output. {% tabs %} diff --git a/MAUI/Busy-Indicator/AnimationType.md b/MAUI/Busy-Indicator/AnimationType.md index 288d5231da..20deb5f102 100644 --- a/MAUI/Busy-Indicator/AnimationType.md +++ b/MAUI/Busy-Indicator/AnimationType.md @@ -2,20 +2,20 @@ layout: post title: Animation Type in .NET MAUI Busy Indicator control | Syncfusion® description: Learn here all about Animation Type support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator animation type, maui busy indicator animation type, maui busy indicator animation. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI Busy Indicator Animation Type, MAUI Busy Indicator Animation Type, MAUI Busy Indicator Animation. --- # Animation Type in .NET MAUI Busy Indicator (SfBusyIndicator) -## Animation Type in .NET MAUI Busy Indicator +## Overview -The [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property for the .NET MAUI Busy Indicator allows the users to set one of the animations from the built-in animations. The different types of animations are [CircularMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial), [Cupertino](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Cupertino), and [LinearMaterial.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial) +The [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property for the .NET MAUI Busy Indicator allows users to set one of the built-in animations. The different types of animations are [CircularMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial), [Cupertino](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Cupertino), and [LinearMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial). ### Circular Material -The CircularMaterial animation is an one of the built-in animations in [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the animation type as [CircularMaterial.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial) +The CircularMaterial animation is an one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where set the animation type as [CircularMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial). {% tabs %} @@ -45,7 +45,7 @@ The following gif image illustrates the result of the above code. ### Cupertino -The Cupertino animation is an one of the built-in animations in [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the animation type as [Cupertino](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Cupertino). +The Cupertino animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [Cupertino](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Cupertino). {% tabs %} @@ -75,7 +75,7 @@ The following gif image illustrates the result of the above code. ### Linear Material -The LinearMaterial animation is an one of the built-in animations in [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the animation type as [LinearMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial). +The LinearMaterial animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [LinearMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial). {% tabs %} @@ -105,7 +105,7 @@ The following gif image illustrates the result of the above code. ### Single Circle -The SingleCircle animation is an one of the built-in animations in [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the animation type as [SingleCircle.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_SingleCircle) +The SingleCircle animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [SingleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_SingleCircle). {% tabs %} @@ -135,7 +135,7 @@ The following gif image illustrates the result of the above code. ### Double Circle -The DoubleCircle animation is an one of the built-in animations in [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the animation type as [DoubleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_DoubleCircle) +The DoubleCircle animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [DoubleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_DoubleCircle). {% tabs %} @@ -165,7 +165,7 @@ The following gif image illustrates the result of the above code. ### Globe -The Globe animation is one of the built-in animations in [.NET MAUI BusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) as [Globe.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Globe) +The Globe animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) as [Globe](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Globe). {% tabs %} @@ -193,7 +193,7 @@ The following gif image illustrates the result of the above code. ### Horizontal Pulsing Box -The horizontal pulsing box animation is one of the built-in animations in [.NET MAUI BusyIndicator.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) Refer to the following code example. Here, we’ll set the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) as [HorizontalPulsingBox.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_HorizontalPulsingBox) +The horizontal pulsing box animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) as [HorizontalPulsingBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_HorizontalPulsingBox). {% tabs %} diff --git a/MAUI/Busy-Indicator/Duration.md b/MAUI/Busy-Indicator/Duration.md index a501ba47d8..d439e30247 100644 --- a/MAUI/Busy-Indicator/Duration.md +++ b/MAUI/Busy-Indicator/Duration.md @@ -2,16 +2,17 @@ layout: post title: Animation Duration in .NET MAUI Busy Indicator control | Syncfusion® description: Learn here all about Animation Duration support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator duration, maui busy indicator duration. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI Busy Indicator Duration, MAUI Busy Indicator Duration --- + # Animation Duration in .NET MAUI Busy Indicator (SfBusyIndicator) -## Animation Duration in .NET MAUI Busy Indicator +## Overview -The [DurationFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_DurationFactor) property of the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) can be used to set the animation speed based on given value. Setting smaller duration value accelerates animation speed. Its default value is 0.5 and ranges from 0 to 1. +The [DurationFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_DurationFactor) property of the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) is used to set the animation speed depending on a given value. A smaller duration value accelerates the animation speed. The default value is 0.5, and it ranges from 0 to 1. {% tabs %} diff --git a/MAUI/Busy-Indicator/Getting-Started.md b/MAUI/Busy-Indicator/Getting-Started.md index 444df44cfa..d01a73a2ae 100644 --- a/MAUI/Busy-Indicator/Getting-Started.md +++ b/MAUI/Busy-Indicator/Getting-Started.md @@ -2,10 +2,10 @@ layout: post title: Getting Started with .NET MAUI Busy Indicator control | Syncfusion® description: Learn here about getting started with Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control, its elements, and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator, maui busy indicator, .net maui activity indicator, maui activity indicator, .net maui loading indicator, maui loading indicator. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI busy indicator, MAUI busy indicator, .NET MAUI activity indicator, MAUI activity indicator, .NET MAUI loading indicator, MAUI loading indicator. --- # Getting Started with .NET MAUI Busy Indicator @@ -22,14 +22,14 @@ To quickly get started with the .NET MAUI Busy Indicator, watch this video. ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package @@ -37,9 +37,9 @@ Before proceeding, ensure the following are set up: 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. -## 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. +[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; @@ -75,7 +75,7 @@ namespace BusyIndicatorSample 1. To initialize the control, import the Core namespace into your code. -2. Initialize [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) +2. Initialize [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). {% tabs %} @@ -119,16 +119,16 @@ namespace BusyIndicatorSample ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 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, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package @@ -137,9 +137,9 @@ Before proceeding, ensure the following are set up: 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`. -## 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. +[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; @@ -175,7 +175,7 @@ namespace BusyIndicatorSample 1. To initialize the control, import the Core namespace into your code. -2. Initialize [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) +2. Initialize [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). {% tabs %} @@ -222,24 +222,24 @@ namespace BusyIndicatorSample Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +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 choose **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. If not, Open the Terminal in Rider and manually run: `dotnet restore` +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 +## 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/) 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; @@ -275,7 +275,7 @@ namespace BusyIndicatorSample 1. To initialize the control, import the Core namespace into your code. -2. Initialize [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) +2. Initialize [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). {% tabs %} @@ -318,7 +318,7 @@ namespace BusyIndicatorSample ## Setting Animation Type in .NET MAUI Busy Indicator -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides some predefined animation types like Cupertino, LinearMaterial, and CircularMaterial. Users can select any one of the animation types using the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides some predefined animation types like Cupertino, LinearMaterial, and CircularMaterial. Users can select any one of the animation types using the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property. The following example depicts the CircularMaterial type animation of .NET MAUI Busy Indicator. @@ -372,6 +372,6 @@ The following gif image illustrates the result of the above code. ![Circular material in .NET MAUI Busy Indicator.](images/gettingstarted/net-maui-busy-indicator-circular-material.gif){:width="144" height="138" loading="lazy"} -You can find the complete getting started sample of .NET MAUI Busy Indicator from this [link.](https://github.com/SyncfusionExamples/maui-busyindicator-samples) +You can find the complete getting started sample of .NET MAUI Busy Indicator from this [link](https://github.com/SyncfusionExamples/maui-busyindicator-samples). N> You can refer to our [.NET MAUI Busy Indicator](https://www.syncfusion.com/maui-controls/maui-busy-indicator) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Busy Indicator Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/BusyIndicator) that shows you how to render the Busy Indicator in .NET MAUI. diff --git a/MAUI/Busy-Indicator/IndicatorColor.md b/MAUI/Busy-Indicator/IndicatorColor.md index 9b3ccb4edd..244f3b124b 100644 --- a/MAUI/Busy-Indicator/IndicatorColor.md +++ b/MAUI/Busy-Indicator/IndicatorColor.md @@ -1,17 +1,18 @@ --- layout: post -title: Indicator color and Background in Syncfusion® .NET MAUI Busy Indicator. -description: Learn here all about color support in Syncfusion® .NET MAUI Busy Indicator control (SfBusyIndicator) and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator color, maui busy indicator color, maui busy indicator customize. +title: Indicator Color and Background in .NET MAUI Busy Indicator | Syncfusion® +description: Learn here about color support in Syncfusion® .NET MAUI Busy Indicator control (SfBusyIndicator) and more. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI Busy Indicator Color, MAUI Busy Indicator Color, MAUI Busy Indicator Customize. --- -# Indicator color and Background in .NET MAUI Busy Indicator -## Indicator color in .NET MAUI Busy Indicator +# Indicator Color and Background in .NET MAUI Busy Indicator -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides an option to customize the color of the indicator. This can be done using the [IndicatorColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IndicatorColor) property. +## Indicator Color + +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) allows customization of the indicator's color using the [IndicatorColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IndicatorColor) property. {% tabs %} @@ -44,9 +45,9 @@ The following gif image illustrates the result of the above code. ![Indicator Color](Images/IndicatorColor/IndicatorColor.gif) -## Overlay Background in SfBusyIndicator +## Overlay Background -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) provides an option to customize the overlay background. This can be done using the [OverlayFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_OverlayFill) property. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) also provides an option to customize the overlay background using the [OverlayFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_OverlayFill) property. {% tabs %} @@ -82,7 +83,7 @@ The following gif image illustrates the result of the above code. ![Overlay Fill](Images/IndicatorColor/OverlayFillColor.gif) -The [OverlayFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_OverlayFill) property type is `Brush`, so you can set Gradients as background. +The [OverlayFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_OverlayFill) property type is `Brush`, which allows setting gradients as the background. {% tabs %} diff --git a/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md b/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md index c98dc9d3ed..a3d6155f0e 100644 --- a/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md +++ b/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md @@ -2,16 +2,16 @@ layout: post title: Make Busy Animation Idle in .NET MAUI Busy Indicator | Syncfusion® description: Learn here all about Make Busy Animation Idle support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator idle, maui busy indicator idle, maui busy indicator load, maui busy indicator running. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI busy indicator idle, MAUI busy indicator idle, MAUI busy indicator load, MAUI busy indicator running. --- # Make Busy Animation Idle in .NET MAUI Busy Indicator (SfBusyIndicator) ## Make Busy Animation Idle in .NET MAUI Busy Indicator -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) control provides support to determine whether an animation needs to be executed or not. Setting the [IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning) property to false will stop the animation and removes the control from view. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) control provides support to determine if an animation needs to be executed. Setting the [IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning) property to `false` will stop the animation and remove the control from view. {% tabs %} @@ -35,6 +35,6 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() {% endtabs %} -N> The default value is false. +N> The default value for the [IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning) property is `false`. diff --git a/MAUI/Busy-Indicator/Migration.md b/MAUI/Busy-Indicator/Migration.md index 57c2dfa542..da6e1b317d 100644 --- a/MAUI/Busy-Indicator/Migration.md +++ b/MAUI/Busy-Indicator/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfBusyIndicator | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin BusyIndicator to Syncfusion® .NET MAUI BusyIndicator control and more. -platform: maui -control: SfBusyIndicator -documentation: ug +description: Learn here all about migrating from Syncfusion® Xamarin Busy Indicator to Syncfusion® .NET MAUI Busy Indicator control and more. +platform: MAUI +control: Busy Indicator +documentation: UG --- # Migrating from Xamarin SfBusyIndicator to .NET MAUI SfBusyIndicator -To migrate easier from Xamarin SfBusyIndicator to .NET MAUI [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html), we kept most of the APIs from Xamarin SfBusyIndicator in MAUI SfBusyIndicator. However, to maintain the consistency of API naming in MAUI SfBusyIndicator, we renamed some of the APIs. The APIs that have been changed in MAUI SfBusyIndicator from Xamarin SfBusyIndicator are detailed as follows. +To facilitate an easier migration from Xamarin SfBusyIndicator to .NET MAUI [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html), we have retained most of the APIs from Xamarin SfBusyIndicator in the MAUI SfBusyIndicator. However, to maintain the consistency of API naming in the MAUI SfBusyIndicator, some APIs have been renamed. The changes in the MAUI SfBusyIndicator from the Xamarin SfBusyIndicator are detailed as follows. ## Namespaces @@ -32,11 +32,11 @@ To migrate easier from Xamarin SfBusyIndicator to .NET MAUI [SfBusyIndicator](ht {{'[IsBusy](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfBusyIndicator.XForms.SfBusyIndicator.html#Syncfusion_SfBusyIndicator_XForms_SfBusyIndicator_IsBusy)'| markdownify}} {{'[IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning)'| markdownify}} -Gets or sets a value of the IsRunning property in busy indicator. It determines whether the animation of indicator to be shown or not. +Gets or sets the IsRunning property value in the busy indicator. It determines whether the animation of indicator to be shown or not. {{'[Duration](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfBusyIndicator.XForms.SfBusyIndicator.html#Syncfusion_SfBusyIndicator_XForms_SfBusyIndicator_Duration)'| markdownify}} {{'[DurationFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_DurationFactor)'| markdownify}} -Gets or sets the value of the duration property. It is used to change the speed of animation to finish a cycle. +Gets or sets the duration property value. It is used to change the speed of animation to complete a cycle. {{'[ViewBoxWidth](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfBusyIndicator.XForms.SfBusyIndicator.html#Syncfusion_SfBusyIndicator_XForms_SfBusyIndicator_ViewBoxWidth) [ViewBoxHeight](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfBusyIndicator.XForms.SfBusyIndicator.html#Syncfusion_SfBusyIndicator_XForms_SfBusyIndicator_ViewBoxHeight)'| markdownify}} {{'[SizeFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_SizeFactor)'| markdownify}} diff --git a/MAUI/Busy-Indicator/Overview.md b/MAUI/Busy-Indicator/Overview.md index 2141eafd4d..e10bcaa362 100644 --- a/MAUI/Busy-Indicator/Overview.md +++ b/MAUI/Busy-Indicator/Overview.md @@ -1,23 +1,23 @@ --- layout: post title: About .NET MAUI Busy Indicator control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control, its elements and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator, maui busy indicator, maui loading indicator. +description: Learn here all about introduction of the Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control, its elements and more. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI Busy Indicator, MAUI Busy Indicator, MAUI Loading Indicator --- # .NET MAUI Busy Indicator (SfBusyIndicator) Overview -The Busy Indicator control for .NET MAUI provides an indication of the app loading, data processing etc. It can be customized in terms of Indicator size, color, speed and more. +The Busy Indicator control for .NET MAUI provides an indication of app loading, data processing, and more. It can be customized in terms of indicator size, color, speed and additional options. ## Key features -* Comes with three different animation types [Circular Material, Linear Material and Cupertino]. -* Supports customizing the indicator color, and overlay background. -* The animation duration can be customized. -* Size of the indicator can be customized. -* Supports displaying a title with font customizations. +* Offers three different animation types : Circular Material, Linear Material and Cupertino. +* Supports customization of the indicator color and overlay background. +* Allows customization of the animation duration. +* Indicator size can be tailored to your needs. +* Displays a title with customizable font options. ![Overview Image](Images/Overview/Overview.gif) \ No newline at end of file diff --git a/MAUI/Busy-Indicator/Set-Header.md b/MAUI/Busy-Indicator/Set-Header.md index f6f80adfa7..49b164ba6f 100644 --- a/MAUI/Busy-Indicator/Set-Header.md +++ b/MAUI/Busy-Indicator/Set-Header.md @@ -2,20 +2,20 @@ layout: post title: Set Header in .NET MAUI Busy Indicator control | Syncfusion® description: Learn here all about Set Header support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator title, maui busy indicator title, maui busy indicator header, maui busy indicator title placement. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI Busy Indicator Title, MAUI Busy Indicator Title, MAUI Busy Indicator Header, MAUI Busy Indicator Title Placement --- # Set Header in .NET MAUI Busy Indicator (SfBusyIndicator) -## Set Header in .NET MAUI Busy Indicator +## Overview -The Syncfusion® .NET MAUI Busy Indicator provides a feature to display a title with font customizations. +The Syncfusion® .NET MAUI Busy Indicator provides a feature to display a title with customizable fonts. ## Title -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides option to set the text that indicates the information related to loading. This can be done using [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) property. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) allows you to set text that indicates loading-related information using the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) property. {% tabs %} @@ -47,7 +47,7 @@ The following screenshot illustrates the result of the above code. ## Text Color -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides options to change the color of the text. The color of the text can be changed using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TextColor) property. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) allows you to change the color of the title text using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TextColor) property. {% tabs %} @@ -82,7 +82,7 @@ The following screenshot illustrates the result of the above code. ## Title Placement -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides options to set the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) at the top or bottom of the Busy Indicator. The [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) can be set using the [TitlePlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitlePlacement) property. When the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) is not needed, set the [TitlePlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitlePlacement) property of SfBusyIndicator to None. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides options to set the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) at the top or bottom of the Busy Indicator using the [TitlePlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitlePlacement) property. To omit the title, set the [TitlePlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitlePlacement) property to `None`. {% tabs %} @@ -119,7 +119,7 @@ The following screenshot illustrates the result of the above code. ## Title Spacing -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides options to set the space between the indicator and the title. The space can be set using the [TitleSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitleSpacing) property. +You can set the space between the indicator and the title using the [TitleSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitleSpacing) property. {% tabs %} @@ -157,10 +157,9 @@ The following screenshot illustrates the result of the above code. ![Title Spacing](Images/SetHeader/Spacing.png) +## Font Customization -## Font customization - -[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) provides options to customize the title text. The title text can be customized using the [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontSize), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontAttributes), and [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontFamily) properties. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) allows customization of the title text using properties such as [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontSize), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontAttributes), and [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontFamily) properties. {% tabs %} @@ -199,9 +198,9 @@ The following screenshot illustrates the result of the above code. ![Font Customization](Images/SetHeader/Fontattributes.png) -## Font auto scaling enabled +## Font Auto Scaling Enabled -The `FontAutoScalingEnabled` property is used to automatically scale the Busy Indicator's title font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false.` +The `FontAutoScalingEnabled` property automatically scales the Busy Indicator's title font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false`. {% tabs %} @@ -216,7 +215,7 @@ The `FontAutoScalingEnabled` property is used to automatically scale the Busy In SfBusyIndicator busyIndicator = new SfBusyIndicator() { - FontAutoScalingEnabled = true, + FontAutoScalingEnabled = true }; {% endhighlight %} diff --git a/MAUI/Busy-Indicator/Sizing.md b/MAUI/Busy-Indicator/Sizing.md index ad0b30626f..0efe63597d 100644 --- a/MAUI/Busy-Indicator/Sizing.md +++ b/MAUI/Busy-Indicator/Sizing.md @@ -2,16 +2,16 @@ layout: post title: Sizing in .NET MAUI Busy Indicator control | Syncfusion® description: Learn here all about Sizing support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. -platform: maui -control: BusyIndicator -documentation: ug -keywords : .net maui busy indicator size, maui busy indicator size. +platform: MAUI +control: Busy Indicator +documentation: UG +keywords : .NET MAUI Busy Indicator Size, MAUI Busy Indicator Size --- # Sizing in .NET MAUI Busy Indicator (SfBusyIndicator) -## Sizing in .NET MAUI Busy Indicator +## Overview -The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) offers an option to customize the drawing size of the indicator. [SizeFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_SizeFactor) property can be used to set the height and width of the Indicator. Its default value is 0.5 and ranges from 0 to 1. +The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) provides an option to customize the drawing size of the indicator using the [SizeFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_SizeFactor) property. This property sets the height and width of the indicator, with default values of 0.5, and allows a range from 0 to 1. {% tabs %} From c6249b75405f31d59747aaffbb37e777684a3489 Mon Sep 17 00:00:00 2001 From: snehakPV Date: Tue, 20 May 2025 11:13:36 +0530 Subject: [PATCH 2/6] Reviewed the UG content --- MAUI/CheckBox/Events.md | 14 ++--- MAUI/CheckBox/Getting-Started.md | 64 ++++++++++----------- MAUI/CheckBox/Migration.md | 8 +-- MAUI/CheckBox/Overview.md | 12 ++-- MAUI/CheckBox/Visual-Customization.md | 36 ++++++------ MAUI/CheckBox/Visual-States.md | 8 +-- MAUI/Effects-View/Customization.md | 24 ++++---- MAUI/Effects-View/Effects/Combinations.md | 18 +++--- MAUI/Effects-View/Effects/Highlight.md | 6 +- MAUI/Effects-View/Effects/Overview.md | 8 +-- MAUI/Effects-View/Effects/Ripple.md | 6 +- MAUI/Effects-View/Effects/Rotation.md | 8 +-- MAUI/Effects-View/Effects/Scale.md | 8 +-- MAUI/Effects-View/Effects/Selection.md | 8 +-- MAUI/Effects-View/Events.md | 12 ++-- MAUI/Effects-View/Features.md | 6 +- MAUI/Effects-View/Getting-Started.md | 62 +++++++++++---------- MAUI/Effects-View/Interaction.md | 14 ++--- MAUI/Effects-View/Methods.md | 18 +++--- MAUI/Effects-View/Migration.md | 12 ++-- MAUI/Effects-View/Overview.md | 12 ++-- MAUI/Radio-Button/Events.md | 10 ++-- MAUI/Radio-Button/Getting-Started.md | 58 +++++++++---------- MAUI/Radio-Button/Grouping.md | 21 +++---- MAUI/Radio-Button/Migration.md | 6 +- MAUI/Radio-Button/Overview.md | 2 +- MAUI/Radio-Button/Visual-Customization.md | 31 ++++++----- MAUI/Radio-Button/Visual-States.md | 6 +- MAUI/Switch/Events.md | 12 ++-- MAUI/Switch/Getting-Started.md | 68 ++++++++++++----------- MAUI/Switch/Migration.md | 8 +-- MAUI/Switch/Overview.md | 12 ++-- MAUI/Switch/Right-To-Left.md | 12 ++-- MAUI/Switch/Visual-State-Manager.md | 10 ++-- MAUI/Switch/customization.md | 22 ++++---- MAUI/Switch/states.md | 20 +++---- 36 files changed, 336 insertions(+), 326 deletions(-) diff --git a/MAUI/CheckBox/Events.md b/MAUI/CheckBox/Events.md index 0590e1ee39..5ee9939960 100644 --- a/MAUI/CheckBox/Events.md +++ b/MAUI/CheckBox/Events.md @@ -1,19 +1,19 @@ --- layout: post title: Events in .NET MAUI CheckBox Control | Syncfusion® -description: Learn about Event support in Syncfusion® Essential Studio® .NET MAUI CheckBox control, its elements and more. -platform: maui +description: Learn about event support in Syncfusion® Essential Studio® .NET MAUI CheckBox control, its elements, and more. +platform: MAUI control: SfCheckBox -documentation: ug +documentation: UG --- # Events in .NET MAUI CheckBox ## StateChanged event -This event occurs when the value or state of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is changed by touching the check box or setting the value to the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property using XAML or C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html) and expose the following property: +The `StateChanged` event occurs when the value or state of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is altered, either by interacting with the check box or by setting the value programmatically using XAML or C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html), exposing the following property: -* [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : The new value(state) of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property. +* [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : This represents the new state value of the check box. {% tabs %} @@ -59,9 +59,9 @@ private void CheckBox_StateChanged(object sender, Syncfusion.Maui.Buttons.StateC ## StateChanging event -The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is about to change by tapping the CheckBox control. The event arguments are of type `StateChangingEventArgs` and provide the following properties: +The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is about to change by tapping the CheckBox control. The event arguments are of type [`StateChangingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html), providing the following properties: -* [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : The new value(state) of the `IsChecked` property. +* [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : Represents the new state value of the check box. * `Cancel` : Gets or sets a value indicating whether the event should be canceled. {% tabs %} diff --git a/MAUI/CheckBox/Getting-Started.md b/MAUI/CheckBox/Getting-Started.md index e43230106a..3cdd30a9eb 100644 --- a/MAUI/CheckBox/Getting-Started.md +++ b/MAUI/CheckBox/Getting-Started.md @@ -1,10 +1,10 @@ --- layout: post title: Getting Started with .NET MAUI CheckBox | Syncfusion® -description: Learn here about getting started with Syncfusion® .NET MAUI CheckBox (SfCheckBox) control, its elements and more. -platform: maui -control: CheckBox -documentation: ug +description: Learn about setting up and configuring the Syncfusion® .NET MAUI CheckBox (SfCheckBox) control, its elements, and more. +platform: MAUI +control: SfCheckBox +documentation: UG --- # Getting Started with .NET MAUI CheckBox @@ -21,24 +21,24 @@ To quickly get started with the .NET MAUI CheckBox, watch this video. ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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/) 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® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} @@ -113,16 +113,16 @@ namespace CheckBoxGettingStarted ## Prerequisites Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 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, type the project name, and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package @@ -133,7 +133,7 @@ Before proceeding, ensure the following are set up: ## Step 3: Register the handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) 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® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} @@ -211,24 +211,24 @@ namespace CheckBoxGettingStarted Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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` +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 +## Step 3: Register the Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) 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® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} @@ -302,7 +302,7 @@ namespace CheckBoxGettingStarted ## Set the CheckBox caption -You can set the caption of the CheckBox using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property.This caption typically describes the meaning of the check box and is displayed next to the check box. +You can set the caption of the CheckBox using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the check box and is displayed next to it. {% tabs %} {% highlight xaml %} @@ -322,7 +322,7 @@ You can set the caption of the CheckBox using the [Text](https://help.syncfusion ![.NET MAUI CheckBox](Images/Getting-Started/simplecheckbox.png) -## Change the check box state +## Change the CheckBox State The three visual states of [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) are: @@ -332,7 +332,7 @@ The three visual states of [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Sy ![.NET MAUI CheckBox](Images/Getting-Started/tristate.png) -You can change the state of the check box using the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). In the checked state, a tick mark is added to the visualization of the check box. +You can change the state of the checkbox using the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property of the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). In the checked state, a tick mark is added to the visualization of the checkbox. @@ -381,9 +381,9 @@ null
-N> For the check box, to report the indeterminate state, set the [`IsThreeState`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property to true. +N> To report the indeterminate state for the checkbox, set the [`IsThreeState`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property to true. -The check box can be used as a single or as a group. A single check box mostly used for a binary yes/no choice, such as "Remember me?", login scenario, or a terms of service agreement. +The checkbox can be used as a single or as a group. A single check box is mostly used for a binary yes/no choice, such as "Remember me?", login scenario, or a terms of service agreement. {% tabs %} {% highlight xaml %} @@ -404,7 +404,7 @@ The check box can be used as a single or as a group. A single check box mostly u ![.NET MAUI CheckBox](Images/Getting-Started/termsandconditions.png) -Multiple checkboxes can be used as a group for multi-select scenarios in which a user selects one or more items from the choices that are not mutually exclusive. +Multiple checkboxes can be used as a group for multi-select scenarios where a user selects one or more items from the choices that are not mutually exclusive. {% tabs %} {% highlight xaml %} @@ -448,9 +448,9 @@ Multiple checkboxes can be used as a group for multi-select scenarios in which a ## Intermediate -The [SfCheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) allows an Intermediate state in addition to the checked and unchecked state. The Intermediate state of the check box is enabled by setting the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property of the control to `True`. +The [SfCheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) allows an Intermediate state in addition to the checked and unchecked state. The Intermediate state is enabled by setting the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property of the control to `True`. -N> When the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property is set to `False` and [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is set to `null` then the check box will be in unchecked state. +N> When the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property is set to `False` and [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is set to `null`, the checkbox will be in unchecked state. The Intermediate state is used when a group of sub-choices has both checked and unchecked states. In the following example, the "Select all" checkbox has the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property set to `true`. The "Select all" checkbox is checked if all child elements are checked, unchecked if all the child elements are unchecked, and Intermediate otherwise. @@ -544,7 +544,7 @@ The Intermediate state is used when a group of sub-choices has both checked and ![.NET MAUI CheckBox](Images/Getting-Started/selectalltoppings.png) -You can find the complete getting started sample of the .NET MAUI CheckBox from this [link.](https://github.com/SyncfusionExamples/maui-checkbox-samples) +You can find the complete getting started sample of the .NET MAUI CheckBox from this [link](https://github.com/SyncfusionExamples/maui-checkbox-samples). ## See also diff --git a/MAUI/CheckBox/Migration.md b/MAUI/CheckBox/Migration.md index 74a80048c0..f75626ac09 100644 --- a/MAUI/CheckBox/Migration.md +++ b/MAUI/CheckBox/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI CheckBox | Syncfusion® -description: Learn all about Migrating from Syncfusion® Xamarin CheckBox to Syncfusion® .NET MAUI CheckBox control and more here. -platform: maui +description: Learn all about Migrating from Syncfusion® Xamarin CheckBox to Syncfusion® .NET MAUI CheckBox control and more. +platform: MAUI control: SfCheckBox -documentation: ug +documentation: UG --- # Migrating from Xamarin SfCheckBox to .NET MAUI SfCheckBox -To migrate easier from Xamarin CheckBox to [.NET MAUI CheckBox](https://www.syncfusion.com/maui-controls/maui-checkbox), we kept most of the APIs from Xamarin SfCheckBox in MAUI SfCheckBox. However, to maintain the consistency of API naming in MAUI SfCheckBox, we renamed some of the APIs. The APIs changed in MAUI SfCheckBox from Xamarin SfCheckBox are detailed as follows: +To facilitate the migration from Xamarin CheckBox to [.NET MAUI CheckBox](https://www.syncfusion.com/maui-controls/maui-checkbox), we have retained most of the APIs from Xamarin SfCheckBox in the MAUI SfCheckBox. However, to ensure consistency in API naming, some APIs have been renamed. The changes in the MAUI SfCheckBox from Xamarin SfCheckBox are detailed below: ## Namespaces diff --git a/MAUI/CheckBox/Overview.md b/MAUI/CheckBox/Overview.md index 3a1b14eec5..374068e58d 100644 --- a/MAUI/CheckBox/Overview.md +++ b/MAUI/CheckBox/Overview.md @@ -1,19 +1,19 @@ --- layout: post title: Overview | .NET MAUI CheckBox | Syncfusion® -platform: maui -description: Learn here about overall key features in Essential Studio® for .NET MAUI SfCheckBox Control, its elements, and more. -control: SfChekBox +platform: MAUI +description: Learn about the key features in Essential Studio® for .NET MAUI CheckBox Control, its elements, and more. +control: SfCheckBox --- # Overview of .NET MAUI CheckBox (SfCheckBox) -The [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) is a selection control with UI customization. It allows you to choose one or more options from a set and customize the appearance for different visual states using the visual state manager. +The [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) is a selection control with UI customization features. It allows you to choose one or more options from a set and customize the appearance for different visual states using the Visual State Manager. ## Key features * Supports three states. - * Allow users to select and clear the control by tapping. - * Supports check box color, shape and label text customization. + * Allows users to select and clear the control by tapping. + * Offers customization options for checkbox color, shape, and label text. ![Overview image of SfCheckBox](Images/Getting-Started/overviewimage.jpg) \ No newline at end of file diff --git a/MAUI/CheckBox/Visual-Customization.md b/MAUI/CheckBox/Visual-Customization.md index 4d9e4ab58e..8c689ea409 100644 --- a/MAUI/CheckBox/Visual-Customization.md +++ b/MAUI/CheckBox/Visual-Customization.md @@ -1,17 +1,17 @@ --- layout: post title: Customization in .NET MAUI CheckBox Control | Syncfusion® -description: Learn about Customization support in Syncfusion® Essential Studio® .NET MAUI CheckBox control, its elements and more. -platform: maui +description: Learn about Customization support in Syncfusion® Essential Studio® .NET MAUI CheckBox control, its elements, and more. +platform: MAUI control: SfCheckBox -documentation: ug +documentation: UG --- # Visual Customization in .NET MAUI CheckBox (SfCheckBox) ## Customizing a shape -The check box shape can be customized using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_CornerRadius) property. This property specifies a uniform radius value for every corner of the check box. +The shape of the checkbox can be customized using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_CornerRadius) property. This property specifies a uniform radius value for every corner of the checkbox. {% tabs %} {% highlight xaml %} @@ -32,9 +32,9 @@ The check box shape can be customized using the [CornerRadius](https://help.sync ![.NET MAUI CheckBox](Images/Visual-Customization/checkboxradii.png) -## Customizing a state color +## Customizing State Colors -The default state colors can be customized using the [`CheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_CheckedColor) and [`UncheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_UncheckedColor) properties. The checked or indeterminate state color is updated to the value of the [`CheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_CheckedColor) property when the state is changed to checked or indeterminate. The unchecked state color is updated to the value of the [`UncheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_UncheckedColor) property when the state is changed to unchecked. +You can customize the state colors using the [`CheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_CheckedColor) and [`UncheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_UncheckedColor) properties. The checked or indeterminate state color is updated based on the [`CheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_CheckedColor) property, while the color for the unchecked state is based on the [`UncheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_UncheckedColor) property. {% tabs %} {% highlight xaml %} @@ -71,9 +71,9 @@ The default state colors can be customized using the [`CheckedColor`](https://he ![.NET MAUI CheckBox](Images/Visual-Customization/statecolor.png) -## StrokeThickness +## Stroke Thickness -The tick box stroke thickness of the checkbox control can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_StrokeThickness) property. +The stroke thickness of the checkbox can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_StrokeThickness) property. {% tabs %} {% highlight xaml %} @@ -113,9 +113,9 @@ The tick box stroke thickness of the checkbox control can be customized using th ![.NET MAUI CheckBox](Images/Visual-Customization/strokethickness.png) -## Setting a caption text appearance +## Setting a Caption Text Appearance -You can customize the display text appearance of the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control using the following properties: +You can customize the appearance of the text in the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control using the following properties: * [`TextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_TextColor) : Changes the color of the text. * [`HorizontalTextAlignment`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_HorizontalTextAlignment) : Changes the horizontal alignment of the caption text. @@ -204,7 +204,7 @@ The [`TickColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.Sf ## LineBreakMode -The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is NoWrap. The following other options are available in [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_LineBreakMode): +The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_LineBreakMode) property allows you to wrap or truncate the text. The default value is NoWrap, with other options available such as: * `NoWrap` - Avoids the text wrap. * `WordWrap` - Wraps the text by words. @@ -242,7 +242,7 @@ This demo can be downloaded from [GitHub link](https://github.com/SyncfusionExam ## Size Customization -The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ControlSize) property is used to customize the [`CheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control size. +The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ControlSize) property is used to customize the size of the [`CheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. {% tabs %} {% highlight xaml %} @@ -264,9 +264,9 @@ The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons. {% endhighlight %} {% endtabs %} -## Font auto scaling enabled +## Font Auto Scaling Enabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_FontAutoScalingEnabled) property is used to automatically scale the Check box's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false.` +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_FontAutoScalingEnabled) property automatically scales the Checkbox's font size based on the operating system's text size. The default value is `false`. {% tabs %} {% highlight xaml %} @@ -283,8 +283,8 @@ sfCheckBox.FontAutoScalingEnabled = true; {% endhighlight %} {% endtabs %} -## Enable animation -The [EnabledAnimation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_EnabledAnimation) property is used to enable or disable the animation for the [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. By default, this property is set to `true`, which means animations are enabled. +## Enable Animation +The [EnabledAnimation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_EnabledAnimation) property enables or disables the animation for the [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. By default, animations are enabled (`true`). {% tabs %} {% highlight xaml %} @@ -303,8 +303,8 @@ SfCheckBox checkBox = new SfCheckBox {% endhighlight %} {% endtabs %} -## Content spacing -The [ContentSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ContentSpacing) property is used to adjust the content spacing in the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. +## Content Spacing +The [ContentSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ContentSpacing) property adjusts the content spacing in the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. {% tabs %} {% highlight xaml %} diff --git a/MAUI/CheckBox/Visual-States.md b/MAUI/CheckBox/Visual-States.md index f9895d5c87..8205e67144 100644 --- a/MAUI/CheckBox/Visual-States.md +++ b/MAUI/CheckBox/Visual-States.md @@ -1,15 +1,15 @@ --- layout: post title: Visual States in .NET MAUI CheckBox Control | Syncfusion® -description: Learn here all about Visual States support in Syncfusion® MAUI CheckBox (SfCheckBox) control and more. -platform: maui +description: Learn about Visual States support in Syncfusion® MAUI CheckBox (SfCheckBox) control and more. +platform: MAUI control: SfCheckBox -documentation: ug +documentation: UG --- # Visual States in .NET MAUI CheckBox (SfCheckBox) -The visual of the CheckBox can be customized using `VisualStates`. The [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control contains the following three visual states: +The visual appearance of the CheckBox can be customized using `VisualStates`. The [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control includes the following three visual states: * Checked * Unchecked diff --git a/MAUI/Effects-View/Customization.md b/MAUI/Effects-View/Customization.md index 59590d194a..a081daf587 100644 --- a/MAUI/Effects-View/Customization.md +++ b/MAUI/Effects-View/Customization.md @@ -2,18 +2,18 @@ layout: post title: Customization in .NET MAUI Effects View control | Syncfusion® description: Learn here all about Customization support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Customization in .NET MAUI Effects View (SfEffectsView) -The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) control provides support to customize the animation duration, color, and more. This section explains how to customize the effects view control. +The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) control provides support to customize animation duration, color, and more. This section explains how to customize the effects view control. ## RippleAnimationDuration -The [RippleAnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RippleAnimationDuration) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) is used to customize the duration of ripple animation. +The [RippleAnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RippleAnimationDuration) property is used to customize the duration of ripple animation. {% tabs %} @@ -37,7 +37,7 @@ var effectsView = new SfEffectsView() ## ScaleAnimationDuration -The [ScaleAnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ScaleAnimationDuration) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) is used to customize the duration of scale animation. +The [ScaleAnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ScaleAnimationDuration) property is used to customize the duration of scale animation. {% tabs %} @@ -66,7 +66,7 @@ var effectsView = new SfEffectsView() ## RotationAnimationDuration -The [RotationAnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RotationAnimationDuration) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) is used to customize the duration of rotation animation. +The [RotationAnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RotationAnimationDuration) property is used to customize the duration of rotation animation. {% tabs %} @@ -95,7 +95,7 @@ var effectsView = new SfEffectsView() ## InitialRippleFactor -The [InitialRippleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_InitialRippleFactor) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to customize the radius of the ripple when ripple animation starts. +The [InitialRippleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_InitialRippleFactor) property is used to customize the radius of the ripple when the ripple animation starts. {% tabs %} @@ -121,7 +121,7 @@ var effectsView = new SfEffectsView ## ScaleFactor -The [ScaleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ScaleFactor) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to customize the scale of the view. +The [ScaleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ScaleFactor) property is used to customize the scale of the view. {% tabs %} @@ -154,7 +154,7 @@ var effectsView = new SfEffectsView ## HighlightBackground -The [HighlightBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_HighlightBackground) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to customize the color of highlight effect. +The [HighlightBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_HighlightBackground) property is used to customize the color of the highlight effect. {% tabs %} @@ -183,7 +183,7 @@ var effectsView = new SfEffectsView ## RippleBackground -The [RippleBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RippleBackground) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to customize the color of ripple. +The [RippleBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RippleBackground) property is used to customize the color of the ripple. {% tabs %} @@ -209,7 +209,7 @@ var effectsView = new SfEffectsView ## SelectionBackground -The [SelectionBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_SelectionBackground) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to customize the color of selection effect. +The [SelectionBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_SelectionBackground) property is used to customize the color of selection effect. {% tabs %} @@ -238,7 +238,7 @@ var effectsView = new SfEffectsView ## Angle -The [Angle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Angle) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) is used to customize the rotation angle. +The [Angle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Angle) property is used to customize the rotation angle. {% tabs %} diff --git a/MAUI/Effects-View/Effects/Combinations.md b/MAUI/Effects-View/Effects/Combinations.md index 221510de90..98b6b16dbb 100644 --- a/MAUI/Effects-View/Effects/Combinations.md +++ b/MAUI/Effects-View/Effects/Combinations.md @@ -1,17 +1,17 @@ --- layout: post title: The .NET MAUI Combination Effects | Effects View control | Syncfusion® -description: Learn here all about the combination of effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn all about the combination of effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Combination of Effects -The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control provides support to apply multiple [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) in combination. The following are some valid combinations of [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html): +The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control supports applying multiple [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) in combination. Below are some valid combinations of [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html): -## Highlight and ripple +## Highlight and Ripple {% tabs %} @@ -33,7 +33,7 @@ var effectsView = new SfEffectsView() {% endtabs %} -## Highlight and selection +## Highlight and Selection {% tabs %} @@ -58,7 +58,7 @@ var effectsView = new SfEffectsView() {% endtabs %} -## Ripple and selection +## Ripple and Selection {% tabs %} @@ -83,7 +83,7 @@ var effectsView = new SfEffectsView() {% endtabs %} -## Highlight, ripple, and selection +## Highlight, Ripple, and Selection {% tabs %} @@ -108,7 +108,7 @@ var effectsView = new SfEffectsView() {% endtabs %} -## Scale and selection +## Scale and Selection {% tabs %} diff --git a/MAUI/Effects-View/Effects/Highlight.md b/MAUI/Effects-View/Effects/Highlight.md index b926d40d9f..dc72771e5e 100644 --- a/MAUI/Effects-View/Effects/Highlight.md +++ b/MAUI/Effects-View/Effects/Highlight.md @@ -2,14 +2,14 @@ layout: post title: The .NET MAUI Highlight Effects | Effects View control | Syncfusion® description: Learn here all about highlight effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Highlight Effect in .NET MAUI Effects View (SfEffectsView) -[SfEffects.Highlight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Highlight) is a smooth transition on the background color of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) +The [SfEffects.Highlight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Highlight) provides a smooth transition on the background color of the [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html). {% tabs %} diff --git a/MAUI/Effects-View/Effects/Overview.md b/MAUI/Effects-View/Effects/Overview.md index ac29531c4c..c709ded18b 100644 --- a/MAUI/Effects-View/Effects/Overview.md +++ b/MAUI/Effects-View/Effects/Overview.md @@ -1,12 +1,12 @@ --- layout: post title: The .NET MAUI Effects View control | Syncfusion® -description: Learn here all about Effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn all about effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Effects in .NET MAUI Effects View (SfEffectsView) -The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control provides modern effects such as highlight, ripple, selection, scaling, and rotation. This section explains about these effects. \ No newline at end of file +The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control provides modern effects such as highlight, ripple, selection, scaling, and rotation. This section explains these effects in detail. \ No newline at end of file diff --git a/MAUI/Effects-View/Effects/Ripple.md b/MAUI/Effects-View/Effects/Ripple.md index 50a3b04707..e13fe0abcd 100644 --- a/MAUI/Effects-View/Effects/Ripple.md +++ b/MAUI/Effects-View/Effects/Ripple.md @@ -2,14 +2,14 @@ layout: post title: The .NET MAUI Ripple Effects | Effects View control | Syncfusion® description: Learn here all about ripple effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Ripple Effect in .NET MAUI Effects View (SfEffectsView) -The [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) is a expandable circle, which is initially placed on the tapped location, and it grows till the whole layout is filled. [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) is rendered based on [InitialRippleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_InitialRippleFactor). +The [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) effect is an expandable circle that is initially placed at the tapped location and grows until the whole layout is filled. The effect is rendered based on the [InitialRippleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_InitialRippleFactor). {% tabs %} diff --git a/MAUI/Effects-View/Effects/Rotation.md b/MAUI/Effects-View/Effects/Rotation.md index 7b45fac6fb..83a63fb9c9 100644 --- a/MAUI/Effects-View/Effects/Rotation.md +++ b/MAUI/Effects-View/Effects/Rotation.md @@ -1,15 +1,15 @@ --- layout: post title: The .NET MAUI Rotate Animation | Effects View control | Syncfusion® -description: Learn here all about rotation effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn all about rotation effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Rotation Effect in .NET MAUI Effects View (SfEffectsView) -[SfEffects.Rotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Rotation) provides a circular movement to [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) around the center of the [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) based on the specified [Angle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Angle). +The [SfEffects.Rotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Rotation) provides a circular movement to the [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) around its center, based on the specified [Angle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Angle). {% tabs %} diff --git a/MAUI/Effects-View/Effects/Scale.md b/MAUI/Effects-View/Effects/Scale.md index 70c3b0ab79..16e0d440c9 100644 --- a/MAUI/Effects-View/Effects/Scale.md +++ b/MAUI/Effects-View/Effects/Scale.md @@ -1,15 +1,15 @@ --- layout: post title: The .NET MAUI Scale Animation | Effects View control | Syncfusion® -description: Learn here all about scale effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn all about scale effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Scale Effect in .NET MAUI Effects View (SfEffectsView) -[SfEffects.Scale](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Scale) is a smooth transition on the size of the [SfEffectsView.Content](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Content) from its actual size to the size calculated based on [ScaleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ScaleFactor) in pixels. +The [SfEffects.Scale](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Scale) provides a smooth transition in the size of the [SfEffectsView.Content](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Content), adjusting from its actual size to a new size based on the [ScaleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ScaleFactor) specified in pixels. {% tabs %} diff --git a/MAUI/Effects-View/Effects/Selection.md b/MAUI/Effects-View/Effects/Selection.md index ad9f81ba0b..322fbcfb9b 100644 --- a/MAUI/Effects-View/Effects/Selection.md +++ b/MAUI/Effects-View/Effects/Selection.md @@ -1,15 +1,15 @@ --- layout: post title: The .NET MAUI Selection Effects | Effects View control | Syncfusion® -description: Learn here all about selection effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn all about selection effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Selection Effect in .NET MAUI Effects View (SfEffectsView) -[SfEffects.Selection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Selection) is a smooth color transition to indicate whether the [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) state is selected or not. +The [SfEffects.Selection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Selection) provides a smooth color transition to indicate whether the [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) state is selected or not. {% tabs %} diff --git a/MAUI/Effects-View/Events.md b/MAUI/Effects-View/Events.md index 77cf7fa22a..2581e178a3 100644 --- a/MAUI/Effects-View/Events.md +++ b/MAUI/Effects-View/Events.md @@ -1,10 +1,10 @@ --- layout: post title: Events in .NET MAUI Effects View control | Syncfusion® -description: Learn here all about Events support in Syncfusion® .NET Effects View (SfEffectsView) control and more. -platform: Maui +description: Learn here all about events support in Syncfusion® .NET Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Events in .NET MAUI Effects View (SfEffectsView) @@ -26,8 +26,8 @@ The [AnimationCompleted](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cor {% highlight C# %} - public partial class MainPage : ContentPage - { +public partial class MainPage : ContentPage +{ public MainPage() { @@ -45,7 +45,7 @@ The [AnimationCompleted](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cor { ... } - } +} {% endhighlight %} diff --git a/MAUI/Effects-View/Features.md b/MAUI/Effects-View/Features.md index 7fb3874f01..23fe431848 100644 --- a/MAUI/Effects-View/Features.md +++ b/MAUI/Effects-View/Features.md @@ -2,9 +2,9 @@ layout: post title: Features in .NET MAUI Effects View control | Syncfusion® description: Learn here all about Features support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Features in .NET MAUI Effects View (SfEffectsView) @@ -13,7 +13,7 @@ The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfE ## FadeOutRipple -By enabling the [FadeOutRipple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_FadeOutRipple) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html), the expandable circle will lose its opacity to 0 on growing. +By enabling the [FadeOutRipple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_FadeOutRipple) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html), the expandable circle will lose its opacity to 0 as it grows. {% tabs %} diff --git a/MAUI/Effects-View/Getting-Started.md b/MAUI/Effects-View/Getting-Started.md index 0d2166815f..4fa3405013 100644 --- a/MAUI/Effects-View/Getting-Started.md +++ b/MAUI/Effects-View/Getting-Started.md @@ -1,17 +1,17 @@ --- layout: post title: Getting Started with .NET MAUI Effects View control | Syncfusion® -description: Learn here about getting started with Syncfusion® .NET MAUI Effects View (SfEffectsView) control, its elements and more. -platform: maui +description: Learn here about getting started with Syncfusion® .NET MAUI Effects View (SfEffectsView) control, its elements, and more. +platform: MAUI control: Effects View -documentation: ug +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 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Getting Started with .NET MAUI Effects View -This section guides you through setting up and configuring a [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) to your project. +This section guides you through setting up and configuring the [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) to your project. To quickly get started with the .NET MAUI Effects View, watch this video. @@ -21,26 +21,27 @@ To quickly get started with the .NET MAUI Effects View, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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.** +2. Name the project, choose a location, then 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 choose **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 +## 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 dependency 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; @@ -75,7 +76,7 @@ namespace EffectsViewMauiSample 1. To initialize the control, import the Core namespace into your code. -2. Initialize [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) +2. Initialize [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1). {% tabs %} @@ -118,18 +119,19 @@ namespace EffectsViewMauiSample {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 enter. +1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project**, then 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, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Core NuGet Package @@ -138,9 +140,9 @@ Before proceeding, ensure the following are set up: 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`. -## 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 dependency 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; @@ -175,7 +177,7 @@ namespace EffectsViewMauiSample 1. To initialize the control, import the Core namespace into your code. -2. Initialize [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) +2. Initialize [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1). {% tabs %} @@ -223,24 +225,24 @@ namespace EffectsViewMauiSample Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +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 choose **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. If not, Open the Terminal in Rider and manually run: `dotnet restore` +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 +## 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 dependency 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; @@ -275,7 +277,7 @@ namespace EffectsViewMauiSample 1. To initialize the control, import the Core namespace into your code. -2. Initialize [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) +2. Initialize [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1). {% tabs %} diff --git a/MAUI/Effects-View/Interaction.md b/MAUI/Effects-View/Interaction.md index 296e31165a..566f72253f 100644 --- a/MAUI/Effects-View/Interaction.md +++ b/MAUI/Effects-View/Interaction.md @@ -1,19 +1,19 @@ --- layout: post title: Interaction in .NET MAUI Effects View control | Syncfusion® -description: Learn here all about Interaction support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn here all about interaction support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Interaction in .NET MAUI Effects View (SfEffectsView) -Effects can be set on different interactions. This section explains how to set effects on different interactions available in effects view. +The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control supports various interactions through its properties. This section explains how to set effects on different interactions available in the Effects View. ## TouchDownEffects -The [TouchDownEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_TouchDownEffects) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to render the effects in touch-down interaction. +The [TouchDownEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_TouchDownEffects) property is used to render effects during a touch-down interaction. {% tabs %} @@ -37,7 +37,7 @@ var effectsView = new SfEffectsView ## LongPressEffects -The [LongPressEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_LongPressEffects) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to render the effects in long-press interaction. +The [LongPressEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_LongPressEffects) property is used to render effects during a long-press interaction. {% tabs %} @@ -61,7 +61,7 @@ var effectsView = new SfEffectsView ## TouchUpEffects -The [TouchUpEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_TouchUpEffects) property of [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) is used to render the effects in touch-up interaction. +The [TouchUpEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_TouchUpEffects) property is used to render effects during a touch-up interaction. {% tabs %} diff --git a/MAUI/Effects-View/Methods.md b/MAUI/Effects-View/Methods.md index 809d116795..73a1d84bab 100644 --- a/MAUI/Effects-View/Methods.md +++ b/MAUI/Effects-View/Methods.md @@ -1,26 +1,26 @@ --- layout: post title: Methods in .NET MAUI Effects View control | Syncfusion® -description: Learn here all about Methods support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. -platform: maui +description: Learn here all about methods support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +platform: MAUI control: Effects View -documentation: ug +documentation: UG --- # Methods in .NET MAUI Effects View (SfEffectsView) -Effects can be applied and removed programmatically using the [ApplyEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ApplyEffects_Syncfusion_Maui_Core_SfEffects_Syncfusion_Maui_Core_RippleStartPosition_System_Nullable_System_Drawing_Point__System_Boolean_) or [Reset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Reset) method. +Effects can be applied and removed programmatically using the [ApplyEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ApplyEffects_Syncfusion_Maui_Core_SfEffects_Syncfusion_Maui_Core_RippleStartPosition_System_Nullable_System_Drawing_Point__System_Boolean_) or [Reset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_Reset) methods. ## ApplyEffects -The [ApplyEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ApplyEffects_Syncfusion_Maui_Core_SfEffects_Syncfusion_Maui_Core_RippleStartPosition_System_Nullable_System_Drawing_Point__System_Boolean_) method is used to trigger the effects rendering with or without repetition. The following are the optional parameters to be passed: +The [ApplyEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ApplyEffects_Syncfusion_Maui_Core_SfEffects_Syncfusion_Maui_Core_RippleStartPosition_System_Nullable_System_Drawing_Point__System_Boolean_) method triggers effects rendering with or without repetition. The following are the optional parameters: * `effects` - [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) to be applied. By default, [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) will be applied. -* `rippleStartPosition` - [RippleStartPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.RippleStartPosition.html) can be left, top, right, bottom, top left, top right, bottom left, bottom right or default. By default, ripple starts from the center. -* `rippleStartPoint` - point at which ripple animation starts. The default value is null. -* `repeat` - bool value used to set whether to repeat the applied effect. The default value is false. Only [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) can be repeated. +* `rippleStartPosition` - [RippleStartPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.RippleStartPosition.html) can be left, top, right, bottom, top left, top right, bottom left, bottom right or default. By default, the ripple starts from the center. +* `rippleStartPoint` - Point at which ripple animation starts. The default value is null. +* `repeat` - Boolean value used to set whether to repeat the applied effect. The default value is false. Only [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) can be repeated. -N> The [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) applied using [ApplyEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ApplyEffects_Syncfusion_Maui_Core_SfEffects_Syncfusion_Maui_Core_RippleStartPosition_System_Nullable_System_Drawing_Point__System_Boolean_) method will not be removed automatically. +N> The [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) applied using the [ApplyEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_ApplyEffects_Syncfusion_Maui_Core_SfEffects_Syncfusion_Maui_Core_RippleStartPosition_System_Nullable_System_Drawing_Point__System_Boolean_) method will not be removed automatically. ## Reset diff --git a/MAUI/Effects-View/Migration.md b/MAUI/Effects-View/Migration.md index 9296a67ba9..8aa4057647 100644 --- a/MAUI/Effects-View/Migration.md +++ b/MAUI/Effects-View/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfEffectsView | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin EffectsView to Syncfusion® .NET MAUI EffectsView control and more. +description: Learn here all about Migrating from Syncfusion® Xamarin Effects View to Syncfusion® .NET MAUI Effects View control and more. platform: MAUI -control: SfEffectsView -documentation: ug +control: Effects View +documentation: UG --- # Migrating from Xamarin SfEffectsView to .NET MAUI SfEffectsView -To migrate easier from Xamarin SfEffectsView to .NET MAUI SfEffectsView, we kept most of the APIs from Xamarin SfEffectsView in MAUI SfEffectsView. However, to maintain the consistency of API naming in MAUI SfEffectsView, we renamed some of the APIs. The APIs that have been changed in MAUI SfEffectsView from Xamarin SfEffectsView are detailed as follows. +To ease the migration from Xamarin SfEffectsView to .NET MAUI SfEffectsView, most APIs from Xamarin SfEffectsView have been retained in MAUI SfEffectsView. However, to maintain API naming consistency in MAUI SfEffectsView, some APIs have been renamed. The changes in MAUI SfEffectsView from Xamarin SfEffectsView are detailed as follows. ## Namespaces @@ -32,7 +32,7 @@ To migrate easier from Xamarin SfEffectsView to .NET MAUI SfEffectsView, we kept {{'[AutoResetEffect](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.EffectsView.SfEffectsView.html#Syncfusion_XForms_EffectsView_SfEffectsView_AutoResetEffect)'| markdownify }} {{'[AutoResetEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_AutoResetEffects)'| markdownify }} -Gets or sets the effect that was start rendering on touch down and start removing on touch up in Android and UWP platforms. +Gets or sets the effect that starts rendering on touch down and starts removing on touch up in Android and UWP platforms. {{'[HighlightColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.EffectsView.SfEffectsView.html#Syncfusion_XForms_EffectsView_SfEffectsView_HighlightColor)'| markdownify }} {{'[HighlightBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_HighlightBackground)'| markdownify }} @@ -44,7 +44,7 @@ To migrate easier from Xamarin SfEffectsView to .NET MAUI SfEffectsView, we kept {{'[SelectionColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.EffectsView.SfEffectsView.html#Syncfusion_XForms_EffectsView_SfEffectsView_SelectionColor)' | markdownify }} {{'[SelectionBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_SelectionBackground)'| markdownify }} -Gets or sets the brush applied when the view is on selected state. +Gets or sets the brush applied when the view is in the selected state. ## Enums diff --git a/MAUI/Effects-View/Overview.md b/MAUI/Effects-View/Overview.md index f05f75ecba..59daeefe82 100644 --- a/MAUI/Effects-View/Overview.md +++ b/MAUI/Effects-View/Overview.md @@ -1,20 +1,20 @@ --- layout: post title: About .NET MAUI Effects View control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Effects View (SfEffectsView) control, its elements and more. -platform: maui +description: Learn here about the introduction of Syncfusion® .NET MAUI Effects View (SfEffectsView) control, its elements, and more. +platform: MAUI control: Effects View -documentation: ug +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 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # .NET MAUI Effects View (SfEffectsView) Overview -The Effects View is a container control that provides modern effects like ripple, selection, scaling, and rotation. Users can render these effects using the touch interactions such as touch down, touch up, long press, and also by calling the APIs. +The Effects View is a container control that provides modern effects such as ripple, selection, scaling, and rotation. Users can render these effects through touch interactions like touch down, touch up, long press, and by utilizing the available APIs. ## Key features * Supports highlight and ripple animations. -* Supports selection effect with built-in support for notifications during selection state changes. +* Includes selection effects with built-in support for notifications during selection state changes. * Provides scale down, scale up, and rotation effects. \ No newline at end of file diff --git a/MAUI/Radio-Button/Events.md b/MAUI/Radio-Button/Events.md index 1940f91ce6..275624cf0f 100644 --- a/MAUI/Radio-Button/Events.md +++ b/MAUI/Radio-Button/Events.md @@ -1,17 +1,17 @@ --- layout: post title: Events in .NET MAUI Radio Button Control | Syncfusion® -description: Learn about Event support in Syncfusion® Essential Studio® .NET MAUI Radio Button control, its elements and more. -platform: maui +description: Learn about event support in Syncfusion® Essential Studio® .NET MAUI Radio Button control, its elements, and more. +platform: MAUI control: SfRadioButton -documentation: ug +documentation: UG --- # Events in .NET MAUI Radio Button (SfRadioButton) ## StateChanged event -This event occurs when the value (state) of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property is changed by touching the check box or setting the value to the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property using XAML or C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html) and expose the following property: +The `StateChanged` event occurs when the value (state) of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property is changed, either by user interaction or programmatically via XAML or C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html) and expose the following property: * [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) : The new value(state) of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property. @@ -64,7 +64,7 @@ private void RadioButton_StateChanged(object sender, Syncfusion.Maui.Buttons.Sta ## StateChanging event -The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property is about to change by tapping the RadioButton control. The event arguments are of type `StateChangingEventArgs` and provide the following properties: +The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property is about to change, typically by tapping the RadioButton control. The event arguments are of type `StateChangingEventArgs` and provide the following properties: * [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) : The new value(state) of the `IsChecked` property. * `Cancel` : Gets or sets a value indicating whether the event should be canceled. diff --git a/MAUI/Radio-Button/Getting-Started.md b/MAUI/Radio-Button/Getting-Started.md index 529ee9b760..b62fe3603e 100644 --- a/MAUI/Radio-Button/Getting-Started.md +++ b/MAUI/Radio-Button/Getting-Started.md @@ -1,11 +1,11 @@ --- layout: post title: Getting Started with .NET MAUI Radio Button Control | Syncfusion® -description: Learn here about getting started with Syncfusion® Essential Studio® .NET MAUI Radio Button control, its elements and more. -platform: maui +description: Learn about getting started with Syncfusion® Essential Studio® .NET MAUI Radio Button control, its elements, and more. +platform: MAUI control: SfRadioButton -documentation: ug -keywords : .net maui radio button, maui radio button, maui radio button group, maui radio button state. +documentation: UG +keywords : .NET MAUI Radio Button, MAUI Radio Button, MAUI Radio Button Group, MAUI Radio Button State. --- # Getting Started with .NET MAUI RadioButton @@ -20,26 +20,27 @@ To quickly get started with the .NET MAUI RadioButton, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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. +[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" %} @@ -112,18 +113,19 @@ namespace RadioButtonGettingStarted {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 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, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package @@ -132,9 +134,9 @@ Before proceeding, ensure the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.Buttons` to install the Syncfusion® .NET MAUI Buttons package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. +[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependent package for all Syncfusion® controls in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} @@ -212,24 +214,24 @@ namespace RadioButtonGettingStarted Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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` +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 +## 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/) NuGet is a dependent package for all Syncfusion® controls in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} @@ -301,9 +303,9 @@ namespace RadioButtonGettingStarted {% endtabcontent %} {% endtabcontents %} -## Setting caption +## Setting Caption -The .NET MAUI Radio Button caption can be defined using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the radio button and is displayed next to the radio button. +The .NET MAUI Radio Button caption can be defined using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the radio button and is displayed next to it. {% tabs %} {% highlight xaml %} @@ -322,7 +324,7 @@ The .NET MAUI Radio Button caption can be defined using the [Text](https://help. ![.NET MAUI Radio Button](Images/Getting-Started/radiobutton.png) -## Change the Radio Button state +## Change the Radio Button State The two different visual states of the [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) are: @@ -361,6 +363,6 @@ N> [SfRadioButtons](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons. ![.NET MAUI Radio Button](Images/Getting-Started/statechange.png) -You can find the complete getting started sample of the .NET MAUI Radio Button from this [link.](https://github.com/SyncfusionExamples/maui-radiobutton-samples) +You can find the complete getting started sample of the .NET MAUI Radio Button from this [link](https://github.com/SyncfusionExamples/maui-radiobutton-samples). N> You can also explore our [.NET MAUI Radio Button Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/RadioButton) that shows you how to render the Radio Button in .NET MAUI. \ No newline at end of file diff --git a/MAUI/Radio-Button/Grouping.md b/MAUI/Radio-Button/Grouping.md index 84b9d3324d..cf56dfc23c 100644 --- a/MAUI/Radio-Button/Grouping.md +++ b/MAUI/Radio-Button/Grouping.md @@ -1,20 +1,20 @@ --- layout: post title: Grouping in .NET MAUI Radio Button Control | Syncfusion® -description: Learn here all about Grouping support in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control and more. -platform: maui +description: Learn about grouping support in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control and more. +platform: MAUI control: SfRadioButton -documentation: ug -keywords : .net maui radio button, maui radio button, maui radio button group, maui radio button grouping, maui radio group. +documentation: UG +keywords : .NET MAUI Radio Button, MAUI Radio Button, MAUI Radio Button Group, MAUI Radio Button Grouping, MAUI Radio Group. --- # Grouping in .NET MAUI Radio Button (SfRadioButton) ## Group Key -The [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) in [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) allows you to group a set of radio buttons present inside any layout. By grouping in this way, you can select only one radio button that comes under same [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) at a time. +The [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) in [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) allows you to group a set of radio buttons present inside any layout. By grouping this way, you can select only one radio button per [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) at a time. -* [CheckedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedItem) - Gets the current checked item from the .NET Maui Radio Button group. +* [CheckedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedItem) - Gets the current checked item from the .NET MAUI Radio Button group. {% tabs %} {% highlight xaml %} @@ -61,8 +61,8 @@ The [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRad The [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedChanged) event of [SfRadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) occurs when a checked item is changed. The argument contains the following information: -* [PreviousItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_PreviousItem) - Gets the previously checked radio button from group. -* [CurrentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_CurrentItem) - Gets the currently checked radio button from group. +* [PreviousItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_PreviousItem) - Gets the previously checked radio button from the group. +* [CurrentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_CurrentItem) - Gets the currently checked radio button from the group. ## .NET MAUI Radio Group @@ -126,8 +126,9 @@ The [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons ![.NET MAUI RadioGroup horizontal orientation](Images/Grouping/radiogrouporientation.png) -## Selected value -The [.NET MAUI RadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) class defines a [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property, of type `object`, This property represents the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of the checked [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a group defined. +## Selected Value + +The [.NET MAUI RadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) class defines a [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property, of type `object`. This property represents the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of the checked [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a defined group. When any [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a [.NET MAUI RadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) is checked, the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of that RadioButton is assigned to the [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property of the RadioGroup. The `SelectedValue` is dynamically updated whenever a different RadioButton within the RadioGroup is checked. diff --git a/MAUI/Radio-Button/Migration.md b/MAUI/Radio-Button/Migration.md index a88c4cfcba..ac2aee1fcb 100644 --- a/MAUI/Radio-Button/Migration.md +++ b/MAUI/Radio-Button/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI Radio Button | Syncfusion® -description: Learn all about Migrating from Syncfusion® Xamarin Radio Button to Syncfusion® .NET MAUI Radio Button control and more here. +description: Learn about migrating from Syncfusion® Xamarin Radio Button to Syncfusion® .NET MAUI Radio Button control and more. platform: .NET MAUI control: SfRadioButton -documentation: ug +documentation: UG --- # Migrating from Xamarin SfRadioButton to .NET MAUI SfRadioButton -To migrate easier from Xamarin Radio Button to [.NET MAUI Radio Button](https://www.syncfusion.com/maui-controls/maui-radio-button), we kept most of the APIs from Xamarin SfRadioButton in MAUI SfRadioButton. However, to maintain the consistency of API naming in MAUI SfRadioButton, we renamed some of the APIs. The APIs changed in MAUI SfRadioButton from Xamarin SfRadioButton are detailed as follows: +To facilitate an easier migration from Xamarin Radio Button to [.NET MAUI Radio Button](https://www.syncfusion.com/maui-controls/maui-radio-button), most APIs from Xamarin SfRadioButton have been retained in MAUI SfRadioButton. However, to ensure consistency in API naming within MAUI SfRadioButton, certain APIs have been renamed. The following table details the changes from Xamarin SfRadioButton to .NET MAUI SfRadioButton: ## Namespaces diff --git a/MAUI/Radio-Button/Overview.md b/MAUI/Radio-Button/Overview.md index 19d133d37a..d14496a6e1 100644 --- a/MAUI/Radio-Button/Overview.md +++ b/MAUI/Radio-Button/Overview.md @@ -2,7 +2,7 @@ layout: post title: Overview | .NET MAUI Radio Button | Syncfusion® platform: .NET MAUI -description: Learn here about overall key features in Essential Studio® for .NET MAUI SfRadioButton Control, its elements, and more. +description: Learn about the overall key features in Essential Studio® for .NET MAUI SfRadioButton Control, its elements, and more. control: SfRadioButton --- diff --git a/MAUI/Radio-Button/Visual-Customization.md b/MAUI/Radio-Button/Visual-Customization.md index fa5fc17cf4..18b6d9f5d9 100644 --- a/MAUI/Radio-Button/Visual-Customization.md +++ b/MAUI/Radio-Button/Visual-Customization.md @@ -9,9 +9,9 @@ documentation: ug # Visual Customization in .NET MAUI Radio Button (SfRadioButton) -## Customizing a state color +## Customizing a State Color -The default state colors can be customized using the CheckedColor and UncheckedColor properties. The checked state color is updated to the value of the CheckedColor property when the state changes to check. The unchecked state color is updated to the value of the UncheckedColor property when the state changes to unchecked. +The default state colors can be customized using the `CheckedColor` and `UncheckedColor` properties. The checked state color is updated to the specified `CheckedColor` value when the state changes to checked. Similarly, the unchecked state color is updated to the specified `UncheckedColor` value when the state changes to unchecked. {% tabs %} {% highlight xaml %} @@ -41,7 +41,7 @@ The default state colors can be customized using the CheckedColor and UncheckedC ![CheckedColor and UncheckedColor in Radio Button](Images/VisualCustomization/statecolor.png) -## StrokeThickness +## Stroke Thickness The stroke thickness of the circle in the Radio Button control can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_StrokeThickness) property. @@ -75,7 +75,7 @@ The stroke thickness of the circle in the Radio Button control can be customized N> StrokeThickness support has not been provided for Android Platform. -## Setting a caption text appearance +## Setting a Caption Text Appearance You can customize the display text appearance of the [`SfRadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control using the following properties: @@ -118,7 +118,7 @@ You can customize the display text appearance of the [`SfRadioButton`](https://h ## LineBreakMode -The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is NoWrap. The following other options are available in [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_LineBreakMode): +The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is `NoWrap`. The following options are available in [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_LineBreakMode): * `NoWrap` - Avoids the text wrap. * `WordWrap` - Wraps the text by words. @@ -154,12 +154,12 @@ The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Button ![.NET MAUI Radio Button LineBreakmode](Images/VisualCustomization/linebreakmode.png) -This demo can be downloaded from [GitHub link](https://github.com/SyncfusionExamples/How-to-wrap-text-in-DOTNET-MAUI-RadiButton) +This demo can be downloaded from [GitHub link](https://github.com/SyncfusionExamples/How-to-wrap-text-in-DOTNET-MAUI-RadiButton). -## Size customization +## Size Customization -The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ControlSize) property is used to customize the [`RadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control size. +The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ControlSize) property is used to customize the size of the [`RadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control. {% tabs %} {% highlight xaml %} @@ -181,8 +181,9 @@ The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons. {% endhighlight %} {% endtabs %} -## Font auto scaling enabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_FontAutoScalingEnabled) property is used to automatically scale the Radio button's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false.` +## Font Auto Scaling Enabled + +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_FontAutoScalingEnabled) property is used to automatically scale the font size of the Radio Button based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false`. {% tabs %} {% highlight xaml %} @@ -199,8 +200,9 @@ radioButton.FontAutoScalingEnabled = true; {% endhighlight %} {% endtabs %} -## Enable animation -The [EnabledAnimation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_EnabledAnimation) property is used to enable or disable the animation for the [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control. By default, this property is set to `true`, which means animations are enabled. +## Enable Animation + +The [EnabledAnimation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_EnabledAnimation) property is used to enable or disable the animation for the [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control. By default, this property is set to `true`, indicating that animations are enabled. {% tabs %} {% highlight xaml %} @@ -219,8 +221,9 @@ SfRadioButton radioButton = new SfRadioButton {% endhighlight %} {% endtabs %} -## Content spacing -The [ContentSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ContentSpacing) property is used to adjust the content spacing in the [`SfRadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control. +## Content Spacing + +The [ContentSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ContentSpacing) property is used to adjust the content spacing within the [`SfRadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control. {% tabs %} {% highlight xaml %} diff --git a/MAUI/Radio-Button/Visual-States.md b/MAUI/Radio-Button/Visual-States.md index 8354e6efd0..d7d0c21471 100644 --- a/MAUI/Radio-Button/Visual-States.md +++ b/MAUI/Radio-Button/Visual-States.md @@ -1,15 +1,15 @@ --- layout: post title: Visual States in .NET MAUI Radio Button Control | Syncfusion® -description: Learn here all about Visual States support in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control and more. +description: Learn about Visual States support in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control. platform: .NET MAUI control: SfRadioButton -documentation: ug +documentation: UG --- # Visual States in .NET MAUI Radio Button (SfRadioButton) -The visual of the Radio Button can be customized using VisualStates. The [`SfRadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control contains the following two visual states: +The visual appearance of the Radio Button can be customized using `VisualStates`. The [`SfRadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control provides the following two visual states: * Checked * Unchecked diff --git a/MAUI/Switch/Events.md b/MAUI/Switch/Events.md index 4164fa61f4..fc772bf6bb 100644 --- a/MAUI/Switch/Events.md +++ b/MAUI/Switch/Events.md @@ -1,11 +1,11 @@ --- layout: post title: Events in .NET MAUI Switch Control | Syncfusion® -description: Learn about Event support in the Syncfusion® .NET MAUI Switch control, including its elements, and more. -platform: maui +description: Learn about event support in the Syncfusion® .NET MAUI Switch control, including its elements, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch events, maui switch event. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch Events, MAUI Switch Event. --- # Events in .NET MAUI Switch @@ -14,7 +14,7 @@ This section provides information about the events available in the .NET MAUI Sw ## StateChanged event -The StateChanged event occurs when the value or state of [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property is changed by tapping the .NET MAUI Switch button or setting a value to `IsOn` property. The [SwitchStateChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html) provides the following properties: +The `StateChanged` event occurs when the value or state of the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property changes by tapping the .NET MAUI Switch button or setting a value to the `IsOn` property. The [SwitchStateChangedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html) provides the following properties: * [NewValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html#Syncfusion_Maui_Buttons_SwitchStateChangedEventArgs_NewValue) : Gets the current value of the .NET MAUI Switch control. * [OldValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html#Syncfusion_Maui_Buttons_SwitchStateChangedEventArgs_OldValue) : Gets the previous value of the .NET MAUI Switch control. @@ -58,7 +58,7 @@ private async void SfSwitch_StateChanged(object sender, SwitchStateChangedEventA ## StateChanging event -The StateChanging event occurs when the state of [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property is about to change in the .NET MAUI Switch control. The [SwitchStateChangingEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) provides the following properties: +The `StateChanging` event occurs when the state of the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property is about to change in the .NET MAUI Switch control. The [SwitchStateChangingEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) provides the following properties: * [NewValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html#Syncfusion_Maui_Buttons_SwitchStateChangingEventArgs_NewValue) : Gets the current value of the .NET MAUI Switch control. * [OldValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html#Syncfusion_Maui_Buttons_SwitchStateChangingEventArgs_OldValue) : Gets the previous value of the .NET MAUI Switch control. diff --git a/MAUI/Switch/Getting-Started.md b/MAUI/Switch/Getting-Started.md index ab1ea3a6c1..e9a6fe13d6 100644 --- a/MAUI/Switch/Getting-Started.md +++ b/MAUI/Switch/Getting-Started.md @@ -1,11 +1,11 @@ --- layout: post title: Getting Started with .NET MAUI Switch | Syncfusion® -description: Learn here about getting started with the Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. -platform: maui +description: Learn about getting started with the Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch contrl, maui switch control. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch control, MAUI Switch control. --- # Getting Started with .NET MAUI Switch @@ -20,26 +20,27 @@ To quickly get started with the .NET MAUI Switch, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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, choose a location, and click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Buttons 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.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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 +## 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/) NuGet is a dependent package 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; @@ -73,7 +74,7 @@ namespace SwitchGettingStarted ## Step 4: Adding the .NET MAUI Switch -1. To initialize the control, import the Buttons namespace into your code. +1. Import the Buttons namespace into your code to initialize the control. 2. Initialize [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html). {% tabs %} @@ -114,18 +115,19 @@ namespace SwitchGettingStarted {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 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, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package @@ -134,9 +136,9 @@ Before proceeding, ensure the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.Buttons` to install the Syncfusion® .NET MAUI Buttons package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. +[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; @@ -170,7 +172,7 @@ namespace SwitchGettingStarted ## Step 4: Adding the .NET MAUI Switch -1. To initialize the control, import the Buttons namespace into your code. +1. Import the Buttons namespace into your code to initialize the control. 2. Initialize [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html). {% tabs %} @@ -215,24 +217,24 @@ namespace SwitchGettingStarted Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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` +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 +## 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/) 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; @@ -266,7 +268,7 @@ namespace SwitchGettingStarted ## Step 4: Adding the .NET MAUI Switch -1. To initialize the control, import the Buttons namespace into your code. +1. Import the Buttons namespace into your code to initialize the control. 2. Initialize [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html). {% tabs %} @@ -306,9 +308,9 @@ namespace SwitchGettingStarted {% endtabcontent %} {% endtabcontents %} -## Performing an action based on state +## Performing an Action Based on State -You can switch between states in the .NET MAUI Switch control. When the state changes,the [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) and [StateChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html) events are triggered. These events enable you to perform specific actions depending on the current state of the switch. The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) event also allows you to cancel the transition to a new state if needed. +You can switch between states in the .NET MAUI Switch control. When the state changes,the [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) and [StateChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html) events are triggered. These events allow you to perform specific actions depending on the current state of the switch. The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) event also allows you to cancel the transition to a new state if needed. The following code example displays a message box when the .NET MAUI Switch is switched to the off state after the work is completed. @@ -343,6 +345,6 @@ private void SfSwitch_StateChanged(object sender, SwitchStateChangedEventArgs e) {% endtabs %} -N> Find the complete getting started sample of the .NET MAUI Switch from this [link.](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-SfSwitch) +N> Find the complete getting started sample of the .NET MAUI Switch from this [link](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-SfSwitch). -N> You can refer to our [.NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Switch Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/Switch) that shows you how to render the Switch in .NET MAUI. \ No newline at end of file +N> Refer to our [.NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch) feature tour page for its groundbreaking feature representations. Explore our [.NET MAUI Switch Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/Switch) for rendering the Switch in .NET MAUI. \ No newline at end of file diff --git a/MAUI/Switch/Migration.md b/MAUI/Switch/Migration.md index defc8e5f49..cc8da5fefa 100644 --- a/MAUI/Switch/Migration.md +++ b/MAUI/Switch/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI Switch | Syncfusion® -description: Learn about Migrating from Syncfusion® Xamarin Switch to the Syncfusion® .NET MAUI Switch control, and more here. -platform: maui +description: Learn about migrating from Syncfusion® Xamarin Switch to the Syncfusion® .NET MAUI Switch control, and more. +platform: MAUI control: SfSwitch -documentation: ug +documentation: UG --- # Migrating from Xamarin SfSwitch to .NET MAUI SfSwitch -To migrate easier from Xamarin SfSwitch to .NET MAUI SfSwitch, we kept most of the APIs from Xamarin SfSwitch in MAUI SfSwitch. However, to maintain the consistency of the API naming in MAUI SfSwitch, we renamed some of the APIs. The APIs changed in MAUI SfSwitch from Xamarin SfSwitch are detailed as follows: +To facilitate easier migration from Xamarin SfSwitch to .NET MAUI SfSwitch, most of the APIs from Xamarin SfSwitch have been retained in MAUI SfSwitch. However, to maintain API naming consistency in MAUI SfSwitch, some APIs have been renamed. The changes in APIs from Xamarin SfSwitch to MAUI SfSwitch are detailed as follows: ## Namespaces diff --git a/MAUI/Switch/Overview.md b/MAUI/Switch/Overview.md index 47aa66a20f..8196e5a248 100644 --- a/MAUI/Switch/Overview.md +++ b/MAUI/Switch/Overview.md @@ -1,16 +1,16 @@ --- layout: post -title: About .NET MAUI Switch Control | Syncfusion® -description: Learn here about introduction of the Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. -platform: maui +title: Introduction to .NET MAUI Switch Control | Syncfusion® +description: Learn about introduction of the Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch contrl, maui switch control. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch control, MAUI Switch control. --- # .NET MAUI Switch (SfSwitch) Overview -The .NET MAUI Switch control provides an efficient way to select between the states based on the toggled value. +The .NET MAUI Switch control provides an efficient way to toggle between states based on the selected value. ## Key features diff --git a/MAUI/Switch/Right-To-Left.md b/MAUI/Switch/Right-To-Left.md index d7f917ebae..ca224a122b 100644 --- a/MAUI/Switch/Right-To-Left.md +++ b/MAUI/Switch/Right-To-Left.md @@ -1,16 +1,16 @@ --- layout: post title: Right To Left in .NET MAUI Switch Control | Syncfusion® -description: Learn here all about Right To Left support in Syncfusion®.NET MAUI Switch (SfSwitch) control, and more. -platform: maui +description: Learn all about Right To Left support in the Syncfusion®.NET MAUI Switch (SfSwitch) control, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch rtl, maui switch flow direction. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch RTL, MAUI Switch Flow Direction. --- # Right To Left in .NET MAUI Switch (SfSwitch) -The .NET MAUI Switch supports changing the layout direction of the control in the right-to-left direction by setting the `FlowDirection` to RightToLeft or by changing the device language. +The .NET MAUI Switch supports changing the layout direction to a right-to-left (RTL) orientation. This can be achieved by setting the `FlowDirection` property to `RightToLeft`, or by changing the device's language to one that uses an RTL script. {% tabs %} @@ -30,4 +30,4 @@ this.Content = sfSwitch; {% endtabs %} -![SfSwitch with RTL flowdirection](images/RTL/RTL_Switch.png) \ No newline at end of file +![SfSwitch with RTL flow direction](images/RTL/RTL_Switch.png) \ No newline at end of file diff --git a/MAUI/Switch/Visual-State-Manager.md b/MAUI/Switch/Visual-State-Manager.md index dfb4b55975..2a59f032fb 100644 --- a/MAUI/Switch/Visual-State-Manager.md +++ b/MAUI/Switch/Visual-State-Manager.md @@ -1,16 +1,16 @@ --- layout: post title: Visual state manager in .NET MAUI Switch (SfSwitch) | Syncfusion® -description: Learn here all about handling of visual state manager in Syncfusion® .NET MAUI Switch (SfSwitch) control, and more. -platform: maui +description: Learn about handling the visual state manager in the Syncfusion® .NET MAUI Switch (SfSwitch) control, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch visual states, maui switch visuals. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch Visual States, MAUI Switch Visuals. --- # Visual State Manager in .NET MAUI Switch (SfSwitch) -Use the visual state manager to change the .NET MAUI Switch properties based on the visual states, set from code. The applicable visual states are, +Use the visual state manager to change the .NET MAUI Switch properties based on the visual states, set from code. The applicable visual states are: * On * Off diff --git a/MAUI/Switch/customization.md b/MAUI/Switch/customization.md index 8a1593002e..e17d976d73 100644 --- a/MAUI/Switch/customization.md +++ b/MAUI/Switch/customization.md @@ -1,16 +1,16 @@ --- layout: post title: Customization in .NET MAUI Switch Control | Syncfusion® -description: Learn here all about Customization support in Syncfusion® .NET MAUI Switch (SfSwitch) control, and more. -platform: maui +description: Learn about the customization support in the Syncfusion® .NET MAUI Switch (SfSwitch) control, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch ccustomize, maui switch customize, maui switch color, maui switch size, maui switch icon. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch Customize, MAUI Switch Customize, MAUI Switch Color, MAUI Switch Size, MAUI Switch Icon. --- # Customization in .NET MAUI Switch (SfSwitch) -The .NET MAUI Switch control provides options to customize the color based on its states. The following code example demonstrates how to customize the .NET MAUI Switch control. +The .NET MAUI Switch control provides options to customize its color based on different states. The following code example demonstrates how to customize the .NET MAUI Switch control. ## Colors @@ -118,17 +118,17 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with visual state customization](images/customization/Colors.png) +![switch control with visual state customization](images/customization/Colors.png) ## Sizing -In the .NET MAUI Switch control, sizing of the thumb and the track can be controlled by using the following properties: +In the .NET MAUI Switch control, the sizing of the thumb and track can be controlled using the following properties: -* [TrackCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_TrackCornerRadius): Represents a CornerRadius value to create curved corner of the track. +* [TrackCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_TrackCornerRadius): Represents a CornerRadius value to create curved corners for the track. * [TrackStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_TrackStrokeThickness): Represents a double value for defining the track border width. * [TrackWidthRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_TrackWidthRequest): Represents a double value for defining the track width. * [TrackHeightRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_TrackHeightRequest): Represents double value for defining the track height. -* [ThumbCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_ThumbCornerRadius): Represents a CornerRadius value to create curved corner of the thumb. +* [ThumbCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_ThumbCornerRadius): Represents a CornerRadius value to create curved corners for the thumb. * [ThumbStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_ThumbStrokeThickness): Represents a double value for defining the thumb border width. * [ThumbWidthRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_ThumbWidthRequest): Represents double value for defining the thumb width. * [ThumbHeightRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_ThumbHeightRequest): Represents double value for defining the thumb height. @@ -229,7 +229,7 @@ this.Content = sfSwitch; ## Custom Path -In the .NET MAUI Switch control, customize the thumb's icon by using the following properties: +In the .NET MAUI Switch control, customize the thumb's icon using the following properties: * [CustomPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_CustomPath): Represents a Path value for defining the thumb's icon. * [IconColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_IconColor): Represents the color for the thumb's icon. @@ -343,7 +343,7 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with custom path](images/Path/Path.gif) +![Switch control with custom path](images/Path/Path.gif) N> Keep the size of the [`CustomPath`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_CustomPath) within the dimensions of the thumb. diff --git a/MAUI/Switch/states.md b/MAUI/Switch/states.md index e1c8d0593f..88a9dd9b50 100644 --- a/MAUI/Switch/states.md +++ b/MAUI/Switch/states.md @@ -1,16 +1,16 @@ --- layout: post title: States in .NET MAUI Switch control | Syncfusion® -description: Learn here all about States support in Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. -platform: maui +description: Learn all about the state support in the Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. +platform: MAUI control: SfSwitch -documentation: ug -keywords : .net maui switch, maui switch, .net maui switch states, maui switch state. +documentation: UG +keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch States, MAUI Switch State. --- # States in .NET MAUI Switch (SfSwitch) -The .NET MAUI Switch allows you to configure the states as explained in the following sections. +The .NET MAUI Switch allows you to configure various states as explained in the following sections. ## On State @@ -62,7 +62,7 @@ this.Content = sfSwitch; ## Indeterminate State -The indeterminate state can be enabled by using [AllowIndeterminateState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_AllowIndeterminateState) property, when you need to display the work progress. The following code example demonstrates how to load the .NET MAUI Switch in an Indeterminate state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to null. +The indeterminate state can be enabled by using the [AllowIndeterminateState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_AllowIndeterminateState) property when you need to display the work progress. The following code example demonstrates how to load the .NET MAUI Switch in an Indeterminate state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to null. {% tabs %} @@ -90,7 +90,7 @@ N> By default, the switch control has only two states: on and off. ## Disabled On -You can switch to disabled on state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property as true and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property as false. +You can switch to the disabled "On" state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to true and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property to false. {% tabs %} @@ -115,7 +115,7 @@ this.Content = sfSwitch; ## Disabled Off -You can switch to disabled off state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property as false and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property as false. +You can switch to the disabled "Off" state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to false and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property to false. {% tabs %} @@ -140,7 +140,7 @@ this.Content = sfSwitch; ## Disabled Indeterminate -The disabled indeterminate state can be enabled when you need to display the work progress. The below code example demonstrates loading the switch in disabled indeterminate state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property value as null and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property as false. +The disabled indeterminate state can be enabled when you need to display the work progress. The below code example demonstrates loading the switch in a disabled indeterminate state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property value to null and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property to false. {% tabs %} @@ -162,4 +162,4 @@ this.Content = sfSwitch; {% endtabs %} -![.NET MAUI Switch conrol displaying disabled indeterminate state.](images/States/net-maui-switch-disabled-indeterminate.png) +![.NET MAUI Switch control displaying disabled indeterminate state.](images/States/net-maui-switch-disabled-indeterminate.png) From dae4d36509ded6773618c18e2adaf193e3e5b4c0 Mon Sep 17 00:00:00 2001 From: snehakPV Date: Tue, 20 May 2025 17:33:20 +0530 Subject: [PATCH 3/6] Updated the UG content --- MAUI/NavigationDrawer/Duration.md | 10 +-- MAUI/NavigationDrawer/Events.md | 22 +++--- MAUI/NavigationDrawer/Getting-Started.md | 76 ++++++++++--------- MAUI/NavigationDrawer/Main-Content.md | 14 ++-- MAUI/NavigationDrawer/Migration.md | 10 +-- .../NavigationDrawer/Navigation-Pane-Sides.md | 8 +- MAUI/NavigationDrawer/Overview.md | 16 ++-- MAUI/NavigationDrawer/Side-Pane-Content.md | 21 +++-- MAUI/NavigationDrawer/Side-Pane-Sizing.md | 11 +-- MAUI/NavigationDrawer/Swipe-Gesture.md | 13 ++-- MAUI/NavigationDrawer/Toggle-Animations.md | 11 +-- MAUI/NavigationDrawer/Toggling-Drawer.md | 26 ++++--- .../Radial-Menu/CenterButton-Customization.md | 26 +++---- MAUI/Radial-Menu/Events.md | 26 +++---- MAUI/Radial-Menu/Getting-Started.md | 56 +++++++------- MAUI/Radial-Menu/Overview.md | 12 +-- MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md | 30 ++++---- MAUI/Radial-Menu/Populating-Items.md | 42 +++++----- MAUI/Radial-Menu/Segmenting-Placing-Items.md | 22 +++--- .../SfRadialMenuItem-Customization.md | 30 ++++---- MAUI/Radial-Menu/migration.md | 24 +++--- MAUI/TabView/Events.md | 24 +++--- MAUI/TabView/Getting-Started.md | 68 +++++++++-------- MAUI/TabView/Header-Display-Mode.md | 19 +++-- MAUI/TabView/How-To.md | 20 ++--- MAUI/TabView/Migration.md | 6 +- MAUI/TabView/Nested-Tabs.md | 16 ++-- MAUI/TabView/Overview.md | 14 ++-- .../Selection-Indicator-Customization.md | 20 ++--- MAUI/TabView/Swiping.md | 10 +-- MAUI/TabView/Tab-Bar-Customization.md | 44 +++++------ MAUI/TabView/Tab-Item-Customization.md | 59 +++++++------- MAUI/TabView/Visual-State-Managers.md | 12 +-- 33 files changed, 415 insertions(+), 403 deletions(-) diff --git a/MAUI/NavigationDrawer/Duration.md b/MAUI/NavigationDrawer/Duration.md index d387306295..16a8add5d9 100644 --- a/MAUI/NavigationDrawer/Duration.md +++ b/MAUI/NavigationDrawer/Duration.md @@ -1,16 +1,16 @@ --- layout: post title: Animation Duration in .NET MAUI Navigation Drawer control | Syncfusion® -description: Learn about Animation Duration support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui +description: Learn about Animation Duration support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI control: SfNavigationDrawer -documentation: ug +documentation: UG --- # Animation Duration in .NET MAUI Navigation Drawer (SfNavigationDrawer) -## Animation Duration in SfNavigationDrawer +## Overview -The [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Duration) property of the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) indicates the timeline for completing one animation cycle. Setting a smaller duration value accelerates animation speed. +The [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Duration) property of the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) specifies the timeline for completing one animation cycle. Setting a smaller duration value accelerates animation speed. {% tabs %} diff --git a/MAUI/NavigationDrawer/Events.md b/MAUI/NavigationDrawer/Events.md index a7954aa473..75594a4241 100644 --- a/MAUI/NavigationDrawer/Events.md +++ b/MAUI/NavigationDrawer/Events.md @@ -1,15 +1,15 @@ --- layout: post title: Events in .NET MAUI Navigation Drawer control | Syncfusion® -description: Learn about Events support in Syncfusion® Essential Studio® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements, and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn about event support in the Syncfusion® Essential Studio® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements, and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- # Events in .NET MAUI Navigation Drawer (SfNavigationDrawer) -There are five built-in events in the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.html) control namely: +There are five built-in events in the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.html) control, namely: * [DrawerOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerOpening) * [DrawerOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerOpened) @@ -19,9 +19,9 @@ There are five built-in events in the [SfNavigationDrawer](https://help.syncfusi ## DrawerOpening Event -The [DrawerOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerOpening) event is triggered before the drawer pane is opening. Restrict the drawer from opening by canceling this event by setting the `Cancel` property in the event argument to true. The event arguments are of type `CancelEventArgs`. Expose the following property: +The [DrawerOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerOpening) event is triggered before the drawer pane opens. Restrict the drawer from opening by canceling this event by setting the `Cancel` property in the event argument to `true`. The event arguments are of type `CancelEventArgs`. It exposes the following property: - * `Cancel`: Drawer opening is based on this value. + * `Cancel`: Determines if the drawer opening should be canceled. {% tabs %} @@ -78,9 +78,9 @@ private void navigationDrawer_DrawerOpened(object sender, EventArgs e) ## DrawerClosing Event -The [DrawerClosing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerClosing) event is triggered before the drawer pane closes. Restrict the drawer from closing by canceling this event by setting the `Cancel` property in the event argument to true. The event arguments are of type `CancelEventArgs`. Expose the following property: +The [DrawerClosing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerClosing) event is triggered before the drawer pane closes. Restrict the drawer from closing by canceling this event by setting the `Cancel` property in the event argument to `true`. The event arguments are of type `CancelEventArgs`. It exposes the following property: - * `Cancel`: Drawer closing is based on this value. + * `Cancel`: Determines if the drawer closing should be canceled. {% tabs %} @@ -137,9 +137,9 @@ private void navigationDrawer_DrawerClosed(object sender, EventArgs e) ## DrawerToggled Event -The [DrawerToggled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerToggled) event is triggered after a drawer is opened or closed. The event arguments are of type [ToggledEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.ToggledEventArgs.html). Expose the following property: +The [DrawerToggled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerToggled) event is triggered after a drawer is opened or closed. The event arguments are of type [ToggledEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.ToggledEventArgs.html). It exposes the following property: -* [IsOpen](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.ToggledEventArgs.html#Syncfusion_Maui_NavigationDrawer_ToggledEventArgs_IsOpen): This property indicates whether the drawer is opened or closed. +* [IsOpen](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.ToggledEventArgs.html#Syncfusion_Maui_NavigationDrawer_ToggledEventArgs_IsOpen): Indicates whether the drawer is opened or closed. {% tabs %} diff --git a/MAUI/NavigationDrawer/Getting-Started.md b/MAUI/NavigationDrawer/Getting-Started.md index 471ab8b3e9..392ea576a4 100644 --- a/MAUI/NavigationDrawer/Getting-Started.md +++ b/MAUI/NavigationDrawer/Getting-Started.md @@ -1,13 +1,13 @@ --- layout: post title: Getting Started with .NET MAUI Navigation Drawer control | Syncfusion® -description: Learn here about getting started with Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn how to get started with the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, including its elements and features. +platform: MAUI +control: SfNavigationDrawer +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 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Getting Started with .NET MAUI Navigation Drawer @@ -21,26 +21,27 @@ To quickly get started with the .NET MAUI Navigation Drawer, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI NavigationDrawer NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.NavigationDrawer](https://www.nuget.org/packages/Syncfusion.Maui.NavigationDrawer) 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 in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% highlight c# hl_lines="6 17" %} using Microsoft.Maui; @@ -76,7 +77,7 @@ namespace NavigationDrawerGettingStarted 1. To initialize the control, import the NavigationDrawer namespace into your code. -2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) +2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html). {% tabs %} {% highlight xaml %} @@ -117,29 +118,30 @@ namespace NavigationDrawerGettingStarted {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 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, type the project name and press **Enter**. +4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI NavigationDrawer NuGet Package +## Step 2: Install the Syncfusion® MAUI Navigation Drawer 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.NavigationDrawer` to install the Syncfusion® .NET MAUI NavigationDrawer package. +3. Run the command `dotnet add package Syncfusion.Maui.NavigationDrawer` to install the Syncfusion® .NET MAUI Navigation Drawer package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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; @@ -171,11 +173,11 @@ namespace NavigationDrawerGettingStarted {% endhighlight %} -## Step 4: Add a Basic NavigationDrawer +## Step 4: Add a Basic Navigation Drawer -1. To initialize the control, import the NavigationDrawer namespace into your code. +1. To initialize the control, import the Navigation Drawer namespace into your code. -2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) +2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html). {% tabs %} {% highlight xaml %} @@ -221,24 +223,24 @@ namespace NavigationDrawerGettingStarted Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI NavigationDrawer NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.NavigationDrawer](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. If not, Open the Terminal in Rider and manually run: `dotnet restore` +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 +## 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; @@ -274,7 +276,7 @@ namespace NavigationDrawerGettingStarted 1. To initialize the control, import the NavigationDrawer namespace into your code. -2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) +2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html). {% tabs %} {% highlight xaml %} @@ -314,11 +316,11 @@ namespace NavigationDrawerGettingStarted {% endtabcontent %} {% endtabcontents %} -N> It is mandatory to set [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) for [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) on initializing. +N> It is mandatory to set [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) for [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) upon initializing. ## Adjust Drawer Size -The default position of the navigation pane is on the left, so change the drawer width to 250 by using the [DrawerWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerWidth) property. +The default position of the navigation pane is on the left. Change the drawer width to 250 using the [DrawerWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerWidth) property. {% tabs %} {% highlight xaml %} @@ -363,7 +365,7 @@ N> To change the side of the navigation pane, utilize the [Position](https://hel ## Add Hamburger Menu for Toggling Drawer -Create an ImageButton and set the required image to the `Source` property. To ensure the image appears correctly, place the image in the `Resources/Images` directory. Subscribe Clicked event of the button and invoke the [ToggleDrawer()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method to toggle the drawer. Properly align the layout of [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) to position the hamburger icon at the top left, as demonstrated in the following code. +Create an ImageButton and set the required image to the `Source` property. Ensure the image is placed in the `Resources/Images` directory. Subscribe to the Clicked event of the button and invoke the [ToggleDrawer()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method to toggle the drawer. Properly align the layout of [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) to position the hamburger icon at the top left, as demonstrated in the following code. {% tabs %} {% highlight xaml %} @@ -496,7 +498,7 @@ public partial class NavigationDrawerPage : ContentPage ## Set ListView as Drawer Content -Create a ListView with items and set it as [DrawerContentView.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView) +Create a ListView with items and set it as [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView). {% tabs %} {% highlight xaml %} @@ -667,6 +669,6 @@ public partial class NavigationDrawerPage : ContentPage {% endhighlight %} {% endtabs %} -![OverView Image for NavigationDrawer](Images/getting-started/gettingstarted.png) +![Overview Image for NavigationDrawer](Images/getting-started/gettingstarted.png) You can find the getting started sample from the [`GitHub`](https://github.com/SyncfusionExamples/Getting-started-sample-for-.NET-MAUI-NavigationDrawer) link. \ No newline at end of file diff --git a/MAUI/NavigationDrawer/Main-Content.md b/MAUI/NavigationDrawer/Main-Content.md index 42d9491039..c72a55cd7c 100644 --- a/MAUI/NavigationDrawer/Main-Content.md +++ b/MAUI/NavigationDrawer/Main-Content.md @@ -1,16 +1,16 @@ --- layout: post title: Set Main Content in .NET MAUI Navigation Drawer control | Syncfusion® -description: Learn here all about Setting Main Content support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn all about setting Main Content support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- # Setting Main Content in .NET MAUI Navigation Drawer -The main content of the NavigationDrawer is always visible and can be set using the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) property. In the following code example, the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) is switched when the selection changes in the ListView. In short, this allows for easy navigation and switching of content. +The main content of the NavigationDrawer is always visible and can be configured using the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) property. In the following code example, the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) is updated when the selection changes in the ListView, allowing for easy navigation and content switching. {% tabs %} @@ -145,11 +145,11 @@ public partial class NavigationDrawerPage : ContentPage {% endhighlight %} {% endtabs %} -N> It is mandatory to set [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) for [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) when initializing. +N> It is mandatory to set the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) for [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) when initializing. ![contentview](Images/main-content/getting_main_content.png) -You can find the complete sample from the [`GitHub`](https://github.com/SyncfusionExamples/.NET-MAUI-NavigationDrawer-MainContent) link. +You can find the complete sample on [`GitHub`](https://github.com/SyncfusionExamples/.NET-MAUI-NavigationDrawer-MainContent). ## See also diff --git a/MAUI/NavigationDrawer/Migration.md b/MAUI/NavigationDrawer/Migration.md index 1e0f05f645..ae7b34f627 100644 --- a/MAUI/NavigationDrawer/Migration.md +++ b/MAUI/NavigationDrawer/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfNavigationDrawer | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin NavigationDrawer to Syncfusion® .NET MAUI NavigationDrawer control and more. -platform: maui +description: Learn all about migrating from Syncfusion® Xamarin NavigationDrawer to Syncfusion® .NET MAUI NavigationDrawer control and more. +platform: MAUI control: SfNavigationDrawer -documentation: ug +documentation: UG --- # Migrate from Xamarin NavigationDrawer to .NET MAUI NavigationDrawer -To migrate easier from Xamarin SfNavigationDrawer to .NET MAUI SfNavigationDrawer, keep most of the APIs from Xamarin SfNavigationDrawer in MAUI SfNavigationDrawer. However, to maintain the consistency of API naming in MAUI SfNavigationDrawer, rename some of the APIs. The APIs changed in MAUI SfNavigationDrawer from Xamarin SfNavigationDrawer are detailed as follows. +To simplify the migration process from Xamarin SfNavigationDrawer to .NET MAUI SfNavigationDrawer, most of the APIs from Xamarin SfNavigationDrawer have been retained in MAUI SfNavigationDrawer. However, some APIs have been renamed to ensure consistency in API naming within MAUI SfNavigationDrawer. The changes to APIs between Xamarin SfNavigationDrawer and .NET MAUI SfNavigationDrawer are as follows: ## Namespaces @@ -35,7 +35,7 @@ To migrate easier from Xamarin SfNavigationDrawer to .NET MAUI SfNavigationDrawe Gets or sets the DrawerSettings, which is a container for various customization options, allowing the appearance of the navigation drawer to be customized. -N> In the Xamarin Forms SfNavigationDrawer, the obsolete properties are removed in the .NET MAUI. You can exclusively set it using the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) properties. +N> In Xamarin Forms SfNavigationDrawer, the obsolete properties have been removed in .NET MAUI, and can be exclusively set using the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) properties. ## Events diff --git a/MAUI/NavigationDrawer/Navigation-Pane-Sides.md b/MAUI/NavigationDrawer/Navigation-Pane-Sides.md index 570f0e8ad0..9c1359bd21 100644 --- a/MAUI/NavigationDrawer/Navigation-Pane-Sides.md +++ b/MAUI/NavigationDrawer/Navigation-Pane-Sides.md @@ -1,10 +1,10 @@ --- layout: post title: Configuring the Drawer in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn here all about configuring the drawer in different sides support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn all about configuring the drawer in different sides support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- # Configure the Drawer in Different Sides in .NET MAUI Navigation Drawer diff --git a/MAUI/NavigationDrawer/Overview.md b/MAUI/NavigationDrawer/Overview.md index 72ea15ec25..50202d2dd6 100644 --- a/MAUI/NavigationDrawer/Overview.md +++ b/MAUI/NavigationDrawer/Overview.md @@ -1,22 +1,22 @@ --- layout: post title: About .NET MAUI Navigation Drawer control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn about introduction of the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements, and more. +platform: MAUI +control: SfNavigationDrawer +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 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # .NET MAUI Navigation Drawer (SfNavigationDrawer) Overview -The NavigationDrawer for .NET MAUI is a simpler component to create a navigation pane in the application. It consists of a content area and a sliding pane that slides out from the edge of the page. The pane can be opened by swiping the edges of the screen or programmatically. +The NavigationDrawer for .NET MAUI is a simpler component for creating a navigation pane in your application. It consists of a content area and a sliding pane that extends from the edge of the page. The pane can be opened either by swiping from the screen edges or programmatically. ![.NET MAUI Navigation Drawer.](Images/overview/net-maui-navigationdrawer.png) ## Key Features -* Pane positions – Supports pane position in all four directions: Left, Right, Top, and Bottom. +* **Pane Positions** – Supports positioning the pane in all four directions: Left, Right, Top, and Bottom. -* Animated transitions – Supports opening/closing of pane due to the transition SlideOnTop, Push, and Reveal. \ No newline at end of file +* **Animated Transitions** – Offers animated transitions such as SlideOnTop, Push, and Reveal for opening and closing the pane. \ No newline at end of file diff --git a/MAUI/NavigationDrawer/Side-Pane-Content.md b/MAUI/NavigationDrawer/Side-Pane-Content.md index c7ba258382..198ba94ee7 100644 --- a/MAUI/NavigationDrawer/Side-Pane-Content.md +++ b/MAUI/NavigationDrawer/Side-Pane-Content.md @@ -1,16 +1,15 @@ --- layout: post title: Set Sliding Panel Content in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn here all about Setting Sliding Panel Content support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn about setting sliding panel content support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- - # Set Sliding Panel Content in .NET MAUI Navigation Drawer -The drawer pane content is only viewable when the drawer is in the open state. Its content can be set as: +The drawer pane content is only viewable when the drawer is in the open state. Content can be set as: * Header Content @@ -22,7 +21,7 @@ N> Header and Footer content is optional, but the Drawer content is mandatory to ## Header Content -As the name suggests, it is displayed at the top of the drawer. The [DrawerHeaderView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderView) property is used to set the header content of the drawer. +The header is displayed at the top of the drawer. Use the [DrawerHeaderView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderView) property to set the header content: {% tabs %} @@ -64,7 +63,7 @@ this.Content = navigationDrawer; ## Header Height -The height of the drawer header content can be adjusted using the [DrawerHeaderHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderHeight) property. +Adjust the height of the drawer header content using the [DrawerHeaderHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderHeight) property. N> The [DrawerHeaderView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderView) can be removed by setting the [DrawerHeaderHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderHeight) to zero. @@ -108,7 +107,7 @@ this.Content = navigationDrawer; ## Footer Content -As the name suggests, it is displayed at the bottom of the drawer. The [DrawerFooterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterView) property is used to set the footer content of the drawer. +The footer is displayed at the bottom of the drawer. Use the [DrawerFooterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterView) property to set the footer content: {% tabs %} @@ -149,7 +148,7 @@ this.Content = navigationDrawer; ## Footer Height -The height of the drawer footer content can be adjusted using the [DrawerFooterHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterHeight) property. +Adjust the height of the drawer footer content using the [DrawerFooterHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterHeight) property. N> The [DrawerFooterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterView) can be removed by setting the [DrawerFooterHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterHeight) to zero. @@ -193,7 +192,7 @@ this.Content = navigationDrawer; ## Drawer Content -The main content of the drawer is displayed between the header and footer content. It can be set using the [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView) property. The content view occupies the remaining space left by the header and footer content. +The main content of the drawer is displayed between the header and footer content. It can be set using the [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView) property. The content view occupies the space left by the header and footer content. {% tabs %} diff --git a/MAUI/NavigationDrawer/Side-Pane-Sizing.md b/MAUI/NavigationDrawer/Side-Pane-Sizing.md index 72686fcc47..60625fc1c1 100644 --- a/MAUI/NavigationDrawer/Side-Pane-Sizing.md +++ b/MAUI/NavigationDrawer/Side-Pane-Sizing.md @@ -1,11 +1,12 @@ --- layout: post -title: Setting Sliding Panel size in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn here all about Setting Sliding Panel size support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +title: Setting Sliding Panel Size in .NET MAUI Navigation Drawer | Syncfusion® +description: Learn about setting sliding panel size support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- + # Setting Sliding Panel Size in .NET MAUI Navigation Drawer The size of the side pane can be adjusted using the [DrawerHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeight) and [DrawerWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerWidth) properties. diff --git a/MAUI/NavigationDrawer/Swipe-Gesture.md b/MAUI/NavigationDrawer/Swipe-Gesture.md index 9650b86e0a..22be045d0b 100644 --- a/MAUI/NavigationDrawer/Swipe-Gesture.md +++ b/MAUI/NavigationDrawer/Swipe-Gesture.md @@ -1,14 +1,15 @@ --- layout: post -title: SwipGesture in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn here all about SwipGesture support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +title: Swipe Gesture in .NET MAUI Navigation Drawer | Syncfusion® +description: Learn about SwipGesture support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- + # Swipe Gesture in .NET MAUI Navigation Drawer (SfNavigationDrawer) -The NavigationDrawer supports the swipe gesture for both opening and closing the drawer. +The NavigationDrawer supports swipe gesture for both opening and closing the drawer. ## Enabling Swipe Gesture diff --git a/MAUI/NavigationDrawer/Toggle-Animations.md b/MAUI/NavigationDrawer/Toggle-Animations.md index 226a5bd756..8ec52afd72 100644 --- a/MAUI/NavigationDrawer/Toggle-Animations.md +++ b/MAUI/NavigationDrawer/Toggle-Animations.md @@ -1,14 +1,15 @@ --- layout: post title: Setting Toggle Animations in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn here all about Setting Toggle Animations support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +description: Learn about setting toggle animations support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- + # Setting Toggle Animations in .NET MAUI Navigation Drawer -The drawer toggling animation can be changed using the [Transition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Transition) property, and it can be set to three different values. Which are: +The drawer toggling animation can be changed using the [Transition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Transition) property. It can be set to three different values. * [SlideOnTop](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.Transition.html#Syncfusion_Maui_NavigationDrawer_Transition_SlideOnTop) diff --git a/MAUI/NavigationDrawer/Toggling-Drawer.md b/MAUI/NavigationDrawer/Toggling-Drawer.md index 9678b84283..225d12ebf7 100644 --- a/MAUI/NavigationDrawer/Toggling-Drawer.md +++ b/MAUI/NavigationDrawer/Toggling-Drawer.md @@ -1,20 +1,22 @@ --- layout: post -title: Toggle methods in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn here all about Toggle methods support in Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. -platform: maui -control: NavigationDrawer -documentation: ug +title: Toggle Methods in .NET MAUI Navigation Drawer | Syncfusion® +description: Learn about toggle methods support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +platform: MAUI +control: SfNavigationDrawer +documentation: UG --- -# Toggle methods in .NET MAUI Navigation Drawer (SfNavigationDrawer) -Drawer can be toggled using +# Toggle Methods in .NET MAUI Navigation Drawer (SfNavigationDrawer) -* IsOpen property -* ToggleDrawer method -* Swipe gesture +The drawer in the SfNavigationDrawer can be toggled using the following methods: + +* IsOpen Property +* ToggleDrawer Method +* Swipe Gesture ## Opening Drawer Programmatically + The [IsOpen](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_IsOpen) property and [ToggleDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method enable programmatically opening or closing the drawer. {% tabs %} @@ -37,7 +39,7 @@ SfNavigationDrawer navigationDrawer = new SfNavigationDrawer() {% endtabs %} -Using [ToggleDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method, +Using [ToggleDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method: {% highlight c# %} @@ -45,4 +47,4 @@ navigationDrawer.ToggleDrawer(); {% endhighlight %} -Toggling drawer by swipe gesture is explained in [Swipe Gesture and Sensitivity](https://help.syncfusion.com/maui/navigationdrawer/swipe-gesture) section. \ No newline at end of file +Toggling drawer by swipe gesture is explained in the [Swipe Gesture and Sensitivity](https://help.syncfusion.com/maui/navigationdrawer/swipe-gesture) section. \ No newline at end of file diff --git a/MAUI/Radial-Menu/CenterButton-Customization.md b/MAUI/Radial-Menu/CenterButton-Customization.md index 5c83a35bbf..963a08d0df 100644 --- a/MAUI/Radial-Menu/CenterButton-Customization.md +++ b/MAUI/Radial-Menu/CenterButton-Customization.md @@ -1,19 +1,19 @@ --- layout: post title: CenterButton Customization in MAUI Radial Menu Control | Syncfusion® -description: Learn here all about CenterButton Customization support in Syncfusion® Maui Radial Menu(SfRadialMenu) control and more. +description: Learn about CenterButton Customization support in Syncfusion® MAUI Radial Menu(SfRadialMenu) control and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # CenterButton Customization in MAUI Radial Menu (SfRadialMenu) -The CenterButton or BackButton in radial menu is a view in the center of the radial menu. It performs the operations such as opening and closing the rim and navigating to the next level items. The radial menu allows you customize the CenterButton/BackButton with `FontIcon`, `Custom View`, and `Caption`. +The CenterButton or BackButton in the radial menu is a view in the center of the radial menu. It performs operations such as opening and closing the rim and navigating to the next-level items. You can customize the CenterButton/BackButton with `FontIcon`, `Custom View`, and `Caption`. ## CenterButtonText and CenterButtonBackText -The [`CenterButtonText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonText) changes the text of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), and the [`CenterButtonBackText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackText) changes the text of the center back button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonText) changes the text of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), and the [`CenterButtonBackText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackText) changes the text of the center back button. {% tabs %} @@ -106,7 +106,7 @@ namespace RadialSample ## CenterButtonTextColor and CenterButtonBackTextColor -The [`CenterButtonTextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonTextColor) changes the text color of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), and the [`CenterButtonBackTextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackTextColor) changes the text color of the center back button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonTextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonTextColor) changes the text color of the center button, and the [`CenterButtonBackTextColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackTextColor) changes the text color of the center back button. {% tabs %} @@ -202,7 +202,7 @@ namespace RadialSample ## CenterButtonBackgroundColor -The [`CenterButtonBackgroundColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackgroundColor) changes the background color of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonBackgroundColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackgroundColor) changes the background color of the center button. {% tabs %} @@ -270,7 +270,7 @@ namespace RadialSample ## CenterButtonRadius -The [`CenterButtonRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonRadius) changes the radius of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonRadius) changes the radius of the center button. {% tabs %} @@ -332,7 +332,7 @@ namespace RadialSample ## CenterButtonFontFamily and CenterButtonBackFontFamily -The [`CenterButtonFontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontFamily) changes the font family of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), and the [`CenterButtonBackFontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackFontFamily) changes the font family of the center back button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonFontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontFamily) changes the font family of the center button, and the [`CenterButtonBackFontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackFontFamily) changes the font family of the center back button. {% tabs %} @@ -425,7 +425,7 @@ namespace RadialSample ## CenterButtonFontSize and CenterButtonBackFontSize -The [`CenterButtonFontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontSize) changes the font size of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), and the [`CenterButtonBackFontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html?tabs=tabid-1%2Ctabid-3%2Ctabid-36#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackFontSize) changes the font size of the center back button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonFontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontSize) changes the font size of the center button, and the [`CenterButtonBackFontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html?tabs=tabid-1%2Ctabid-3%2Ctabid-36#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackFontSize) changes the font size of the center back button. {% tabs %} @@ -522,7 +522,7 @@ namespace RadialSample ## CenterButtonFontAttributes and CenterButtonBackFontAttributes -The [`CenterButtonFontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontAttributes) changes the font attributes of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonFontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontAttributes) changes the font attributes of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), while the [CenterButtonBackFontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackFontAttributes) applies similar changes to the center back button. {% tabs %} @@ -615,7 +615,7 @@ namespace RadialSample ## CenterButtonStroke -The [`CenterButtonStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonStroke) changes the stroke color of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`CenterButtonStroke`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonStroke) property changes the stroke color of the center button in the [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). {% tabs %} @@ -742,7 +742,7 @@ namespace RadialSample ## CenterButtonView and CenterButtonBackView -You can customize the center button using [`CenterButtonView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonView) and center back button using [`CenterButtonBackView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackView) in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +You can customize the center button using [`CenterButtonView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonView) and the center back button using [`CenterButtonBackView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackView) in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). {% tabs %} @@ -862,7 +862,7 @@ namespace RadialSample ## EnableCenterButtonAnimation -The [`EnableCenterButtonAnimation`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_EnableCenterButtonAnimation) is used to either enable or disable animation of the center button in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`EnableCenterButtonAnimation`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_EnableCenterButtonAnimation) property allows you to enable or disable animation of the center button in the [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). {% tabs %} diff --git a/MAUI/Radial-Menu/Events.md b/MAUI/Radial-Menu/Events.md index 74018fa7bd..0252c4e0d4 100644 --- a/MAUI/Radial-Menu/Events.md +++ b/MAUI/Radial-Menu/Events.md @@ -4,14 +4,14 @@ title: Events in MAUI Radial Menu Control | Syncfusion® description: Learn about Events in Syncfusion® Essential Studio® .NET MAUI Radio Menu control, its elements and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # Events in MAUI Radial Menu (SfRadialMenu) -## Perform an action while navigating to next level +## Perform an Action While Navigating to the Next Level -In radial menu, you can perform an action while navigating from one level to another level. The [`Navigating`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigating) event occurs when navigating from one level to another level and the [`Navigated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigated) event occurs after navigating to another level. +In the radial menu, you can perform an action while navigating between levels. The [`Navigating`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigating) event occurs when moving from one level to another, and the [`Navigated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigated) event triggers after reaching the new level. {% tabs %} @@ -85,9 +85,9 @@ namespace RadialSample N> You can cancel navigation using the `Cancel` event argument. -## Perform an action while opening the radial menu +## Perform an Action While Opening the Radial Menu -You can perform an action while opening the radial menu. The [`Opening`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opening) event occurs when opening the radial menu and the [`Opened`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opened) event occurs after opening the radial menu. +You can perform an action while opening the radial menu. The [`Opening`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opening) event occurs when the radial menu begins to open, and the [`Opened`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opened) event occurs once it is fully open. {% tabs %} @@ -159,9 +159,9 @@ namespace RadialSample {% endtabs %} -## Perform an action while closing the radial menu +## Perform an Action While Closing the Radial Menu -You can perform an action when closing the radial menu. The [`Closing`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closing) event occurs when closing the radial menu and the [`Closed`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closed) event occurs after closing the radial menu. +You can perform an action when closing the radial menu. The [`Closing`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closing) event event occurs when the radial menu begins to close, and the [`Closed`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closed) event occurs once it is completely closed. {% tabs %} @@ -233,9 +233,9 @@ namespace RadialSample {% endtabs %} -## Perform an action while tapping the center back button +## Perform an Action While Tapping the Center Back Button -You can perform an action when tapping the center back button of the radial menu. The [`CenterButtonBackTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackTapped) event occurs when tapping the center button of the radial menu. +You can perform an action when tapping the center back button of the radial menu. The [`CenterButtonBackTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackTapped) event occurs when the center button of the radial menu is tapped. {% tabs %} @@ -299,9 +299,9 @@ namespace RadialSample {% endtabs %} -## Perform an action while tapping the radial menu item +## Perform an Action While Tapping the Radial Menu Item -You can perform an action when tapping the radial menu item of the radial menu. The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemTapped) event occurs when tapping the items of the radial menu. +You can perform an action when tapping the radial menu item of the radial menu. The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemTapped) event is triggered when any item in the radial menu is tapped. {% tabs %} @@ -365,9 +365,9 @@ namespace RadialSample {% endtabs %} -## Perform an action while Pressing and Releasing the Radial menu item +## Perform an Action While Pressing and Releasing the Radial Menu Item -You can perform an action when pressing and releasing the Radial menu item of the Radial menu. The [TouchDown](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchDown) event occurs when pressing the Radial menu item and the [TouchUp](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchUP) event occurs When releasing the Radial menu item. +You can perform an action when pressing and releasing the Radial menu item of the Radial menu. The [TouchDown](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchDown) event occurs when pressing the Radial menu item, and the [TouchUp](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchUP) event occurs on releasing. {% tabs %} diff --git a/MAUI/Radial-Menu/Getting-Started.md b/MAUI/Radial-Menu/Getting-Started.md index 0f678a3a37..6adb0539a5 100644 --- a/MAUI/Radial-Menu/Getting-Started.md +++ b/MAUI/Radial-Menu/Getting-Started.md @@ -1,10 +1,10 @@ --- layout: post title: Getting Started with MAUI Radial Menu Control | Syncfusion® -description: Learn here about getting started with Syncfusion® MAUI Radial Menu (SfRadialMenu) control, its elements and more. +description: Learn about getting started with the Syncfusion® MAUI Radial Menu (SfRadialMenu) control, its elements, and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # Getting Started with .NET MAUI Radial Menu @@ -19,26 +19,27 @@ To quickly get started with the .NET MAUI Radial Menu, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install the [.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.3 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.** +2. Name the project and choose a location. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI RadialMenu NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.RadialMenu](https://www.nuget.org/packages/Syncfusion.Maui.RadialMenu/) 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. +[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. {% tabs %} {% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 8" %} @@ -68,7 +69,7 @@ Before proceeding, ensure the following are set up: ## Step 4: Add a RadialMenu 1. To initialize the control, import the RadialMenu namespace into your code. -2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) +2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). {% tabs %} {% highlight xaml %} @@ -106,18 +107,19 @@ namespace RadialMenuGettingStarted {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +1. Install the [.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 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, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI RadialMenu NuGet Package @@ -126,9 +128,9 @@ Before proceeding, ensure the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.RadialMenu` to install the Syncfusion® .NET MAUI RadialMenu package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. +[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. {% tabs %} {% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 8" %} @@ -158,7 +160,7 @@ Before proceeding, ensure the following are set up: ## Step 4: Add a RadialMenu 1. To initialize the control, import the RadialMenu namespace into your code. -2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) +2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). {% tabs %} {% highlight xaml %} @@ -200,24 +202,24 @@ namespace RadialMenuGettingStarted Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install the [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI RadialMenu NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.RadialMenu](https://www.nuget.org/packages/Syncfusion.Maui.RadialMenu/) 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` +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 +## 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/) NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. {% tabs %} {% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 8" %} @@ -247,7 +249,7 @@ Before proceeding, ensure the following are set up: ## Step 4: Add a RadialMenu 1. To initialize the control, import the RadialMenu namespace into your code. -2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) +2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). {% tabs %} {% highlight xaml %} @@ -284,7 +286,7 @@ namespace RadialMenuGettingStarted {% endtabcontent %} {% endtabcontents %} -## Adding radial menu with items +## Adding Radial Menu with Items {% tabs %} @@ -370,7 +372,7 @@ namespace RadialMenuGettingStarted ![Getting started in .NET MAUI RadialMenu control.](images/getting-started/maui-radialmenu-getting-started.png) -N> You can find the getting started sample of .NET MAUI SfRadialMenu from this [link.](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-Radial-Menu) +N> You can find the getting started sample of .NET MAUI SfRadialMenu from this [link](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-Radial-Menu). diff --git a/MAUI/Radial-Menu/Overview.md b/MAUI/Radial-Menu/Overview.md index b0826cf7ff..f48dde347b 100644 --- a/MAUI/Radial-Menu/Overview.md +++ b/MAUI/Radial-Menu/Overview.md @@ -1,15 +1,15 @@ --- layout: post title: About MAUI Radial Menu Control | Syncfusion® -description: Learn here all about introduction of Syncfusion® MAUI Radial Menu (SfRadialMenu) control, its elements and more. +description: Learn about the introduction of the Syncfusion® MAUI Radial Menu (SfRadialMenu) control, its elements, and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # .NET MAUI RadialMenu (SfRadialMenu) Overview - The [.NET MAUI RadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu) control displays a hierarchical menu in a circular layout, which is optimized for touch-enabled devices. Typically, it is used as a context menu, and it can expose more menu items in the same space than traditional menus. + The [.NET MAUI RadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu) control displays a hierarchical menu in a circular layout, optimized for touch-enabled devices. It is typically used as a context menu and can expose more menu items in the same space than traditional menus. ![Overview in .NET MAUI SfRadialMenu](images/overview/maui-radialmenu-overview.png) @@ -17,10 +17,10 @@ documentation: ug `Drag` : The SfRadialMenu can be floated over the layout to avoid obscuring the content behind it. `Rotation` : SfRadialMenu supports rotating items. -`FontIcon`: The built-in icon font option helps users add vector images that prevent the control from experiencing any image glitches often faced with traditional image icons. -`Custom view` : SfRadialMenu supports the custom view like image. +`FontIcon`: The built-in icon font option helps users add vector images, preventing image glitches often faced with traditional image icons. +`Custom view` : SfRadialMenu supports custom views like images. `Custom segments` : Complete customization options for the menu and its items, such as coloring, sizing, placement, and shapes, using the segmentation option. -`Auto arrange` : SfRadialMenu supports automatic item arrangement +`Auto arrange` : SfRadialMenu supports automatic item arrangement. diff --git a/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md b/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md index 6887476152..7615117a15 100644 --- a/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md +++ b/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md @@ -1,19 +1,19 @@ --- layout: post title: Placing and Dragging in MAUI Radial Menu Control | Syncfusion® -description: Learn here all about Placing and Dragging RadialMenu support in Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. +description: Learn all about placing and dragging RadialMenu support in Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # Placing and Dragging RadialMenu in MAUI Radial Menu (SfRadialMenu) -You can place radial menu anywhere on its parent layout, and drag it with in the parent layout. +You can place radial menu anywhere on its parent layout and drag it within the parent layout. ## Dragging RadialMenu -You can enable/disable dragging by using the [`IsDragEnabled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsDragEnabled) property. +You can enable or disable dragging by using the [`IsDragEnabled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsDragEnabled) property. {% tabs %} @@ -73,17 +73,17 @@ namespace RadialSample ## DragEvents -[`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) provides for event for [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) in which the event get hooked when the RadialMenu is get dragged. +[`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) provides an event for [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) that is triggered when the RadialMenu begins to be dragged. ### DragBegin event -This event get triggered when RadialMenu is start to drag with [`DragBeginEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html). +This event is triggered when the RadialMenu starts to drag, using [`DragBeginEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html). -* [`Position`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Position) - Gets the Start position of the RadialMenu. +* [`Position`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Position) - Gets the starting position of the RadialMenu. -* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Handled) - Gets and Sets the boolean value for enabling and disabling the dragging of RadialMenu. +* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Handled) - Gets and sets a boolean value for enabling or disabling the dragging of the RadialMenu. -To hook the [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) event, and to get the start position and restricts the dragging, follow the code example: +To hook the [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) event to obtain the start position and restrict dragging, follow the code example: {% tabs %} @@ -143,17 +143,17 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -### Drag End +### DragEnd event -This event get triggered when dragging is ended in RadialMenu with [`DragEndEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html). +This event is triggered when dragging ends in the RadialMenu, using [`DragEndEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html). -* [`OldValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_OldValue) - Gets the Start position of the RadialMenu. +* [`OldValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_OldValue) - Gets the start position of the RadialMenu. * [`NewValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_NewValue) - Gets the end position of the RadialMenu. -* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_Handled) - Gets and Sets the boolean value for restricting the RadialMenu to move another position. +* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_Handled) - Gets and sets a boolean value to restrict the RadialMenu from moving to another position. -To hook the [`DragEnd`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragEnd) event, and to get the start position, end position and restricts the movement of the RadialMenu, follow the code example: +To hook the [`DragEnd`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragEnd) event and obtain start position, end position, and restrict movement, follow the code example: {% tabs %} @@ -217,7 +217,7 @@ namespace RadialSample ## Placing RadialMenu -You can place radial menu anywhere on its parent layout. Radial Menu's position is calculated based on parent layout's center point. +You can place the radial menu anywhere on its parent layout. The position of the RadialMenu is calculated based on the parent layout's center point. {% tabs %} diff --git a/MAUI/Radial-Menu/Populating-Items.md b/MAUI/Radial-Menu/Populating-Items.md index 20912bbc58..78ade65cfe 100644 --- a/MAUI/Radial-Menu/Populating-Items.md +++ b/MAUI/Radial-Menu/Populating-Items.md @@ -1,23 +1,23 @@ --- layout: post title: Populating Items in MAUI Radial Menu Control | Syncfusion® -description: Learn here all about Populating Items support in Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. +description: Learn about item population support in the Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # Populating Items in MAUI Radial Menu (SfRadialMenu) -This section explains the ways about populating items through radial menu item and item source with item template. +This section explains how to populate items through radial menu items and item sources with item templates. -## Through radial menu items +## Through Radial Menu Items -By passing a collection of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), you can get the view of [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) control. The radial menu item class provides various options to customize the items by giving custom views, font icons, and images. You can add radial menu items by hierarchy. +By passing a collection of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), you can view the [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) control. The radial menu item class provides various options to customize items by providing custom views, font icons, and images. You can add radial menu items hierarchically. ### Text -The following code sample demonstrates how to Create a RadialMenu control with Items having the given text. +The following code sample demonstrates how to create a RadialMenu control with items having the given text. {% tabs %} @@ -78,9 +78,9 @@ N> Instead of using ObservableCollection, use [`RadialMenuItemsCollection`](http ![Display text in .NET MAUI RadialMenu](images/populating-items/maui-radialmenu-populating-only-text.png) -### Image with text +### Image with Text -The following code sample demonstrates how to Display images and text in the RadialMenu items of the control. +The following code sample demonstrates how to display images and text in the RadialMenu items of the control. {% tabs %} @@ -139,9 +139,9 @@ namespace RadialSample ![Display image with text in .NET MAUI RadialMenu.](images/populating-items/maui-radialmenu-populating-text-with-images.png) -## Custom font with text +## Custom Font with Text -The following code sample demonstrates how to Display custom font with text in the RadialMenu items of the control. +The following code sample demonstrates how to display custom font with text in the RadialMenu items of the control. {% tabs %} @@ -224,9 +224,9 @@ namespace RadialSample ![Display font with text in .NET MAUI RadialMenu.](images/populating-items/maui-radialmenu-populating-text-icons.png) -### Adding nested items of Radial menu +### Adding Nested Items of Radial Menu -You can populate the nested levels of items within a menu to group similar actions based on their result. For example, you can group the clipboard operations by adding a clipboard as a main menu and cut, copy, and paste as its children. +You can populate nested levels of items within a menu to group similar actions. For example, you can group clipboard operations by adding a clipboard as a main menu and cut, copy, and paste as its children. The following code sample demonstrates how to add the nested items of radial menu. @@ -324,7 +324,7 @@ namespace RadialSample ## Through ItemsSource and ItemTemplate -Using [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemsSource), objects of any class can be given as items for [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). The views corresponding to the objects can be set using the [`ItemTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemTemplate) property. A simple usage of [`ItemTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemTemplate) and [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemsSource) to display a default image and name of users is shown in the following code. +Using [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemsSource), objects of any class can be used as items in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). The views corresponding to the objects can be set using the [`ItemTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemTemplate) property. A simple usage of [`ItemTemplate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemTemplate) and [`ItemsSource`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_ItemsSource) to display a list of users with images and names is shown in the following code. {% tabs %} @@ -417,9 +417,9 @@ namespace RadialSample ![Display RadialMenu with ItemsSource and ItemTemplate.](images/populating-items/maui-radialmenu-populating-itemssource-with-itemtemplate.png) -## Animation duration +## Animation Duration -Duration of animation in radial menu can be changed using the [`AnimationDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_AnimationDuration) property. It is used to change the speed of opening and closing of radial menu. +The animation duration in a radial menu can be changed using the [`AnimationDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_AnimationDuration) property. It is used to change the speed of opening and closing of the radial menu. {% tabs %} @@ -479,7 +479,7 @@ namespace RadialSample ## IsOpen -The [`IsOpen`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsOpen) property indicates whether the radial menu is in open or close state. +The [`IsOpen`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsOpen) property indicates whether the radial menu is in an open or closed state. {% tabs %} @@ -537,9 +537,9 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Separator thickness and color in Radial menu +## Separator Thickness and Color in Radial menu -Thickness of strip between the two items can be changed using the [`SeparatorThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SeparatorThickness) property and the color of strip can be changed using the [`SeparatorColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SeparatorColor) property. +The thickness of the strip between items can be changed using the [`SeparatorThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SeparatorThickness) property, and the color of the strip can be changed using the [`SeparatorColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SeparatorColor) property. {% tabs %} @@ -600,9 +600,9 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Rim color and rim radius in Radial menu +## Rim Color and Rim Radius in Radial menu -The radius of rim can be changed using the [`RimRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_RimRadius) property and the color of rim can be changed using the [`RimColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_RimColor) property. +The radius of the rim can be changed using the [`RimRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_RimRadius) property, and the color of the rim can be changed using the [`RimColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_RimColor) property. {% tabs %} @@ -663,7 +663,7 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Display member path +## Display Member Path The control is populated with a list of employees, and the employee model contains two properties: ID and EmployeeName. So, it is necessary to intimate by which property it should display to the items. The [`DisplayMemberPath`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DisplayMemberPath) property specifies the property path. diff --git a/MAUI/Radial-Menu/Segmenting-Placing-Items.md b/MAUI/Radial-Menu/Segmenting-Placing-Items.md index fc213a10b2..c82f4f826a 100644 --- a/MAUI/Radial-Menu/Segmenting-Placing-Items.md +++ b/MAUI/Radial-Menu/Segmenting-Placing-Items.md @@ -1,15 +1,15 @@ --- layout: post -title: Segmenting and Placing the Items in .NET MAUI Radial Menu | Syncfusion® -description: Learn about Segmenting and Placing the Items in .NET MAUI Radio Menu control, its elements and more. +title: Segmenting and Placing Items in .NET MAUI Radial Menu | Syncfusion® +description: Learn about segmenting and placing items in the .NET MAUI Radio Menu control, its elements, and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- -# Segmenting and Placing the Items in .NET MAUI Radial Menu +# Segmenting and Placing Items in .NET MAUI Radial Menu -There are two different layout types available for radial menu: +There are two layout types available for the radial menu: * [`Default`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Default) * [`Custom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Custom) @@ -18,7 +18,7 @@ Both the layout types divide the available space equally among all the children ## Default -Number of segments in the panel is determined by children count in the level. Hence, segment count in each hierarchical level differs, radial menu items are arranged in the sequential order as added in the radial menu. +The number of segments in the panel is determined by the count of children in each level. As the segment count differs in each hierarchical level, radial menu items are arranged in the sequential order they are added. {% tabs %} @@ -49,7 +49,7 @@ Number of segments in the panel is determined by children count in the level. He ## Custom -The number of segments in the panel is determined using the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property. Since the segment count in all the hierarchical levels are same, radial menu items are arranged in any order based on the [`SegmentIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_SegmentIndex) property. +The number of segments in the panel is determined by the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property. Since the segment count is the same across all hierarchical levels, radial menu items can be arranged in any order based on the [`SegmentIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_SegmentIndex) property. {% tabs %} @@ -80,13 +80,13 @@ The number of segments in the panel is determined using the [`VisibleSegmentsCou ### VisibleSegmentsCount -The [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property is used to specify the number of segments available in circular panel. When children count is greater than the value given in the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property, the overflowing children are not arranged in the panel. When children count is lesser than the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property, then remaining segments are left free. If number of item count is higher than VisibleItemCount, excessive items will not be shown. +The [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property specifies the number of segments in circular panel. If the children count exceeds this value, the overflowing children are not displayed. If the children count is less than the [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount), the remaining segments are left free. Excessive items beyond the `VisibleItemCount` are not shown. ### SegmentIndex -[`SegmentIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_SegmentIndex) property is used to specify the index of the radial menu item in circular panel. Based on the index, the radial menu items are inserted in the segment. When the `SegmentIndex` is not specified for a RadialMenuItem the menu item is arranged in the next available free segment. +The [`SegmentIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_SegmentIndex) property specifies the index of a radial menu item in the circular panel. Based on the index, items are inserted into segment. If the `SegmentIndex` is not specified for a `RadialMenuItem`, the item is arranged in the next available free segment. -## Code snippet for VisibleSegmentCount and SegmentIndex +## Code Snippet for VisibleSegmentCount and SegmentIndex {% tabs %} @@ -229,4 +229,4 @@ namespace RadialSample ![VisibleSegment.](images/segmentation/maui-radialmenu-segmentation-segmentIndex.png) -N> The [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property is only applicable for [`Custom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Custom) layout. \ No newline at end of file +N> The [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property applies only to the [`Custom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Custom) layout. \ No newline at end of file diff --git a/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md b/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md index 7a3e0a3c46..14c8e99207 100644 --- a/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md +++ b/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md @@ -1,19 +1,19 @@ --- layout: post title: SfRadialMenuItems Customization in MAUI Radial Menu | Syncfusion® -description: Learn here all about SfRadialMenuItems Customization support in Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. +description: Learn about SfRadialMenuItems customization support in the Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI control: RadialMenu (SfRadialMenu) -documentation: ug +documentation: UG --- # SfRadialMenuItems Customization in MAUI Radial Menu (SfRadialMenu) -The [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) class provides various options to customize the items by giving `Custom Views`, `FontIcons`, and `Images`. You can add radial menu items by hierarchy. To add a [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) with [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), create an instance of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), and add it to the [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Items) property, which is available in [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html). +The [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) class provides various options to customize items with `Custom Views`, `FontIcons`, and `Images`. You can add radial menu items by hierarchy. To add a [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) to a [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), create an instance of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), and add it to the [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Items) property. ## Items -The [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Items) property populates the items to the inner rim of [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) when tapping the items of outer rim. +The [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Items) property populates items on the inner rim of the [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) when tapping the outer rim items. {% tabs %} @@ -162,7 +162,7 @@ namespace RadialSample ## ItemHeight and ItemWidth -The [`ItemHeight`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemHeight) changes the height of the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) and The [`ItemWidth`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemWidth) property changes the width of the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). +The [`ItemHeight`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemHeight) property changes the height, and the [`ItemWidth`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemWidth) property changes the width of the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). {% tabs %} @@ -292,7 +292,7 @@ namespace RadialSample ## FontFamily -The [`FontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontFamily) property changes the font family of text in [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). +The [`FontFamily`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontFamily) property changes the font family of text in the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). {% tabs %} @@ -350,7 +350,7 @@ namespace RadialSample ## FontSize -The [`FontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontSize) property changes the text size in the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). +The [`FontSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontSize) property adjusts the text size in the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). {% tabs %} @@ -409,7 +409,7 @@ namespace RadialSample ## FontAttributes -The [`FontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontAttributes) property changes the font attributes of text in [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). +The [`FontAttributes`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontAttributes) property allows you to change the font attributes of text in the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). {% tabs %} @@ -463,7 +463,7 @@ namespace RadialSample ## Image -The [`Image`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Image) property provides image to the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). +The [`Image`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Image) property is used to specify an image for the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). {% tabs %} @@ -521,7 +521,7 @@ namespace RadialSample ## View -The [`View`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_View) provides custom view to the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). +The [`View`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_View) property allows you to add a custom view to the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). {% tabs %} @@ -613,9 +613,9 @@ namespace RadialSample ### Command and CommandParameter for SfRadialMenuItem -The [`Command`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Command) property is used to associate a command with an instance of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). 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.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Command) property is used to associate a command with an instance of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html). This property is typically set using the MVVM pattern to bind callbacks back into the ViewModel. -When clicking the [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), the tapped item will be displayed. The following example shows how the command should be used. +When you click an [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), the item that is tapped will trigger a display action. Below is an example demonstrating how to use the command. {% tabs %} {% highlight xaml %} @@ -682,7 +682,7 @@ namespace RadialMenuCommandSample {% endhighlight %} {% endtabs %} -Define the [`Command`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Command) in the RadialMenuItem, and then populate the action in ViewModel. +Define the [`Command`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Command) in the RadialMenuItem, then populate the action in the ViewModel. {% highlight c#%} @@ -730,9 +730,9 @@ namespace RadialMenuCommandSample {% endhighlight %} -## Font auto scaling enabled +## Font Auto Scaling Enabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontAutoScalingEnabled) property is used to automatically scale the Radial menu item's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false.` +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontAutoScalingEnabled) property is used to automatically scale the Radial menu item's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false`. {% tabs %} diff --git a/MAUI/Radial-Menu/migration.md b/MAUI/Radial-Menu/migration.md index 79d27fd77d..21bc2a67ef 100644 --- a/MAUI/Radial-Menu/migration.md +++ b/MAUI/Radial-Menu/migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrate from Xamarin to .NET MAUI SfRadialMenu | Syncfusion® -description: Learn about Migrating from Syncfusion® Xamarin.Forms RadialMenu control to .NET MAUI RadialMenu control. -platform: maui +description: Learn about migrating from the Syncfusion® Xamarin.Forms RadialMenu control to the .NET MAUI RadialMenu control. +platform: MAUI control: RadialMenu (SfRadialMenu) control -documentation: ug +documentation: UG --- # Migrate from Xamarin.Forms RadialMenu to .NET MAUI RadialMenu Control -To make the migration from the [Xamarin SfRadialMenu Control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-radial-menu) to the [.NET MAUI SfRadialMenu Control](https://www.syncfusion.com/maui-controls/maui-radial-menu) easier, most of the APIs from the `Xamarin SfRadialMenu Control` were kept in the `.NET MAUI SfRadialMenu Control`. However, to maintain the consistency of API naming in the `.NET MAUI SfRadialMenu Control`, some of the APIs have been renamed. Please find the difference in the following topics. +To simplify the migration from the [Xamarin SfRadialMenu Control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-radial-menu) to the [.NET MAUI SfRadialMenu Control](https://www.syncfusion.com/maui-controls/maui-radial-menu), most of the APIs from the `Xamarin SfRadialMenu Control` have been retained in the `.NET MAUI SfRadialMenu Control`. However, to maintain the consistency in API naming within the `.NET MAUI SfRadialMenu Control`, some APIs have been renamed. The following sections outline the differences. ## Namespaces @@ -24,7 +24,7 @@ To make the migration from the [Xamarin SfRadialMenu Control](https://www.syncfu ## Initialize Control -To initialize the control, import the radialMenu control namespace and initialize the [SfRadialMenu]() as shown in the following code sample. +To initialize the control, import the radial menu control namespace and initialize the [SfRadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu) as shown in the following code sample. @@ -98,24 +98,24 @@ this.Content = radialMenu; - + - +
{{'[CenterButtonBorderColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRadialMenu.XForms.SfRadialMenu.html#Syncfusion_SfRadialMenu_XForms_SfRadialMenu_CenterButtonBorderColor)'}} {{'[CenterButtonStroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonStroke)'}}Gets or sets a value of the stroke brush for the centerbuttonstroke in the SfRadialMenu.Gets or sets a value of the stroke brush for the center button's stroke in the SfRadialMenu.
{{'[CenterButtonBorderThickness](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRadialMenu.XForms.SfRadialMenu.html#Syncfusion_SfRadialMenu_XForms_SfRadialMenu_CenterButtonBorderThickness)'}} {{'[CenterButtonStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonStrokeThickness)'}}Gets or sets a value of the the strokethickness for the centerbuttonstrokethickness in the SfRadialMenu.Gets or sets a value of the the stroke thickness for the center button's stroke thickness in the SfRadialMenu.
## Upcoming features in .NET MAUI RadialMenu -* LayoutType that determines arrangement of items on rim either automatic or user defined. -* VisibleSegmentCount that determines the number of segments visible at a time on the menu. -* Selection allows you to highlight or choose segments within the hierarchy. -* CenterButtonPlacement that specifies the position of the center button within the menu. -* Accessibility. +* **LayoutType:** Determines the arrangement of items on the rim, either automatic or user-defined. +* **VisibleSegmentCount:** Determines the number of segments visible at a time on the menu. +* **Selection:** Allows you to highlight or choose segments within the hierarchy. +* **CenterButtonPlacement:** Specifies the position of the center button within the menu. +* **Accessibility:** Enhancements for better usability. ## Support and feedback diff --git a/MAUI/TabView/Events.md b/MAUI/TabView/Events.md index d595f28768..a98b78306c 100644 --- a/MAUI/TabView/Events.md +++ b/MAUI/TabView/Events.md @@ -1,19 +1,19 @@ --- layout: post title: Events in .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn about Event support in the Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements, and more. -platform: maui +description: Learn about event support in the Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements, and more. +platform: MAUI control: SfTabView -documentation: ug +documentation: UG --- # Events in .NET MAUI Tab View This section provides information about the events available in the .NET MAUI Tab View control. -## Tab Item Tapped event +## TabItemTapped event -The [`TabItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabItemTapped) event will be triggered whenever tapping the Tab.The [`TabItemTappedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemTappedEventArgs.html) provides the following properties: +The [`TabItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabItemTapped) event is triggered whenever a tab is tapped.The [`TabItemTappedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemTappedEventArgs.html) provides the following properties: * [`TabItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemTappedEventArgs.html#Syncfusion_Maui_TabView_TabItemTappedEventArgs_TabItem) : Gets the selected tab item of Tab View control. * [`Cancel`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemTappedEventArgs.html#Syncfusion_Maui_TabView_TabItemTappedEventArgs_Cancel) : Gets or sets a value indicating whether the event should be canceled. @@ -42,9 +42,9 @@ private void TabView_TabItemTapped(object sender, TabItemTappedEventArgs e) {% endtabs %} -## Selection Changing event +## SelectionChanging event -The [`SelectionChanging`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectionChanging) event notifies before the selection changes, tapping the tab header, and dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView. The [`SelectionChangingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SelectionChangingEventArgs.html) provides the following properties: +The [`SelectionChanging`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectionChanging) event notifies before the selection changes, when the tab header is tapped, or when dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView. The [`SelectionChangingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SelectionChangingEventArgs.html) provides the following properties: * [`Index`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SelectionChangingEventArgs.html#Syncfusion_Maui_TabView_SelectionChangingEventArgs_Index) - Gets the index value of the item that is about to be selected. @@ -74,13 +74,13 @@ private void TabView_SelectionChanging(object sender, SelectionChangingEventArgs {% endtabs %} -## Selection Changed event +## SelectionChanged event -The [`SelectionChanged`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectionChanged) 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.TabView.SfTabView.html?tabs=tabid-1#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView. The [`TabSelectionChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html) provides the following properties: +The [`SelectionChanged`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectionChanged) event is used to notify when the selection is changes by swiping or dynamically setting the [`SelectedIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView. The [`TabSelectionChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html) provides the following properties: -* [`NewValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html#Syncfusion_Maui_TabView_TabSelectionChangedEventArgs_NewIndex) : Gets the index of currently selected tab item. -* [`OldValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html#Syncfusion_Maui_TabView_TabSelectionChangedEventArgs_OldIndex) : Gets the index of previously selected tab item. -* [`Handled `](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html#Syncfusion_Maui_TabView_TabSelectionChangedEventArgs_Handled) : Gets or sets a value indicating whether the SelectionChanged event is handled. +* [`NewValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html#Syncfusion_Maui_TabView_TabSelectionChangedEventArgs_NewIndex) : Gets the index of the currently selected tab item. +* [`OldValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html#Syncfusion_Maui_TabView_TabSelectionChangedEventArgs_OldIndex) : Gets the index of the previously selected tab item. +* [`Handled `](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabSelectionChangedEventArgs.html#Syncfusion_Maui_TabView_TabSelectionChangedEventArgs_Handled) : Gets or sets a value indicating whether the `SelectionChanged` event is handled. {% tabs %} diff --git a/MAUI/TabView/Getting-Started.md b/MAUI/TabView/Getting-Started.md index 3d7a48503e..e36ff5bea9 100644 --- a/MAUI/TabView/Getting-Started.md +++ b/MAUI/TabView/Getting-Started.md @@ -1,13 +1,13 @@ --- layout: post title: Getting started with .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn here all about getting started with Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements and more. -platform: maui +description: Learn all about getting started with the Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements, and more. +platform: MAUI control: Tab View -documentation: ug +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 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Getting Started with .NET MAUI Tab View @@ -21,26 +21,27 @@ To quickly get started with the .NET MAUI Tab View, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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.3 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. Then, click **Next**. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI TabView 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.TabView](https://www.nuget.org/packages/Syncfusion.Maui.TabView/) 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. +[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; @@ -76,7 +77,7 @@ namespace TabViewMauiSample 1. To initialize the control, import the TabView namespace into your code. -2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) +2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). {% tabs %} @@ -117,18 +118,19 @@ namespace TabViewGettingStarted {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: -1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. +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 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, type the project name and press **Enter**. +4. Then choose **Create project**. ## Step 2: Install the Syncfusion® MAUI TabView NuGet Package @@ -137,9 +139,9 @@ Before proceeding, ensure the following are set up: 3. Run the command `dotnet add package Syncfusion.Maui.TabView` to install the Syncfusion® .NET MAUI TabView package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. +[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; @@ -175,7 +177,7 @@ namespace TabViewMauiSample 1. To initialize the control, import the TabView namespace into your code. -2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) +2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). {% tabs %} @@ -221,24 +223,24 @@ namespace TabViewGettingStarted Before proceeding, ensure the following are set up: 1. Ensure you have the latest version of JetBrains Rider. -2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. -3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start) +2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). ## Step 1: Create a new .NET MAUI Project -1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template. +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. +3. Select the .NET framework version and click **Create**. ## Step 2: Install the Syncfusion® MAUI TabView NuGet Package -1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.TabView](https://www.nuget.org/packages/Syncfusion.Maui.TabView/) 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` +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 +## 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/) 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; @@ -274,7 +276,7 @@ namespace TabViewMauiSample 1. To initialize the control, import the TabView namespace into your code. -2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) +2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). {% tabs %} @@ -454,15 +456,15 @@ namespace TabViewMauiSample ![Getting started with .NET MAUI Tab View.](images/net-maui-tab-view-getting-started.png) -N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabViewGettingStarted) in GitHub +N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabViewGettingStarted) in GitHub. ## Populate ItemsSource Items can be added to the control using the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ItemsSource) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html). -Objects of any class can be given as items for `SfTabView` by using `ItemsSource`. The views corresponding to the objects can be set using the [HeaderItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderItemTemplate) for the header items and [ContentItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ContentItemTemplate) for the content. +Objects of any class can be provided as items for `SfTabView` using `ItemsSource`. The views corresponding to the objects can be set using the [HeaderItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderItemTemplate) for the header items and [ContentItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ContentItemTemplate) for the content. -Create a model class using the TabItems collection property that is initialized with the required number of data objects, as shown in the following code example. +Create a model class using the TabItems collection property, initialized with the required number of data objects, as shown in the following code examples. {% tabs %} @@ -589,7 +591,7 @@ public partial class MainPage : ContentPage {% endtabs %} -### Header item template +### Header Item Template By defining the `HeaderItemTemplate` of the `SfTabView`, a custom user interface(UI) can be achieved to display the tab header data items. @@ -638,7 +640,7 @@ public partial class MainPage : ContentPage {% endtabs %} -### Content item template +### Content Item Template By defining the `ContentItemTemplate` of the `SfTabView`, a custom user interface(UI) can be achieved to display the tab content data items. diff --git a/MAUI/TabView/Header-Display-Mode.md b/MAUI/TabView/Header-Display-Mode.md index 3ee8a3fd4d..379238c24d 100644 --- a/MAUI/TabView/Header-Display-Mode.md +++ b/MAUI/TabView/Header-Display-Mode.md @@ -1,15 +1,15 @@ --- layout: post -title: Header display mode in .NET MAUI Tab View control | Syncfusion® -description: Learn here all about header display mode support in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. -platform: maui -control: TabView -documentation: ug +title: Header display Mode in .NET MAUI Tab View control | Syncfusion® +description: Learn all about header display mode support in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. +platform: MAUI +control: SfTabView +documentation: UG --- -# Header display mode in .NET MAUI Tab View control (SfTabView) +# Header Display Mode in .NET MAUI Tab View control (SfTabView) -By default, the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html) control displays the title of each Tab Item. It can be changed to any of the following types: +By default, the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html) control displays the title of each Tab Item. It can be customized to display in any of the following modes: * Default * Image @@ -17,7 +17,7 @@ By default, the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfus ![Image for HeaderDisplayMode](images/Header-Display-Mode.png) -The Tab View can be changed by setting the [HeaderDisplayMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderDisplayMode) property of [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.html). +The Tab View can be modified by setting the [HeaderDisplayMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderDisplayMode) property of the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.html). {% tabs %} @@ -60,5 +60,4 @@ tabView.Items.Add(tabItem3); {% endtabs %} -N> The [HeaderDisplayMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderDisplayMode) will only apply if both a [Header](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_Header) and an [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSource) are provided for the Tab Item. If either the [Header](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_Header) or [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSource) is missing, the Tab Item will automatically apply the Default mode. - +N> The [HeaderDisplayMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderDisplayMode) will only apply if both a [Header](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_Header) and an [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSource) are provided for the Tab Item. If either is missing, the Tab Item will automatically apply the Default mode. \ No newline at end of file diff --git a/MAUI/TabView/How-To.md b/MAUI/TabView/How-To.md index 21e6c977f9..bc756a35d9 100644 --- a/MAUI/TabView/How-To.md +++ b/MAUI/TabView/How-To.md @@ -1,17 +1,17 @@ --- layout: post -title: Select tab in .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn here all about select tab item programmatically in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. -platform: maui -control: Tab View -documentation: ug +title: Select Tab in .NET MAUI Tab View (SfTabView) | Syncfusion® +description: Learn all about selecting a tab item programmatically in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. +platform: MAUI +control: SfTabView +documentation: UG --- -# How to select a tab item programmatically? +# How to Select a Tab Item Programmatically? -## Programmatically select the tab item +## Programmatically Select the Tab Item -Using the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView, we can programmatically select the tab item as like in the below code snippet. +You can use the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView to programmatically select a tab item. Below is a code snippet demonstrating how to do this: {% tabs %} @@ -26,9 +26,9 @@ Using the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Ta ![SelectedIndex in SfTabView](images/SelectedIndexTabView.png) -## Get the selected tab item using IsSelected +## Get the Selected Tab Item Using IsSelected -Indicates whether the tab item is active or not. This property can be used to get selected item of tab view as like below code snippet. +The `IsSelected` property indicates whether the tab item is active. This property can be used, as shown in the code snippet below, to check and perform actions on the selected tab item. {% tabs %} diff --git a/MAUI/TabView/Migration.md b/MAUI/TabView/Migration.md index 70a7f26fde..9a7c6edf06 100644 --- a/MAUI/TabView/Migration.md +++ b/MAUI/TabView/Migration.md @@ -1,15 +1,15 @@ --- layout: post title: Migrating from Xamarin SfTabView to .NET MAUI SfTabView | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin TabView to Syncfusion® .NET MAUI TabView control and more. +description: Learn all about migrating from Syncfusion® Xamarin TabView to Syncfusion® .NET MAUI TabView control and more. platform: MAUI control: SfTabView -documentation: ug +documentation: UG --- # Migrating from Xamarin SfTabView to .NET MAUI SfTabView -To migrate easier from Xamarin SfTabView to .NET MAUI SfTabView, we kept most of the APIs from Xamarin SfTabView in MAUI SfTabView. However, to maintain the consistency of API naming in MAUI SfTabView, we renamed some of the APIs. The APIs that have been changed in MAUI SfTabView from Xamarin SfTabView are detailed as follows. +To facilitate easier migration from Xamarin SfTabView to .NET MAUI SfTabView, we have retained most of the APIs from Xamarin SfTabView in MAUI SfTabView. However, to maintain API naming consistency, some APIs have been renamed. The following details the changes in APIs from Xamarin SfTabView to MAUI SfTabView. ## Namespaces diff --git a/MAUI/TabView/Nested-Tabs.md b/MAUI/TabView/Nested-Tabs.md index 71854946fd..cfc46cf57e 100644 --- a/MAUI/TabView/Nested-Tabs.md +++ b/MAUI/TabView/Nested-Tabs.md @@ -1,17 +1,17 @@ --- layout: post title: NestedTab in .NET MAUI Tab View (SfTabView) control | Syncfusion® -description: Learn here about the nested tab support in Syncfusion® .NET MAUI Tab View (SfTabView) control and code sample. -platform: maui -control: Tab View -documentation: ug +description: Learn about the nested tab support in Syncfusion® .NET MAUI Tab View (SfTabView) control and code sample. +platform: MAUI +control: SfTabView +documentation: UG --- # Nested tab in .NET MAUI Tab View (SfTabView) -Nested tab items can be configured in Tab View using the [Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_Items) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html), which holds the nested collection of [SfTabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html) by [TabItemsCollection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemCollection.html). +You can configure nested tab items in the Tab View using the [Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_Items) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html). This property holds the nested collection of [SfTabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html) by [TabItemsCollection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemCollection.html). -To get start quickly with Nested tab view in .NET MAUI TabView, you can check on this video: +To get start quickly with Nested Tab View in .NET MAUI TabView, you can check on this video: {% youtube "https://www.youtube.com/watch?v=batfDt1S8Mc&ab_channel=Syncfusion%2CInc" %} @@ -191,11 +191,11 @@ public partial class MainPage : ContentPage ![NestedTab](images/Nested_Tab.png) -N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/NestedTabViewSample) in GitHub +N> View the [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/NestedTabViewSample) on GitHub. ## Enable virtualization -Enabling virtualization improves the initial loading performance of [SfTabView.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html) To activate this feature, set the `EnableVirtualization` property to `true.` +Enabling virtualization improves the initial loading performance of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html). To activate this feature, set the `EnableVirtualization` property to `true`. {% tabs %} {% highlight xaml %} diff --git a/MAUI/TabView/Overview.md b/MAUI/TabView/Overview.md index 37f394db85..fcfd6135fd 100644 --- a/MAUI/TabView/Overview.md +++ b/MAUI/TabView/Overview.md @@ -1,17 +1,17 @@ --- layout: post title: About .NET MAUI Tab View (SfTabView) control | Syncfusion® -description: Learn here all about introduction of Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements and more. -platform: maui +description: Learn about the introduction of the Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements, and more. +platform: MAUI control: Tab View -documentation: ug +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 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Overview of .NET MAUI Tab View (SfTabView) -The advanced .NET Multi-platform App UI (MAUI) Tab View is a simple and intuitive interface for tab navigation in mobile and desktop applications, where users can explore and switch between different tabs. +The advanced .NET Multi-platform App UI (MAUI) Tab View provides a simple and intuitive interface for tab navigation in both mobile and desktop applications. This allows users to explore and switch between different tabs efficiently. ## Key features @@ -23,10 +23,10 @@ The advanced .NET Multi-platform App UI (MAUI) Tab View is a simple and intuitiv ## Usage -* The .NET MAUI TabView can be used to optimize screen space usage when the application requires complex and huge layouts. +* The .NET MAUI TabView can be used to optimize screen space usage when the application requires complex and extensive layouts. * The .NET MAUI TabView contains a set of tab items that share the same space. -* At a time, only one .NET MAUI tab item will be visible and accessible to users. Users have to tap the tab of the hidden tab item to make it visible on the screen. +* At any given time, only one .NET MAUI tab item will be visible and accessible to users. Users must tap the tab of the hidden tab item to make it visible on the screen. ![TabViewImage MAUI](images/TabView.png) \ No newline at end of file diff --git a/MAUI/TabView/Selection-Indicator-Customization.md b/MAUI/TabView/Selection-Indicator-Customization.md index 8f591702fc..858388e782 100644 --- a/MAUI/TabView/Selection-Indicator-Customization.md +++ b/MAUI/TabView/Selection-Indicator-Customization.md @@ -1,17 +1,17 @@ --- layout: post title: Customize the indicator in .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn here all about selection indicator customization support in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. -platform: maui -control: Tab View -documentation: ug +description: Learn all about selection indicator customization support in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. +platform: MAUI +control: SfTabView +documentation: UG --- # Customize the Selection Indicator in .NET MAUI Tab View (SfTabView) -## Placement options +## Placement Options -The .NET MAUI Tab View provides three options for determining how selection indicator aligns relative to the tab header item. The options are top, bottom, and fill. This can be done by setting the [IndicatorPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorPlacement) property of SfTabView. +The .NET MAUI Tab View provides three options for determining how the selection indicator aligns relative to the tab header item. These options are top, bottom, and fill. This can be configured by setting the [IndicatorPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorPlacement) property of SfTabView. ### Top @@ -73,7 +73,7 @@ The background of the indicator can be customized using the [IndicatorBackground ### Solid Color -The SolidColorBrush class defines the color property of [IndicatorBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorBackground), which represents the color of the selection indicator background. +The SolidColorBrush class defines the color property of [IndicatorBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorBackground), representing the selection indicator background's color. {% tabs %} @@ -131,7 +131,7 @@ tabView.IndicatorBackground = graBrush; ![Selection Indicator Gradient](images/Selection-Indicator-gradient-background.png) -N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) in GitHub +N> View the complete [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) on GitHub. ## Indicator Width Mode @@ -165,7 +165,8 @@ The [IndicatorWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Tab ![Selection Indicator Background.](images/IndicatorWidthMode_Stretch.png) -## Indicator's corner radius +## Indicator's Corner Radius + You can customize the corner radius of the selection indicator using the [IndicatorCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorCornerRadius) property in the Tab View. {% tabs %} @@ -183,6 +184,7 @@ You can customize the corner radius of the selection indicator using the [Indica ![Selection Indicator Corner Radius.](images/IndicatorCornerRadius.png) ## Indicator's Stroke Thickness + You can customize the stroke thickness of the selection indicator using the [IndicatorStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorStrokeThickness) property in the Tab View. {% tabs %} diff --git a/MAUI/TabView/Swiping.md b/MAUI/TabView/Swiping.md index e9f2ae3ed6..8fe2c2da28 100644 --- a/MAUI/TabView/Swiping.md +++ b/MAUI/TabView/Swiping.md @@ -1,10 +1,10 @@ --- layout: post title: About .NET MAUI Tab View (SfTabView) control | Syncfusion® -description: Learn here all about the swiping support in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. -platform: maui -control: Tab View -documentation: ug +description: Learn all about the swiping support in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. +platform: MAUI +control: SfTabView +documentation: UG --- # Swiping in .NET MAUI Tab View (SfTabView) @@ -27,5 +27,5 @@ The `EnableSwiping` property of `SfTabView` allows users to switch between tab c ### Limitations -* Interference Between Child Controls and TabView Swiping: When a child control within a TabView supports horizontal swiping or interaction (e.g., a horizontal ScrollView, a custom swipe-enabled control, or a carousel), it can interfere with the TabView's touch gesture. This may result in unintended behavior, such as the TabView swiping when the child control is meant to handle the gesture, or vice versa. The overlapping gestures can cause confusion and disrupt the expected user experience, leading to a less intuitive interface. +* **Interference Between Child Controls and TabView Swiping:** When a child control within a TabView supports horizontal swiping or interaction (e.g., a horizontal ScrollView, a custom swipe-enabled control, or a carousel), it can interfere with the TabView's touch gesture. This may result in unintended behavior, such as the TabView swiping when the child control is meant to handle the gesture, or vice versa. The overlapping gestures can cause confusion and disrupt the expected user experience, leading to a less intuitive interface. diff --git a/MAUI/TabView/Tab-Bar-Customization.md b/MAUI/TabView/Tab-Bar-Customization.md index 2c5abf258b..084c095234 100644 --- a/MAUI/TabView/Tab-Bar-Customization.md +++ b/MAUI/TabView/Tab-Bar-Customization.md @@ -1,21 +1,21 @@ --- layout: post title: Customize the Tab Bar in .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn here all about custom header support in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. -platform: maui -control: Tab View -documentation: ug +description: Learn all about custom header support in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. +platform: MAUI +control: SfTabView +documentation: UG --- # Customize the Tab Bar in .NET MAUI Tab View (SfTabView) -## Tab Width options +## Tab Width Options -The .NET MAUI Tab View provides two modes that determines how the width of the tab is calculated on the tab bar while it gets populated. The options are [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_Default) and [SizeToContent](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_SizeToContent) and can be achieved using the [TabWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html) property. +The .NET MAUI Tab View provides two modes that determines how the width of the tab is calculated on the tab bar while it gets populated. The options are [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_Default) and [SizeToContent](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_SizeToContent). These can be achieved using the [TabWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html) property. ### Fixed bar -The width of the tab is divided equally based on the available control width. This enables a fixed tab bar that will not allow tab scrolling even it contains any number of tabs. This can be achieved by setting the `TabWidthMode` as `Default`. +The width of the tab is divided equally based on the available control width. This enables a fixed tab bar that will not allow tab scrolling, regardless of the number of tabs. This can be achieved by setting the `TabWidthMode` as `Default`. N> This mode is recommended when the tab count is not more than four. More tabs in this mode may appear with the text being trimmed. @@ -33,9 +33,9 @@ N> This mode is recommended when the tab count is not more than four. More tabs ![Tab Width Mode Default](images/Tab-Width-Mode-Default.png) -### Based on the text size +### Based on the Text Size -The width of a tab is set to fit the text or image that it contains by setting the `TabWidthMode` as `SizeToContent`. Scroll is enabled in this mode to access the items that are outside the visible area. +The width of a tab is set to fit the text or image that it contains by setting the `TabWidthMode` as `SizeToContent`. Scroll is enabled in this mode to access the items outside the visible area. {% tabs %} @@ -49,13 +49,13 @@ The width of a tab is set to fit the text or image that it contains by setting t {% endtabs %} -![Tab Width Mode Size to fit](images/Tab-Width-Mode-SizeToFit.png) +![Tab Width Mode Size to Fit](images/Tab-Width-Mode-SizeToFit.png) -## Customize the tab bar height +## Customize the Tab Bar Height The height of the tab bar can be customized by setting the [TabBarHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarHeight) property. The default height is 48. -N> It is recommended to set the TabBarHeight as 72 while displaying the image and text with ImagePosition as either top or bottom. +N> It is recommended to set the `TabBarHeight` to 72 while displaying both the image and text with `ImagePosition` as either top or bottom. {% tabs %} @@ -69,9 +69,9 @@ N> It is recommended to set the TabBarHeight as 72 while displaying the image an {% endtabs %} -## Customize the tab header text alignment +## Customize the Tab Header Text Alignment -The horizontal text alignment of the tab header can be customized by setting the [HeaderHorizontalTextAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderHorizontalTextAlignment) property. The default value is Center. This property accepts the following values: +The horizontal text alignment of the tab header can be customized by setting the [HeaderHorizontalTextAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderHorizontalTextAlignment) property. The default value is `Center`. This property accepts the following values: * **Start** - The text will be placed at the starting position in the header tab. * **Center** - The text will be placed at the center of the header tab. @@ -88,16 +88,16 @@ tabView.HeaderHorizontalTextAlignment = TextAlignment.Center; {% endhighlight %} {% endtabs %} -![Tab header text alignment](images/HorizontalTextAlignmentCenter.png) +![Tab Header Text Alignment](images/HorizontalTextAlignmentCenter.png) -## Tab bar placement options +## Tab Bar Placement Options -The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be done using the [TabBarPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarPlacement) property. +The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be achieved using the [TabBarPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarPlacement) property. ### Top -Tab bar will be placed above the content region of the Tab View control. +The tab bar will be placed above the content region of the Tab View control. {% tabs %} @@ -115,7 +115,7 @@ Tab bar will be placed above the content region of the Tab View control. ### Bottom -Tab bar will be placed below the content region of the Tab View control. +The tab bar will be placed below the content region of the Tab View control. {% tabs %} @@ -131,13 +131,13 @@ Tab bar will be placed below the content region of the Tab View control. ![Tab Bar Placement Bottom](images/Tab-bar-Placement-Bottom.png) -## Tab Bar background customization +## Tab Bar Background Customization The tab bar background can be customized using the [TabBarBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarBackground) property, which is of type `Brush`. ### Solid Color -A solid color can be achieved by assigning the SolidColorBrush to the [TabBarBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarBackground), which represents the color of the tab bar background. +A solid color can be achieved by assigning the `SolidColorBrush` to the [TabBarBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarBackground), which represents the color of the tab bar background. {% tabs %} @@ -196,4 +196,4 @@ tabView.TabBarBackground = graBrush; ![Tab Bar Gradient Color Bottom](images/TabBarGradientColor.png) -N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) in GitHub +N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) in GitHub. diff --git a/MAUI/TabView/Tab-Item-Customization.md b/MAUI/TabView/Tab-Item-Customization.md index 74b50bbb3a..0827e6245d 100644 --- a/MAUI/TabView/Tab-Item-Customization.md +++ b/MAUI/TabView/Tab-Item-Customization.md @@ -1,21 +1,21 @@ --- layout: post title: Display Type in .NET MAUI Tab View (SfTabView) control | Syncfusion® -description: Learn here all about color and font customization in Syncfusion® .NET MAUI Tab View (SfTabView) control. -platform: maui -control: Tab View -documentation: ug +description: Learn all about color and font customization in the Syncfusion® .NET MAUI Tab View (SfTabView) control. +platform: MAUI +control: SfTabView +documentation: UG --- -# Configure the appearance of Tab Item in .NET MAUI Tab View (SfTabView) +# Configure the Appearance of Tab Item in .NET MAUI Tab View (SfTabView) -A tab item consists of the following elements that can be customized. +A tab item consists of various elements that can be customized in the .NET MAUI Tab View. -## Adding image in tab item +## Adding Image in Tab Item ### Header -Holds the text of the tab item that is displayed in the tab bar. +The header holds the text of the tab item displayed in the tab bar. {% tabs %} @@ -106,11 +106,11 @@ The assigned view will get displayed in the main area of the tab view. ![Tab Item Content](images/TabItem_Content.png) -## Image position options +## Image Position Options -The .NET MAUI Tab View provides four options that determine how the image of the tab aligns relative to the text. The options are left, top, right and bottom. It can be achieved using the [ImagePosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImagePosition) property of [SfTabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html) of type [ImagePosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImagePosition). +The .NET MAUI Tab View provides four options determining how the image of the tab aligns relative to the text. The options are left, top, right and bottom. These can be achieved using the [ImagePosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImagePosition) property of [SfTabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html). -N> Each tab item can be set with different image positions. Visual State Manager can be used to apply same value to all tabs. +N> Each tab item can have different image positions. The Visual State Manager can be used to apply the same value to all tabs. ### Top @@ -168,7 +168,7 @@ var tabItems = new TabItemCollection ### Left -The image will be placed before the text horizontally. +The image will be placed before the text, horizontally. {% tabs %} @@ -195,7 +195,7 @@ var tabItems = new TabItemCollection ### Right -The image will be placed to the right side of the text horizontally. +The image will be placed to the right side of the text, horizontally. {% tabs %} @@ -222,7 +222,7 @@ var tabItems = new TabItemCollection ## Image Text Spacing -The [ImageTextSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageTextSpacing) property in SfTabItem allows for the provision of spacing between the image and the text of the tab item. +The [ImageTextSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageTextSpacing) property in SfTabItem allows spacing between the image and the text of the tab item. {% tabs %} @@ -276,7 +276,7 @@ var tabItems = new TabItemCollection ## Font Customization -This type of customization involves making changes to the looks of some font elements. +This type of customization involves changes to some font elements. ### FontFamily @@ -361,9 +361,10 @@ var tabItems = new TabItemCollection ## Badge Support -In SfTabItem, the badges are used to notify users of new or unread messages, notifications, or the status of something. +In SfTabItem, badges notify users of new or unread messages, notifications, or the status of something. + +### Badge Text -### Badge text By using the [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_BadgeText) property in the SfTabItem, you can add text to badge view. {% tabs %} @@ -387,13 +388,13 @@ var tabItems = new TabItemCollection {% endtabs %} -### Badge settings +### Badge Settings -The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_BadgeSettings) property helps you to customize the basic look and feel of the badge view in the SfTabItem. +The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_BadgeSettings) property helps customize the basic look and feel of the badge view in the SfTabItem. -[BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_BadgeSettings) contains the sub-elements such as badge types, positions, and colors. You can customize the background color, text color, border color, width, offset, and font attributes. +It contains the sub-elements such as badge types, positions, and colors. You can customize the background color, text color, border color, width, offset, and font attributes. -N> To customize the badge beyond predefined styles, set [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property to [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeType.html#Syncfusion_Maui_Core_BadgeType_None) in the [BadgeSettings.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties) +N> To customize the badge beyond predefined styles, set [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property to [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeType.html#Syncfusion_Maui_Core_BadgeType_None) in the [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties). {% tabs %} @@ -470,9 +471,9 @@ tabView.TabHeaderPadding = new Thickness(5, 10, 5, 10); ![Image Text Spacing](images/TabViewHeaderItem_Padding.png) -## Scroll buttons on Header +## Scroll Buttons on Header -Scroll buttons are used to navigate through the items in the header of the tab view by adjusting the [IsScrollButtonEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IsScrollButtonEnabled) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). This functionality additionally indicates the presence of tabs beyond the currently visible area. +Scroll buttons are used to navigate through the items in the header of the tab view by adjusting the [IsScrollButtonEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IsScrollButtonEnabled) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). This additionally indicates the presence of tabs beyond the currently visible area. {% tabs %} @@ -491,9 +492,9 @@ tabView.IsScrollButtonEnabled = true; ![TabView Scroll Mode](images/TabViewScroll.gif) -### Scroll button customization +### Scroll Button Customization -The [ScrollButtonBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ScrollButtonBackground) and [ScrollButtonColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ScrollButtonColor) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) allows users to customize the background color and foreground color of scroll button. +The [ScrollButtonBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ScrollButtonBackground) and [ScrollButtonColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ScrollButtonColor) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) allows customization of the background and foreground color of the scroll button. {% tabs %} @@ -515,9 +516,9 @@ this.Content = stackLayout; ![ScrollButtonCustomization](images\ScrollButtonCustomization.png) -## Font auto scaling enabled +## Font Auto Scaling Enabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_FontAutoScalingEnabled) property is used to automatically scale the tab header's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false.` +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_FontAutoScalingEnabled) property automatically scales the tab header's font size based on the operating system's text size. The default value is `false`. {% tabs %} @@ -534,7 +535,7 @@ tabView.FontAutoScalingEnabled = true; {% endtabs %} -## Content transition duration +## Content Transition Duration You can customize the animation duration when changing the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) of the Tab View by setting the [ContentTransitionDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ContentTransitionDuration) property. @@ -555,7 +556,7 @@ tabView.ContentTransitionDuration = 1000; ![ContentTransitionDuration](images/ContentTransition.gif) -## Image size +## Image Size You can customize the image size in the .NET MAUI TabView control by setting the [ImageSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSize) property. diff --git a/MAUI/TabView/Visual-State-Managers.md b/MAUI/TabView/Visual-State-Managers.md index dbc5722fe1..da1da5a97b 100644 --- a/MAUI/TabView/Visual-State-Managers.md +++ b/MAUI/TabView/Visual-State-Managers.md @@ -1,15 +1,15 @@ --- layout: post -title: Visual state manager in .NET MAUI Tab View (SfTabView) | Syncfusion® -description: Learn here all about handling of visual state manager in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. +title: Visual State Manager in .NET MAUI Tab View (SfTabView) | Syncfusion® +description: Learn all about handling of visual state manager in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. platform: MAUI -control: TabView -documentation: ug +control: SfTabView +documentation: UG --- # Visual State Manager in .NET MAUI Tab View (SfTabView) -Use the visual state manager to change the .NET MAUI tab properties based on the visual states set from code. The applicable visual states are selected, normal, and disable. +Use the visual state manager to change the .NET MAUI tab properties based on the visual states set from code. The applicable visual states are `Selected`, `Normal`, and `Disable`. {% tabs %} @@ -276,7 +276,7 @@ Use the visual state manager to change the .NET MAUI tab properties based on the ![Visual state manager](images/Visual-state-manager.png) -N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/VisualStateManagerTabView) in GitHub. +N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/VisualStateManagerTabView) on GitHub. ## See also From 0ec3449af09283dace07ab0e0f0cf6452ed74ff3 Mon Sep 17 00:00:00 2001 From: snehakPV Date: Wed, 21 May 2025 18:50:20 +0530 Subject: [PATCH 4/6] Addressed the feedback --- MAUI/Avatar-view/Content-type.md | 34 +++++----- MAUI/Avatar-view/Getting-Started.md | 34 +++++----- MAUI/Avatar-view/Overview.md | 14 ++-- MAUI/Avatar-view/customization.md | 47 +++++++------ MAUI/Avatar-view/how-to.md | 6 +- MAUI/Avatar-view/visualstyles.md | 15 ++-- MAUI/Badge-View/Animation.md | 10 +-- MAUI/Badge-View/Badge-customization.md | 47 +++++++------ MAUI/Badge-View/Getting-Started.md | 40 +++++------ MAUI/Badge-View/Migration.md | 6 +- MAUI/Badge-View/Overview.md | 8 +-- MAUI/Badge-View/Position-customization.md | 14 ++-- MAUI/Badge-View/Predefined-symbols.md | 10 +-- MAUI/Busy-Indicator/AnimationType.md | 34 +++++----- MAUI/Busy-Indicator/Duration.md | 15 ++-- MAUI/Busy-Indicator/Getting-Started.md | 40 +++++------ MAUI/Busy-Indicator/IndicatorColor.md | 14 ++-- .../Make-Busy-Animation-Idle.md | 6 +- MAUI/Busy-Indicator/Migration.md | 4 +- MAUI/Busy-Indicator/Overview.md | 12 ++-- MAUI/Busy-Indicator/Set-Header.md | 30 ++++---- MAUI/Busy-Indicator/Sizing.md | 10 ++- MAUI/CheckBox/Events.md | 6 +- MAUI/CheckBox/Getting-Started.md | 38 +++++------ MAUI/CheckBox/Migration.md | 2 +- MAUI/CheckBox/Overview.md | 6 +- MAUI/CheckBox/Visual-Customization.md | 24 +++---- MAUI/Effects-View/Customization.md | 18 ++--- MAUI/Effects-View/Effects/Combinations.md | 8 +-- MAUI/Effects-View/Effects/Highlight.md | 8 +-- MAUI/Effects-View/Effects/Overview.md | 6 +- MAUI/Effects-View/Effects/Ripple.md | 8 +-- MAUI/Effects-View/Effects/Rotation.md | 8 +-- MAUI/Effects-View/Effects/Scale.md | 8 +-- MAUI/Effects-View/Effects/Selection.md | 8 +-- MAUI/Effects-View/Events.md | 4 +- MAUI/Effects-View/Features.md | 6 +- MAUI/Effects-View/Getting-Started.md | 36 +++++----- MAUI/Effects-View/Interaction.md | 4 +- MAUI/Effects-View/Methods.md | 4 +- MAUI/Effects-View/Migration.md | 6 +- MAUI/Effects-View/Overview.md | 6 +- MAUI/NavigationDrawer/Duration.md | 4 +- MAUI/NavigationDrawer/Events.md | 14 ++-- MAUI/NavigationDrawer/Getting-Started.md | 42 ++++++------ MAUI/NavigationDrawer/Main-Content.md | 8 +-- MAUI/NavigationDrawer/Migration.md | 6 +- .../NavigationDrawer/Navigation-Pane-Sides.md | 2 +- MAUI/NavigationDrawer/Overview.md | 4 +- MAUI/NavigationDrawer/Side-Pane-Content.md | 12 ++-- MAUI/NavigationDrawer/Side-Pane-Sizing.md | 8 +-- MAUI/NavigationDrawer/Swipe-Gesture.md | 8 +-- MAUI/NavigationDrawer/Toggling-Drawer.md | 2 +- .../Radial-Menu/CenterButton-Customization.md | 22 +++--- MAUI/Radial-Menu/Events.md | 30 ++++---- MAUI/Radial-Menu/Getting-Started.md | 52 +++++++------- MAUI/Radial-Menu/Overview.md | 12 ++-- MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md | 36 +++++----- MAUI/Radial-Menu/Populating-Items.md | 54 +++++++-------- MAUI/Radial-Menu/Segmenting-Placing-Items.md | 14 ++-- .../SfRadialMenuItem-Customization.md | 18 ++--- MAUI/Radial-Menu/migration.md | 14 ++-- MAUI/Radio-Button/Events.md | 4 +- MAUI/Radio-Button/Getting-Started.md | 44 ++++++------ MAUI/Radio-Button/Grouping.md | 26 +++---- MAUI/Radio-Button/Overview.md | 8 +-- MAUI/Radio-Button/Visual-Customization.md | 32 ++++----- MAUI/Radio-Button/Visual-States.md | 6 +- MAUI/Switch/Events.md | 4 +- MAUI/Switch/Getting-Started.md | 28 ++++---- MAUI/Switch/Overview.md | 4 +- MAUI/Switch/Right-To-Left.md | 4 +- MAUI/Switch/Visual-State-Manager.md | 4 +- MAUI/Switch/customization.md | 10 +-- MAUI/Switch/states.md | 28 ++++---- MAUI/TabView/Events.md | 4 +- MAUI/TabView/Getting-Started.md | 54 +++++++-------- MAUI/TabView/Header-Display-Mode.md | 4 +- MAUI/TabView/How-To.md | 4 +- MAUI/TabView/Migration.md | 2 +- MAUI/TabView/Nested-Tabs.md | 10 +-- MAUI/TabView/Overview.md | 10 +-- .../Selection-Indicator-Customization.md | 34 +++++----- MAUI/TabView/Swiping.md | 5 +- MAUI/TabView/Tab-Bar-Customization.md | 30 ++++---- MAUI/TabView/Tab-Item-Customization.md | 68 +++++++++---------- MAUI/TabView/Visual-State-Managers.md | 2 +- 87 files changed, 717 insertions(+), 738 deletions(-) diff --git a/MAUI/Avatar-view/Content-type.md b/MAUI/Avatar-view/Content-type.md index 0e82cf8acb..d5edf218bd 100644 --- a/MAUI/Avatar-view/Content-type.md +++ b/MAUI/Avatar-view/Content-type.md @@ -1,7 +1,7 @@ --- layout: post -title: Various customizations in Syncfusion® AvatarView control. -description: Learn about the types in AvatarType and how to set values for AvatarType in .NET MAUI AvatarView. +title: Various Customizations in Syncfusion® Avatar View control. +description: Learn about avatar types and how to set values for avatar types in .NET MAUI Avatar View. platform: MAUI control: SfAvatarView documentation: UG @@ -9,7 +9,7 @@ documentation: UG # Content Types in SfAvatarView -## Avatar Types +## Avatar types The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control allows you to display the view in five different ways: @@ -26,7 +26,7 @@ The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv ## Default -The default type avatar view is used to display the default vector image when initializing without specifying initials, custom, or group view types. +The default type Avatar View is used to display the default vector image when initializing without specifying initials, custom, or group view types. {% tabs %} @@ -82,11 +82,11 @@ The [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv * SingleCharacter * DoubleCharacter -Set the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) property to display initials in the AvatarView. +Set the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) property to display initials in the Avatar View. This property accepts a `string` value. #### SingleCharacter -The `SingleCharacter` type displays the first character of the string specified in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. +The `SingleCharacter` type displays the first character of the [AvatarName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarName) specified in the [InitialsType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsType) property. {% tabs %} {% highlight xaml %} @@ -174,15 +174,15 @@ this.Content = mainGrid; {% endhighlight %} {% endtabs %} -![Double Character](ContentType_Images/Initial_Double_AvatarView.png) +![DoubleCharacter](ContentType_Images/Initial_Double_AvatarView.png) ## Custom image -You can add a custom user image by setting the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. Refer to the Getting Started Documentation in [SfAvatarView.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) +You can add a custom user image by setting the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. Refer to the Getting Started Documentation in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html). ## Avatar characters -The pre-set vector images in avatar view can be utilized by setting the [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarCharacter) property. +The preset vector images in Avatar View can be utilized by setting the [AvatarCharacter](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarCharacter) property. {% tabs %} {% highlight xaml %} @@ -222,9 +222,9 @@ this.Content = mainGrid; ![AvatarCharacter](ContentType_Images/AvatarCharacter.jpg) -## GroupView +## Group view -Add up to three images or initials in the same view using the GroupView type. +Add up to three images or initials in the same view using the group view type. Use [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) for initials and [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath) for images. The following code sample demonstrates how to add images using the [GroupSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_GroupSource) property. @@ -346,9 +346,9 @@ Use [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cor {% endhighlight %} {% endtabs %} -![GroupViewImage](ContentType_Images/GroupView_SfAvatarView.png) +![Group view](ContentType_Images/GroupView_SfAvatarView.png) -## Add initials only in GroupView +## Add initials only in group view Set the initials only in the group view by using the [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath) alone. The following example shows how this is done. @@ -406,9 +406,9 @@ public partial class MainPage : ContentPage, INotifyPropertyChanged {% endhighlight %} {% endtabs %} -![GroupView in Initials Only](ContentType_Images/GroupView_InitialsAlone.png) +![Group view in initials only](ContentType_Images/GroupView_InitialsAlone.png) -## Add both image and initials in a GroupView +## Add both image and initials in a group view Set both the image and initials as necessary for the collection. If the image needs to be displayed, set [ImageSourceMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSourceMemberPath); if initials need to be displayed, set [InitialsMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_InitialsMemberPath). This is illustrated in the following code: @@ -430,8 +430,8 @@ public class EmployeeViewModel : INotifyPropertyChanged {% endtabs %} -![GroupView for both image and initials](ContentType_Images/GroupView_InitialAndImage.png) +![Group view for both image and initials](ContentType_Images/GroupView_InitialAndImage.png) ## See also -[How to load the online images in .NET MAUI AvatarView?](https://support.syncfusion.com/kb/article/17110/how-to-load-the-online-images-in-net-maui-avatarview) \ No newline at end of file +[How to load the online images in .NET MAUI Avatar View?](https://support.syncfusion.com/kb/article/17110/how-to-load-the-online-images-in-net-maui-avatarview) \ No newline at end of file diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index 02ecf635ca..69b6248ea1 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -9,7 +9,7 @@ documentation: UG # Getting Started with .NET MAUI Avatar View -This section guides you through setting up and configuring a [AvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Avatar View to your project. +This section guides you through setting up and configuring a [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Avatar View to your project. To quickly get started with the .NET MAUI Avatar View, watch this video. @@ -24,15 +24,15 @@ Before proceeding, ensure the following are set up: 1. Install the [.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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location, then click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## 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 choose **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. @@ -73,7 +73,7 @@ namespace AvatarViewSample {% endhighlight %} -## Step 4: Add a Basic Avatar View +## Step 4: Add a basic Avatar View 1. To initialize the control, import the Core namespace into your code. 2. Initialize [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). @@ -119,23 +119,23 @@ namespace AvatarViewSample Before proceeding, ensure the following are set up: 1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed. 2. Set up a .NET MAUI environment with Visual Studio Code. -3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code) +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 +## Step 1: Create a new .NET MAUI project 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**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## 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. 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`. -## Step 3: Register the Handler +## Step 3: Register the handler 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. @@ -172,7 +172,7 @@ namespace AvatarViewSample {% endhighlight %} -## Step 4: Add a Basic Avatar View +## Step 4: Add a basic Avatar View 1. To initialize the control, import the Core namespace into your code. 2. Initialize [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). @@ -222,19 +222,19 @@ Before proceeding, ensure the following are set up: 2. Install the [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or a later version. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution**, select .NET (C#) and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **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. If not, open the terminal in Rider and manually run: `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler 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. @@ -271,7 +271,7 @@ namespace AvatarViewSample {% endhighlight %} -## Step 4: Add a Basic Avatar View +## Step 4: Add a basic Avatar View 1. To initialize the control, import the Core namespace into your code. 2. Initialize [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). @@ -313,7 +313,7 @@ namespace AvatarViewSample {% endtabcontents %} -## Adding an Image in .NET MAUI Avatar View +## Adding an image in .NET MAUI Avatar View You can add a custom image to display in the [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) using the [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ImageSource) property. Set the [ContentType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentType) to `Custom.` To ensure the avatar image appears correctly, place the image in the `Resources/Images` directory. @@ -375,8 +375,8 @@ namespace AvatarViewGettingStarted The following screenshot illustrates the result of the above code. -![.NET MAUI Avatar View Getting Started](GettingStarted_Images/Getting_Started_Sample.png) +![.NET MAUI Avatar View](GettingStarted_Images/Getting_Started_Sample.png) The Getting Started sample of .NET MAUI Avatar View is available in this following link: [Getting Started](https://github.com/SyncfusionExamples/maui-avatarview-samples). -N> You can refer to our [.NET MAUI Avatar View](https://www.syncfusion.com/maui-controls/maui-avatarview) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Avatar View Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/AvatarView) that shows you how to render the Avatar View in .NET MAUI. \ No newline at end of file +N> You can refer to our [.NET MAUI Avatar View](https://www.syncfusion.com/maui-controls/maui-avatarview) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Avatar View example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/AvatarView) that shows you how to render the Avatar View in .NET MAUI. \ No newline at end of file diff --git a/MAUI/Avatar-view/Overview.md b/MAUI/Avatar-view/Overview.md index 77c04c9a47..426f9cedcc 100644 --- a/MAUI/Avatar-view/Overview.md +++ b/MAUI/Avatar-view/Overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Overview of Syncfusion® Avatar View control for .NET MAUI +title: Overview of Syncfusion® Avatar View Control for .NET MAUI description: Quickly learn about the .NET MAUI Avatar View control and its key features. platform: MAUI control: SfAvatarView @@ -11,12 +11,12 @@ documentation: UG The [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides a graphical representation of a user's image. It allows customization of the view by adding an image, background color, icon, and text. -![.NET MAUI Avatar View overview.](Overview_Images/overview.png) +![.NET MAUI Avatar View](Overview_Images/overview.png) ## Key features -* **Image and Initials Support:** Facilitates adding both images and initials. -* **View Customization:** Allows customization of the height, width, stroke, background color, and corner radius of the view. -* **GroupView:** Supports adding a maximum of three custom images or initials in a single view. -* **Visual Styles:** Offers support for different types of visual styles. -* **BadgeView Integration:** Compatible with [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html). +* **Image and initials support:** Facilitates adding both images and initials. +* **View customization:** Allows customization of the height, width, stroke, background color, and corner radius of the view. +* **Group view:** Supports adding a maximum of three custom images or initials in a single view. +* **Visual styles:** Offers support for different types of visual styles. +* **BadgeView integration:** Compatible with [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html). diff --git a/MAUI/Avatar-view/customization.md b/MAUI/Avatar-view/customization.md index c8fd083c68..3d12fe5fa1 100644 --- a/MAUI/Avatar-view/customization.md +++ b/MAUI/Avatar-view/customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization in Syncfusion® Avatar View .NET MAUI -description: Learn how to achieve various customizations for the default view in .NET MAUI SfAvatarView. +title: Customization in Syncfusion® .NET MAUI Avatar View +description: Learn how to achieve various customizations for the default view in .NET MAUI Avatar View. platform: MAUI control: SfAvatarView documentation: UG --- -# Customization in .NET MAUI AvatarView(SfAvatarView) +# Customization in .NET MAUI Avatar View (SfAvatarView) The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control provides options to customize its appearance, including color and size attributes. @@ -65,7 +65,7 @@ this.Content = mainGrid; {% endtabs %} -![AvatarControl Aspect](Customization_Images/Aspect_AvatarView.png) +![Aspect](Customization_Images/Aspect_AvatarView.png) ## Colors @@ -112,9 +112,9 @@ this.Content = mainGrid; {% endtabs %} -![AvatarControl Stroke](Customization_Images/Stroke_AvatarView.png) +![Stroke](Customization_Images/Stroke_AvatarView.png) -### Default Background Color +### Default background color The background color of the SfAvatarView control can be specified using the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. When the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property is set to default, it displays the background color specified in the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_Background) property. @@ -164,14 +164,14 @@ this.Content = mainGrid; ![Default background color](Customization_Images/Default_Background_AvatarView.png) -### Automatic Background Color +### Automatic background color The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control supports automatic background colors through the following properties: * `DarkBackground`: Applies a dark tone to the initials and background color. * `LightBackground`: Applies a light tone to the initials and background color. -#### Dark Color +#### Dark color You can set the background color to dark by using the `DarkBackground` option in the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. @@ -220,7 +220,7 @@ this.Content = mainGrid; ![Dark color](Customization_Images/Dark_SfAvatarView.png) -#### Light Color +#### Light color The background color can be set to a light tone by using the `LightBackground` option in the [AvatarColorMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_AvatarColorMode) property. @@ -327,7 +327,7 @@ this.Content = mainGrid; {% endtabs %} -![SfAvatarView control with gradient](Customization_Images/Gradient_SfAvatarView.png) +![Gradient](Customization_Images/Gradient_SfAvatarView.png) ## Sizing @@ -335,15 +335,15 @@ The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv ### Width -The width of the avatar view can be customized using the [WidthRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_WidthRequest) property. +The width of the Avatar View can be customized using the [WidthRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_WidthRequest) property. ### Height -The height of the avatar view can be customized using the [HeightRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_HeightRequest) property. +The height of the Avatar View can be customized using the [HeightRequest](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_HeightRequest) property. -### Stroke Thickness +### StrokeThickness -Customize the thickness of the avatar view using the [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_StrokeThickness) property. +Customize the thickness of the Avatar View using the [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_StrokeThickness) property. {% tabs %} @@ -382,11 +382,11 @@ this.Content = mainGrid; {% endtabs %} -![AvatarView Stroke Thickness](Customization_Images/StrokeThickness_AvatarView.png) +![StrokeThickness](Customization_Images/StrokeThickness_AvatarView.png) -### Corner Radius +### CornerRadius -Customize the corner radius of the avatar view using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_CornerRadius) property. +Customize the corner radius of the Avatar View using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_CornerRadius) property. {% tabs %} @@ -427,9 +427,9 @@ this.Content = mainGrid; {% endtabs %} -![SfAvatarView corner radius](Customization_Images/CornerRadius_AvatarView.png) +![CornerRadius](Customization_Images/CornerRadius_AvatarView.png) -### Content Padding +### ContentPadding Customize the spacing between the stroke and content in the view using the [ContentPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_ContentPadding) property. @@ -468,11 +468,11 @@ this.Content = mainGrid; {% endtabs %} -![SfAvatarView content padding](Customization_Images/ContentPadding_AvatarView.png) +![ContentPadding](Customization_Images/ContentPadding_AvatarView.png) -### Font Auto Scaling Enabled +### FontAutoScalingEnabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_FontAutoScalingEnabled) property automatically scales the avatar view's font size based on the operating system's text size. The default value is `false.` +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html#Syncfusion_Maui_Core_SfAvatarView_FontAutoScalingEnabled) property automatically scales the Avatar View's font size based on the operating system's text size. The default value is `false`. {% tabs %} @@ -511,5 +511,4 @@ this.Content = mainGrid; {% endhighlight %} -{% endtabs %} - +{% endtabs %} \ No newline at end of file diff --git a/MAUI/Avatar-view/how-to.md b/MAUI/Avatar-view/how-to.md index 4553f668b8..e18f8cfd73 100644 --- a/MAUI/Avatar-view/how-to.md +++ b/MAUI/Avatar-view/how-to.md @@ -1,7 +1,7 @@ --- layout: post -title: States in Syncfusion® Avatar View control for .NET MAUI. -description: Learn how to use the different states available in .NET MAUI SfAvatarView. +title: States in Syncfusion® .NET MAUI Avatar View +description: Learn how to use the different states available in .NET MAUI Avatar View. platform: MAUI control: SfAvatarView documentation: UG @@ -9,7 +9,7 @@ documentation: UG # How to Use Different States -## Set Badge View to Avatar +## Set Badge View to Avatar View The .NET MAUI [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html) control supports integrating a [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) to notify users of new or unread messages, notifications, or any updates. Below is a demonstration of how to accomplish this setup within your application. diff --git a/MAUI/Avatar-view/visualstyles.md b/MAUI/Avatar-view/visualstyles.md index 867d2654f1..1347aa2f01 100644 --- a/MAUI/Avatar-view/visualstyles.md +++ b/MAUI/Avatar-view/visualstyles.md @@ -1,7 +1,7 @@ --- layout: post -title: Visual Style in Syncfusion® Avatar View .NET MAUI. -description: This section explains the different visual style types available in .NET MAUI SfAvatarView. +title: Visual Style in Syncfusion® .NET MAUI Avatar View. +description: This section explains the different visual style types available in .NET MAUI Avatar View. platform: MAUI control: SfAvatarView documentation: UG @@ -19,7 +19,7 @@ The [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAv The Custom style allows you to customize the control by adjusting size, colors, images, etc. For detailed customization options, refer to the Customization documentation in [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). -N> The default visual type is Custom. +N> The default visual type is `Custom`. ## Circle @@ -31,7 +31,7 @@ You can directly apply circular styling to the [SfAvatarView](https://help.syncf * SmallCircle * ExtraSmallCircle -The following code sample demonstrates how to define the visual style of a circle AvatarView. +The following code sample demonstrates how to define the visual style of a circle Avatar View. {% tabs %} @@ -240,7 +240,7 @@ this.Content = stack; {% endtabs %} -![SfAvatarView control with circle visual style](VisualStyles_Images/VisualCircle_AvatarView.png) +![Circle visual style](VisualStyles_Images/VisualCircle_AvatarView.png) ## Square @@ -252,7 +252,7 @@ You can directly apply square styling to the [SfAvatarView](https://help.syncfus * SmallSquare * ExtraSmallSquare -The following code sample demonstrates how to define visual style of a square AvatarView. +The following code sample demonstrates how to define visual style of a square Avatar View. {% tabs %} @@ -461,5 +461,4 @@ this.Content = stack; {% endhighlight %} {% endtabs %} -![SfAvatarView control with square visual style](VisualStyles_Images/VisualSquare_AvatarView.png) - +![Square visual style](VisualStyles_Images/VisualSquare_AvatarView.png) \ No newline at end of file diff --git a/MAUI/Badge-View/Animation.md b/MAUI/Badge-View/Animation.md index e895d1dc3b..cde3d15fda 100644 --- a/MAUI/Badge-View/Animation.md +++ b/MAUI/Badge-View/Animation.md @@ -1,10 +1,10 @@ --- layout: post -title: Badge Animation with Syncfusion® Badge View control for .NET MAUI +title: Badge Animation with Syncfusion® .NET MAUI Badge View description: Learn all about Animation support in the Syncfusion® .NET MAUI Badge View (SfBadgeView) control and more. platform: MAUI -control: Badge View +control: SfBadgeView documentation: UG --- @@ -56,11 +56,11 @@ Content = sfBadgeView; {% endtabs %} -![.NET Maui Badge View Animation](animation_images/net_maui_badge_view_animation.gif) +![Animation](animation_images/net_maui_badge_view_animation.gif) -## Animation Duration +## AnimationDuration -The [AnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_AnimationDuration) property in the [Badge Settings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) of the [Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) can be used to set the animation speed based on your specified value. A smaller duration value accelerates the animation speed. The default value is 250. +The [AnimationDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_AnimationDuration) property in the [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) of the [Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) can be used to set the animation speed based on your specified value. A smaller duration value accelerates the animation speed. The default value is `250`. {% tabs %} diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index b6e037f514..14c267eb12 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -1,21 +1,21 @@ --- layout: post -title: Customization of Syncfusion® Badge View control for .NET MAUI -description: This section explains how to customize the font, stroke, and text in the Syncfusion® SfBadgeView control on the MAUI platform. +title: Customization of Syncfusion® .NET MAUI Badge View +description: This section explains how to customize the font, stroke, and text in the Syncfusion® .NET MAUI Badge View control. platform: MAUI -control: Badge View +control: SfBadgeView documentation: UG --- # Badge Customization in .NET MAUI Badge View (SfBadgeView) -The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) property helps you to customize the basic look and feel of the badge view. +The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings) property helps you to customize the basic look and feel of the Badge View. The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html) contains the sub-elements such as badge types, positions and colors. You can customize various aspects, including background color, text color, stroke, width, offset, and font attributes. -## Font Customization +## Font customization Customize the font using the [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontSizeProperty), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAttributesProperty), and [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontFamilyProperty) properties. @@ -62,11 +62,11 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Font Customization](badge-customization_images/net_maui_badge_notifications_font_customization.png) +![Font customization](badge-customization_images/net_maui_badge_notifications_font_customization.png) ## Stroke customization -The stroke and stroke thickness of the badge view can be customized using the [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Stroke) and [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_StrokeThickness) properties, respectively. +The stroke and stroke thickness of the Badge View can be customized using the [Stroke](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Stroke) and [StrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_StrokeThickness) properties, respectively. {% tabs %} @@ -108,11 +108,11 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Stroke Customization](badge-customization_images/net_maui_badge_notifications_stroke_customization.png) +![Stroke customization](badge-customization_images/net_maui_badge_notifications_stroke_customization.png) ## Text customization -The text color and margin of the badge view can be changed using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextColorProperty) and [TextPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextPaddingProperty) properties, respectively. +The text color and margin of the Badge View can be changed using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextColorProperty) and [TextPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_TextPaddingProperty) properties, respectively. {% tabs %} @@ -154,9 +154,9 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Text Customization](badge-customization_images/net_maui_badge_notifications_text_customization.png) +![Text customization](badge-customization_images/net_maui_badge_notifications_text_customization.png) -## Predefined Styles +## Predefined styles The colors of the badge can be customized using the [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property of the [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties). The badge supports the following essential colors for different scenarios: @@ -206,11 +206,11 @@ The colors of the badge can be customized using the [Type](https://help.syncfusi {% endtabs %} -![.NET MAUI Badge View Types](badge-customization_images/net_maui_badge_notifications_badge_type.png) +![Types](badge-customization_images/net_maui_badge_notifications_badge_type.png) -## Badge Background Customization +## Badge background customization -Other than the predefined styles, the color of the badge can be customized using the [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property of the[BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties) which has to be set as [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeType.html#Syncfusion_Maui_Core_BadgeType_None). Then the color of the badge view can be set using the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Background) property. +Other than the predefined styles, the color of the badge can be customized using the [Type](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Type) property of the[BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#properties) which has to be set as [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeType.html#Syncfusion_Maui_Core_BadgeType_None). Then the color of the Badge View can be set using the [Background](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Background) property. {% tabs %} @@ -251,9 +251,9 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Background](badge-customization_images/net_maui_badge_notifications_background_customization.png) +![Background](badge-customization_images/net_maui_badge_notifications_background_customization.png) -## Setting Corner Radius of the Badge +## Setting corner radius of the badge The [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_CornerRadius) property reduces the corners' radius. @@ -296,11 +296,11 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Corner Radius](badge-customization_images/net_maui_badge_notifications_corner_radius.png) +![CornerRadius](badge-customization_images/net_maui_badge_notifications_corner_radius.png) -## Alignment of Badge +## Alignment of badge -Align the badge view using the Center, Start, and End properties of the [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property. +Align the Badge View using the Center, Start, and End properties of the [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property. {% tabs %} @@ -343,9 +343,9 @@ Content = sfBadgeView; {% endtabs %} -![BadgeView Alignment](badge-customization_images/badge_alignment.png) +![Alignment](badge-customization_images/badge_alignment.png) -## Font Auto Scaling Enabled +## FontAutoScalingEnabled The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAutoScalingEnabled) property automatically scales the badge text's font size based on the operating system's text size. The default value is `false`. @@ -372,7 +372,7 @@ sfBadgeView.BadgeSettings = badgeSetting; {% endtabs %} -## Visibility of Badge +## Visibility of badge Show or hide the badges in the .NET MAUI Badge View by setting the [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_IsVisible) property in the [BadgeSetting](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1#Syncfusion_Maui_Core_SfBadgeView_BadgeSettings). By default, the badge will be visible. @@ -402,5 +402,4 @@ badgeVuew.Content=button; Content=badgeView; {% endhighlight %} -{% endtabs %} - +{% endtabs %} \ No newline at end of file diff --git a/MAUI/Badge-View/Getting-Started.md b/MAUI/Badge-View/Getting-Started.md index 3a21002a77..70d86a293a 100644 --- a/MAUI/Badge-View/Getting-Started.md +++ b/MAUI/Badge-View/Getting-Started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with Syncfusion® Badge View control for .NET MAUI +title: Getting Started with Syncfusion® .NET MAUI Badge View description: Learn all about getting started with the Syncfusion® .NET MAUI Badge View (SfBadgeView) control, its elements, and more. platform: MAUI -control: Badge View +control: SfBadgeView documentation: UG --- # Getting Started with .NET MAUI Badge View -This section guides you through setting up and configuring a [BadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Badge View to your project. +This section guides you through setting up and configuring a [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Badge View to your project. To quickly get started with the .NET MAUI Badge View, watch this video. @@ -24,13 +24,13 @@ Before proceeding, ensure the following are set up: 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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location, then click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and install the latest version. @@ -38,7 +38,7 @@ Before proceeding, ensure the following are set up: ## Step 3: Register the handler -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. +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; @@ -72,7 +72,7 @@ namespace BadgeViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Badge View +## Step 4: Add a basic Badge View 1. To initialize the control, import the Core namespace into your code. 2. Initialize [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1). @@ -120,21 +120,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 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**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## 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. 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`. -## Step 3: Register the Handler +## Step 3: Register the handler 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. @@ -170,7 +170,7 @@ namespace BadgeViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Badge View +## Step 4: Add a basic Badge View 1. To initialize the control, import the Core namespace into your code. 2. Initialize [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1). @@ -220,19 +220,19 @@ Before proceeding, ensure the following are set up: 2. Install the [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or a later version. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution**, select .NET (C#), and choose the .NET MAUI App template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **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. If not, open the terminal in Rider and manually run: `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler 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. @@ -268,7 +268,7 @@ namespace BadgeViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Badge View +## Step 4: Add a basic Badge View 1. To initialize the control, import the Core namespace into your code. 2. Initialize [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1). @@ -310,7 +310,7 @@ namespace BadgeViewMauiSample {% endtabcontents %} -## Adding a Badge Notification Text +## Adding a badge notification text Add text to Badge View using the [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_BadgeText) property. @@ -338,9 +338,9 @@ this.Content = badgeView; {% endtabs %} -## Adding a Content +## Adding a content -An Image, button, or label or any view can be added to the Badge View using the [Content](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_Content) property.If you need to display a custom icon or image in the badge, ensure the image is included correctly in your project resources. +An image, button, label or any view can be added to the Badge View using the [Content](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html#Syncfusion_Maui_Core_SfBadgeView_Content) property. If you need to display a custom icon or image in the badge, ensure the image is included correctly in your project resources. {% tabs %} @@ -411,6 +411,6 @@ public MainPage() The following screenshot illustrates the result of the above code. -![.NET MAUI Badge View Getting Started](getting-started_images/net_maui_badge_view_getting_started.png) +![.NET MAUI Badge View](getting-started_images/net_maui_badge_view_getting_started.png) -N> You can refer to our [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Badge View Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/BadgeView/SampleBrowser.Maui.BadgeView/Samples/BadgeView) that shows you how to render the Badge View in .NET MAUI. +N> You can refer to our [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Badge View example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/BadgeView/SampleBrowser.Maui.BadgeView/Samples/BadgeView) that shows you how to render the Badge View in .NET MAUI. diff --git a/MAUI/Badge-View/Migration.md b/MAUI/Badge-View/Migration.md index 5c864c2076..74b5617df6 100644 --- a/MAUI/Badge-View/Migration.md +++ b/MAUI/Badge-View/Migration.md @@ -1,7 +1,7 @@ --- layout: post -title: Migrating from Xamarin to .NET MAUI SfBadgeView | Syncfusion® -description: Learn how to migrate from Syncfusion® Xamarin BadgeView to Syncfusion® .NET MAUI BadgeView control and more. +title: Migrating from Xamarin to .NET MAUI Badge View | Syncfusion® +description: Learn how to migrate from Syncfusion® Xamarin Badge View to Syncfusion® .NET MAUI Badge View control and more. platform: MAUI control: SfBadgeView documentation: UG @@ -67,7 +67,7 @@ To migrate easier from Xamarin SfBadgeView to .NET MAUI SfBadgeView, we kept mos BadgePosition BottomLeft,
BottomRight,
TopLeft,
TopRight Bottom,
BottomLeft,
BottomRight,
Left,
Right,
Top,
TopLeft,
TopRight -Defines the position of the badge over the badge view control. +Defines the position of the badge over the Badge View control. ## Classes diff --git a/MAUI/Badge-View/Overview.md b/MAUI/Badge-View/Overview.md index 3e24eb470e..55522f422a 100644 --- a/MAUI/Badge-View/Overview.md +++ b/MAUI/Badge-View/Overview.md @@ -1,10 +1,10 @@ --- layout: post -title: Overview of Syncfusion® Badge View control for .NET MAUI -description: This section provides a quick overview and explains the key features of the Syncfusion® Badge View control for .NET MAUI. +title: Overview of Syncfusion® .NET MAUI Badge View +description: This section provides a quick overview and explains the key features of the Syncfusion® .NET MAUI Badge View control. platform: MAUI -control: Badge View +control: SfBadgeView documentation: UG --- @@ -21,4 +21,4 @@ The .NET MAUI Badge View (SfBadgeView) is used to notify users of new or unread * **Animation** : Enables animations for badge text, adding dynamic visuals to your application's user interface. -![.NET MAUI Badge View Overview](overview_images/net_maui_badge_view_overview.png) \ No newline at end of file +![.NET MAUI Badge View](overview_images/net_maui_badge_view_overview.png) \ No newline at end of file diff --git a/MAUI/Badge-View/Position-customization.md b/MAUI/Badge-View/Position-customization.md index 6b012b93ea..b0fa8f8580 100644 --- a/MAUI/Badge-View/Position-customization.md +++ b/MAUI/Badge-View/Position-customization.md @@ -1,15 +1,15 @@ --- layout: post -title: Position Customization of Syncfusion® Badge View for .NET MAUI +title: Position Customization of Syncfusion® .NET MAUI Badge View description: Learn here all about position customization in Syncfusion® .NET MAUI Badge View (SfBadgeView) control and more. platform: MAUI -control: Badge View +control: SfBadgeView documentation: UG --- # Position customization -The default position of notification is [TopRight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_TopRight). The position can be customized as [TopLeft](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_TopLeft), [BottomLeft](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_BottomLeft), [BottomRight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_BottomRight), `Left`,`Top`, `Right`, and `Bottom` using the [Position](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Position) property. +The default position of notification is [TopRight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_TopRight). The position can be customized as [TopLeft](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_TopLeft), [BottomLeft](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_BottomLeft), [BottomRight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgePosition.html#Syncfusion_Maui_Core_BadgePosition_BottomRight), `Left`, `Top`, `Right`, and `Bottom` using the [Position](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Position) property. {% tabs %} @@ -50,11 +50,11 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Badge Position](badge-position_images/net_maui_badge_view_position.png) +![Badge position](badge-position_images/net_maui_badge_view_position.png) -## Setting a Badge Offset +## Setting a badge Offset -The x,y position of the badge view can be adjusted using the [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Offset) property to achieve precise placement. +The x,y position of the Badge View can be adjusted using the [Offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_Offset) property to achieve precise placement. {% tabs %} @@ -95,4 +95,4 @@ Content = sfBadgeView; {% endtabs %} -![.NET MAUI Badge View Badge Offset](badge-position_images/net_maui_badge_view_offset.png) \ No newline at end of file +![Badge offset](badge-position_images/net_maui_badge_view_offset.png) \ No newline at end of file diff --git a/MAUI/Badge-View/Predefined-symbols.md b/MAUI/Badge-View/Predefined-symbols.md index 7720019920..4b014af6b0 100644 --- a/MAUI/Badge-View/Predefined-symbols.md +++ b/MAUI/Badge-View/Predefined-symbols.md @@ -1,10 +1,10 @@ --- layout: post -title: Predefined Symbols of Syncfusion® Badge view control for .NET MAUI -description: Learn how to set Syncfusion® badge view predefined symbols and types of badge icons on the .NET MAUI platform. +title: Predefined Symbols of Syncfusion® .NET MAUI Badge View +description: Learn how to set predefined symbols and types of badge icons in Syncfusion® .NET MAUI Badge View. platform: MAUI -control: Badge View +control: SfBadgeView documentation: UG --- @@ -23,7 +23,7 @@ The [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-v * Prohibit1 * Prohibit2 -N> When both the `Icon` and `BadgeText` are set for the badge view, the badge text has higher priority and will be rendered in output. +N> When both the `Icon` and `BadgeText` are set for the Badge View, the badge text has higher priority and will be rendered in output. {% tabs %} @@ -62,5 +62,5 @@ N> When both the `Icon` and `BadgeText` are set for the badge view, the badge te {% endtabs %} -![BadgeView Badge Icon](predefined-symbols_images/predefinedsymbols.png) +![Badge icon](predefined-symbols_images/predefinedsymbols.png) diff --git a/MAUI/Busy-Indicator/AnimationType.md b/MAUI/Busy-Indicator/AnimationType.md index 20deb5f102..de3a65c274 100644 --- a/MAUI/Busy-Indicator/AnimationType.md +++ b/MAUI/Busy-Indicator/AnimationType.md @@ -1,19 +1,17 @@ --- layout: post -title: Animation Type in .NET MAUI Busy Indicator control | Syncfusion® -description: Learn here all about Animation Type support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. +title: Animation Type in .NET MAUI Busy Indicator Control | Syncfusion® +description: Learn here all about AnimationType support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI Busy Indicator Animation Type, MAUI Busy Indicator Animation Type, MAUI Busy Indicator Animation. +keywords : .net maui busy indicator animation type, maui busy indicator animation type, maui busy indicator animation. --- # Animation Type in .NET MAUI Busy Indicator (SfBusyIndicator) -## Overview +The [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property for the .NET MAUI Busy Indicator allows users to set one of the built-in animations. The different types of animations are [CircularMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial), [Cupertino](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Cupertino), [LinearMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial), [SingleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_SingleCircle), [DoubleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_DoubleCircle), [Globe](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Globe) and [HorizontalPulsingBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_HorizontalPulsingBox). -The [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property for the .NET MAUI Busy Indicator allows users to set one of the built-in animations. The different types of animations are [CircularMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial), [Cupertino](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_Cupertino), and [LinearMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial). - -### Circular Material +### CircularMaterial The CircularMaterial animation is an one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where set the animation type as [CircularMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_CircularMaterial). @@ -41,7 +39,7 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Circular Material](Images/AnimationType/CircularMaterial.gif) +![CircularMaterial](Images/AnimationType/CircularMaterial.gif) ### Cupertino @@ -73,7 +71,7 @@ The following gif image illustrates the result of the above code. ![Cupertino](Images/AnimationType/Cupertino.gif) -### Linear Material +### LinearMaterial The LinearMaterial animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [LinearMaterial](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_LinearMaterial). @@ -101,9 +99,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Linear Material](Images/AnimationType/LinearMaterial.gif) +![LinearMaterial](Images/AnimationType/LinearMaterial.gif) -### Single Circle +### SingleCircle The SingleCircle animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [SingleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_SingleCircle). @@ -131,9 +129,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Single Circle](Images/AnimationType/SingleCircle.png) +![SingleCircle](Images/AnimationType/SingleCircle.png) -### Double Circle +### DoubleCircle The DoubleCircle animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the animation type as [DoubleCircle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_DoubleCircle). @@ -161,7 +159,7 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Double Circle](Images/AnimationType/DoubleCircle.png) +![DoubleCircle](Images/AnimationType/DoubleCircle.png) ### Globe @@ -189,9 +187,9 @@ The Globe animation is one of the built-in animations in the [.NET MAUI Busy Ind The following gif image illustrates the result of the above code. -![Global](Images/AnimationType/Globe.gif) +![Globe](Images/AnimationType/Globe.gif) -### Horizontal Pulsing Box +### HorizontalPulsingBox The horizontal pulsing box animation is one of the built-in animations in the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example where we set the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) as [HorizontalPulsingBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.AnimationType.html#Syncfusion_Maui_Core_AnimationType_HorizontalPulsingBox). @@ -217,4 +215,4 @@ The horizontal pulsing box animation is one of the built-in animations in the [. The following gif image illustrates the result of the above code. -![Horizontal Pulsing Box](Images/AnimationType/HorizontalPulsingBox.gif) +![HorizontalPulsingBox](Images/AnimationType/HorizontalPulsingBox.gif) diff --git a/MAUI/Busy-Indicator/Duration.md b/MAUI/Busy-Indicator/Duration.md index d439e30247..12b097c9db 100644 --- a/MAUI/Busy-Indicator/Duration.md +++ b/MAUI/Busy-Indicator/Duration.md @@ -1,17 +1,15 @@ --- layout: post -title: Animation Duration in .NET MAUI Busy Indicator control | Syncfusion® +title: Animation Duration in .NET MAUI Busy Indicator Control | Syncfusion® description: Learn here all about Animation Duration support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI Busy Indicator Duration, MAUI Busy Indicator Duration +keywords : .net maui busy indicator duration, maui busy indicator duration --- # Animation Duration in .NET MAUI Busy Indicator (SfBusyIndicator) -## Overview - The [DurationFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_DurationFactor) property of the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) is used to set the animation speed depending on a given value. A smaller duration value accelerates the animation speed. The default value is 0.5, and it ranges from 0 to 1. {% tabs %} @@ -42,9 +40,4 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following screenshot illustrates the result of the above code. -![Animation Duration](Images/Duration/Duration.gif) - - - - - +![Animation duration](Images/Duration/Duration.gif) \ No newline at end of file diff --git a/MAUI/Busy-Indicator/Getting-Started.md b/MAUI/Busy-Indicator/Getting-Started.md index d01a73a2ae..8ccf220439 100644 --- a/MAUI/Busy-Indicator/Getting-Started.md +++ b/MAUI/Busy-Indicator/Getting-Started.md @@ -1,16 +1,16 @@ --- layout: post -title: Getting Started with .NET MAUI Busy Indicator control | Syncfusion® +title: Getting Started with .NET MAUI Busy Indicator Control | Syncfusion® description: Learn here about getting started with Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control, its elements, and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI busy indicator, MAUI busy indicator, .NET MAUI activity indicator, MAUI activity indicator, .NET MAUI loading indicator, MAUI loading indicator. +keywords : .net maui busy indicator, maui busy indicator, .net maui activity indicator, maui activity indicator, .net maui loading indicator, maui loading indicator. --- # Getting Started with .NET MAUI Busy Indicator -This section guides you through setting up and configuring a [Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Busy Indicator to your project. +This section guides you through setting up and configuring a [SfBusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Busy Indicator to your project. To quickly get started with the .NET MAUI Busy Indicator, watch this video. @@ -20,24 +20,25 @@ To quickly get started with the .NET MAUI Busy Indicator, watch this video. {% tabcontent Visual Studio %} ## Prerequisites + Before proceeding, ensure the following are set up: 1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location. Then, click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **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. -## 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. @@ -71,7 +72,7 @@ namespace BusyIndicatorSample {% endhighlight %} -## Step 4: Add a Basic Busy Indicator +## Step 4: Add a basic Busy Indicator 1. To initialize the control, import the Core namespace into your code. @@ -117,27 +118,28 @@ namespace BusyIndicatorSample {% tabcontent Visual Studio Code %} ## Prerequisites + Before proceeding, ensure the following are set up: 1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## 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. 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`. -## 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. @@ -171,7 +173,7 @@ namespace BusyIndicatorSample {% endhighlight %} -## Step 4: Add a Basic Busy Indicator +## Step 4: Add a basic Busy Indicator 1. To initialize the control, import the Core namespace into your code. @@ -225,19 +227,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution,** Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **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. If not, open the terminal in Rider and manually run: `dotnet restore`. -## 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. @@ -271,7 +273,7 @@ namespace BusyIndicatorSample {% endhighlight %} -## Step 4: Add a Basic Busy Indicator +## Step 4: Add a basic Busy Indicator 1. To initialize the control, import the Core namespace into your code. @@ -316,7 +318,7 @@ namespace BusyIndicatorSample {% endtabcontent %} {% endtabcontents %} -## Setting Animation Type in .NET MAUI Busy Indicator +## Setting AnimationType in .NET MAUI Busy Indicator The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides some predefined animation types like Cupertino, LinearMaterial, and CircularMaterial. Users can select any one of the animation types using the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) property. @@ -370,8 +372,8 @@ namespace BusyIndicatorSample The following gif image illustrates the result of the above code. -![Circular material in .NET MAUI Busy Indicator.](images/gettingstarted/net-maui-busy-indicator-circular-material.gif){:width="144" height="138" loading="lazy"} +![CircularMaterial in .NET MAUI Busy Indicator.](images/gettingstarted/net-maui-busy-indicator-circular-material.gif){:width="144" height="138" loading="lazy"} You can find the complete getting started sample of .NET MAUI Busy Indicator from this [link](https://github.com/SyncfusionExamples/maui-busyindicator-samples). -N> You can refer to our [.NET MAUI Busy Indicator](https://www.syncfusion.com/maui-controls/maui-busy-indicator) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Busy Indicator Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/BusyIndicator) that shows you how to render the Busy Indicator in .NET MAUI. +N> You can refer to our [.NET MAUI Busy Indicator](https://www.syncfusion.com/maui-controls/maui-busy-indicator) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Busy Indicator example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/BusyIndicator) that shows you how to render the Busy Indicator in .NET MAUI. diff --git a/MAUI/Busy-Indicator/IndicatorColor.md b/MAUI/Busy-Indicator/IndicatorColor.md index 244f3b124b..a5a3701fe9 100644 --- a/MAUI/Busy-Indicator/IndicatorColor.md +++ b/MAUI/Busy-Indicator/IndicatorColor.md @@ -3,14 +3,14 @@ layout: post title: Indicator Color and Background in .NET MAUI Busy Indicator | Syncfusion® description: Learn here about color support in Syncfusion® .NET MAUI Busy Indicator control (SfBusyIndicator) and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI Busy Indicator Color, MAUI Busy Indicator Color, MAUI Busy Indicator Customize. +keywords : .net maui busy indicator color, maui busy indicator color, maui busy indicator customize. --- # Indicator Color and Background in .NET MAUI Busy Indicator -## Indicator Color +## IndicatorColor The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) allows customization of the indicator's color using the [IndicatorColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IndicatorColor) property. @@ -43,9 +43,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Indicator Color](Images/IndicatorColor/IndicatorColor.gif) +![IndicatorColor](Images/IndicatorColor/IndicatorColor.gif) -## Overlay Background +## Overlay background The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) also provides an option to customize the overlay background using the [OverlayFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_OverlayFill) property. @@ -81,7 +81,7 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Overlay Fill](Images/IndicatorColor/OverlayFillColor.gif) +![OverlayFill](Images/IndicatorColor/OverlayFillColor.gif) The [OverlayFill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_OverlayFill) property type is `Brush`, which allows setting gradients as the background. @@ -130,5 +130,5 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following gif image illustrates the result of the above code. -![Overlay Fill](Images/IndicatorColor/OverlayFillBrush.gif) +![OverlayFill](Images/IndicatorColor/OverlayFillBrush.gif) diff --git a/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md b/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md index a3d6155f0e..8face3bbaf 100644 --- a/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md +++ b/MAUI/Busy-Indicator/Make-Busy-Animation-Idle.md @@ -3,14 +3,12 @@ layout: post title: Make Busy Animation Idle in .NET MAUI Busy Indicator | Syncfusion® description: Learn here all about Make Busy Animation Idle support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI busy indicator idle, MAUI busy indicator idle, MAUI busy indicator load, MAUI busy indicator running. +keywords : .net maui busy indicator idle, maui busy indicator idle, maui busy indicator load, maui busy indicator running. --- # Make Busy Animation Idle in .NET MAUI Busy Indicator (SfBusyIndicator) -## Make Busy Animation Idle in .NET MAUI Busy Indicator - The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) control provides support to determine if an animation needs to be executed. Setting the [IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning) property to `false` will stop the animation and remove the control from view. {% tabs %} diff --git a/MAUI/Busy-Indicator/Migration.md b/MAUI/Busy-Indicator/Migration.md index da6e1b317d..7d3922a08f 100644 --- a/MAUI/Busy-Indicator/Migration.md +++ b/MAUI/Busy-Indicator/Migration.md @@ -3,7 +3,7 @@ layout: post title: Migrating from Xamarin to .NET MAUI SfBusyIndicator | Syncfusion® description: Learn here all about migrating from Syncfusion® Xamarin Busy Indicator to Syncfusion® .NET MAUI Busy Indicator control and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG --- @@ -32,7 +32,7 @@ To facilitate an easier migration from Xamarin SfBusyIndicator to .NET MAUI [SfB {{'[IsBusy](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfBusyIndicator.XForms.SfBusyIndicator.html#Syncfusion_SfBusyIndicator_XForms_SfBusyIndicator_IsBusy)'| markdownify}} {{'[IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning)'| markdownify}} -Gets or sets the IsRunning property value in the busy indicator. It determines whether the animation of indicator to be shown or not. +Gets or sets the IsRunning property value in the Busy Indicator. It determines whether the animation of indicator to be shown or not. {{'[Duration](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfBusyIndicator.XForms.SfBusyIndicator.html#Syncfusion_SfBusyIndicator_XForms_SfBusyIndicator_Duration)'| markdownify}} {{'[DurationFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_DurationFactor)'| markdownify}} diff --git a/MAUI/Busy-Indicator/Overview.md b/MAUI/Busy-Indicator/Overview.md index e10bcaa362..51feef1818 100644 --- a/MAUI/Busy-Indicator/Overview.md +++ b/MAUI/Busy-Indicator/Overview.md @@ -1,23 +1,23 @@ --- layout: post -title: About .NET MAUI Busy Indicator control | Syncfusion® +title: About .NET MAUI Busy Indicator Control | Syncfusion® description: Learn here all about introduction of the Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control, its elements and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI Busy Indicator, MAUI Busy Indicator, MAUI Loading Indicator +keywords : .net maui busy indicator, maui busy indicator, maui loading indicator --- # .NET MAUI Busy Indicator (SfBusyIndicator) Overview -The Busy Indicator control for .NET MAUI provides an indication of app loading, data processing, and more. It can be customized in terms of indicator size, color, speed and additional options. +The .NET MAUI Busy Indicator control provides an indication of app loading, data processing, and more. It can be customized in terms of indicator size, color, speed and additional options. ## Key features -* Offers three different animation types : Circular Material, Linear Material and Cupertino. +* Offers seven different animation types : Circular Material, Linear Material, Cupertino, Single Circle, Double Circle, Globe and Horizontal Pulsing Box. * Supports customization of the indicator color and overlay background. * Allows customization of the animation duration. * Indicator size can be tailored to your needs. * Displays a title with customizable font options. -![Overview Image](Images/Overview/Overview.gif) \ No newline at end of file +![.NET MAUI Busy Indicator](Images/Overview/Overview.gif) \ No newline at end of file diff --git a/MAUI/Busy-Indicator/Set-Header.md b/MAUI/Busy-Indicator/Set-Header.md index 49b164ba6f..7b7a163b72 100644 --- a/MAUI/Busy-Indicator/Set-Header.md +++ b/MAUI/Busy-Indicator/Set-Header.md @@ -1,15 +1,14 @@ --- layout: post -title: Set Header in .NET MAUI Busy Indicator control | Syncfusion® +title: Set Header in .NET MAUI Busy Indicator Control | Syncfusion® description: Learn here all about Set Header support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI Busy Indicator Title, MAUI Busy Indicator Title, MAUI Busy Indicator Header, MAUI Busy Indicator Title Placement +keywords : .net maui busy indicator title, maui busy indicator title, maui busy indicator header, maui busy indicator title placement --- -# Set Header in .NET MAUI Busy Indicator (SfBusyIndicator) -## Overview +# Set Header in .NET MAUI Busy Indicator (SfBusyIndicator) The Syncfusion® .NET MAUI Busy Indicator provides a feature to display a title with customizable fonts. @@ -45,7 +44,7 @@ The following screenshot illustrates the result of the above code. ![Title](Images/SetHeader/Setheader.png) -## Text Color +## TextColor The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) allows you to change the color of the title text using the [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TextColor) property. @@ -77,10 +76,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following screenshot illustrates the result of the above code. -![Title Color](Images/SetHeader/TitleColor.png) - +![TitleColor](Images/SetHeader/TitleColor.png) -## Title Placement +## TitlePlacement The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) provides options to set the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_Title) at the top or bottom of the Busy Indicator using the [TitlePlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitlePlacement) property. To omit the title, set the [TitlePlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitlePlacement) property to `None`. @@ -114,10 +112,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following screenshot illustrates the result of the above code. -![Title Placement](Images/SetHeader/TitlePlacement.png) +![TitlePlacement](Images/SetHeader/TitlePlacement.png) - -## Title Spacing +## TitleSpacing You can set the space between the indicator and the title using the [TitleSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_TitleSpacing) property. @@ -154,10 +151,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following screenshot illustrates the result of the above code. -![Title Spacing](Images/SetHeader/Spacing.png) - +![TitleSpacing](Images/SetHeader/Spacing.png) -## Font Customization +## Font customization The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) allows customization of the title text using properties such as [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontSize), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontAttributes), and [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_FontFamily) properties. @@ -196,9 +192,9 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following screenshot illustrates the result of the above code. -![Font Customization](Images/SetHeader/Fontattributes.png) +![Font customization](Images/SetHeader/Fontattributes.png) -## Font Auto Scaling Enabled +## FontAutoScalingEnabled The `FontAutoScalingEnabled` property automatically scales the Busy Indicator's title font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false`. diff --git a/MAUI/Busy-Indicator/Sizing.md b/MAUI/Busy-Indicator/Sizing.md index 0efe63597d..a8006e8e85 100644 --- a/MAUI/Busy-Indicator/Sizing.md +++ b/MAUI/Busy-Indicator/Sizing.md @@ -1,16 +1,14 @@ --- layout: post -title: Sizing in .NET MAUI Busy Indicator control | Syncfusion® +title: Sizing in .NET MAUI Busy Indicator Control | Syncfusion® description: Learn here all about Sizing support in Syncfusion® .NET MAUI Busy Indicator (SfBusyIndicator) control and more. platform: MAUI -control: Busy Indicator +control: SfBusyIndicator documentation: UG -keywords : .NET MAUI Busy Indicator Size, MAUI Busy Indicator Size +keywords : .net maui busy indicator size, maui busy indicator size --- # Sizing in .NET MAUI Busy Indicator (SfBusyIndicator) -## Overview - The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html) provides an option to customize the drawing size of the indicator using the [SizeFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_SizeFactor) property. This property sets the height and width of the indicator, with default values of 0.5, and allows a range from 0 to 1. {% tabs %} @@ -41,4 +39,4 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator() The following screenshot illustrates the result of the above code. -![Size Factor](Images/Sizing/Sizefactor.png) \ No newline at end of file +![SizeFactor](Images/Sizing/Sizefactor.png) \ No newline at end of file diff --git a/MAUI/CheckBox/Events.md b/MAUI/CheckBox/Events.md index 5ee9939960..5d57c0afd0 100644 --- a/MAUI/CheckBox/Events.md +++ b/MAUI/CheckBox/Events.md @@ -11,9 +11,9 @@ documentation: UG ## StateChanged event -The `StateChanged` event occurs when the value or state of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is altered, either by interacting with the check box or by setting the value programmatically using XAML or C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html), exposing the following property: +The `StateChanged` event occurs when the value or state of the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is changed, either by interacting with the CheckBox or by setting the value programmatically using XAML or C# code. The event arguments are of type [`StateChangedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html), exposing the following property: -* [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : This represents the new state value of the check box. +* [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : This represents the new state value of the CheckBox. {% tabs %} @@ -61,7 +61,7 @@ private void CheckBox_StateChanged(object sender, Syncfusion.Maui.Buttons.StateC The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is about to change by tapping the CheckBox control. The event arguments are of type [`StateChangingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangedEventArgs.html), providing the following properties: -* [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : Represents the new state value of the check box. +* [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) : Represents the new state value of the CheckBox. * `Cancel` : Gets or sets a value indicating whether the event should be canceled. {% tabs %} diff --git a/MAUI/CheckBox/Getting-Started.md b/MAUI/CheckBox/Getting-Started.md index 3cdd30a9eb..aaee933119 100644 --- a/MAUI/CheckBox/Getting-Started.md +++ b/MAUI/CheckBox/Getting-Started.md @@ -24,19 +24,19 @@ 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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location. Then, click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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/) is a dependent package for all Syncfusion® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -71,7 +71,7 @@ namespace CheckBoxGettingStarted {% endhighlight %} -## Step 4: Add a Basic SfCheckBox +## Step 4: Add a basic SfCheckBox 1. To initialize the control, import the Buttons namespace into your code. 1. Initialize [SfCheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). @@ -117,14 +117,14 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name, and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons 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. @@ -166,7 +166,7 @@ namespace CheckBoxGettingStarted {% endhighlight %} -## Step 4: Add a Basic SfCheckBox +## Step 4: Add a basic SfCheckBox 1. To initialize the control, import the Buttons namespace into your code. 1. Initialize [SfCheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). @@ -214,19 +214,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution,** Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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 +## Step 3: Register the handler [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) is a dependent package for all Syncfusion® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -261,7 +261,7 @@ namespace CheckBoxGettingStarted {% endhighlight %} -## Step 4: Add a Basic SfCheckBox +## Step 4: Add a basic SfCheckBox 1. To initialize the control, import the Buttons namespace into your code. 1. Initialize [SfCheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). @@ -302,7 +302,7 @@ namespace CheckBoxGettingStarted ## Set the CheckBox caption -You can set the caption of the CheckBox using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the check box and is displayed next to it. +You can set the caption of the CheckBox using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the CheckBox and is displayed next to it. {% tabs %} {% highlight xaml %} @@ -322,7 +322,7 @@ You can set the caption of the CheckBox using the [Text](https://help.syncfusion ![.NET MAUI CheckBox](Images/Getting-Started/simplecheckbox.png) -## Change the CheckBox State +## Change the CheckBox state The three visual states of [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) are: @@ -332,7 +332,7 @@ The three visual states of [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Sy ![.NET MAUI CheckBox](Images/Getting-Started/tristate.png) -You can change the state of the checkbox using the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property of the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). In the checked state, a tick mark is added to the visualization of the checkbox. +You can change the state of the CheckBox using the [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property of the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). In the checked state, a tick mark is added to the visualization of the CheckBox. @@ -381,9 +381,9 @@ null
-N> To report the indeterminate state for the checkbox, set the [`IsThreeState`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property to true. +N> To report the indeterminate state for the CheckBox, set the [`IsThreeState`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property to true. -The checkbox can be used as a single or as a group. A single check box is mostly used for a binary yes/no choice, such as "Remember me?", login scenario, or a terms of service agreement. +The CheckBox can be used as a single or as a group. A single CheckBox is mostly used for a binary yes/no choice, such as "Remember me?", login scenario, or a terms of service agreement. {% tabs %} {% highlight xaml %} @@ -404,7 +404,7 @@ The checkbox can be used as a single or as a group. A single check box is mostly ![.NET MAUI CheckBox](Images/Getting-Started/termsandconditions.png) -Multiple checkboxes can be used as a group for multi-select scenarios where a user selects one or more items from the choices that are not mutually exclusive. +Multiple CheckBoxes can be used as a group for multi-select scenarios where a user selects one or more items from the choices that are not mutually exclusive. {% tabs %} {% highlight xaml %} @@ -450,9 +450,9 @@ Multiple checkboxes can be used as a group for multi-select scenarios where a us The [SfCheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) allows an Intermediate state in addition to the checked and unchecked state. The Intermediate state is enabled by setting the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property of the control to `True`. -N> When the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property is set to `False` and [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is set to `null`, the checkbox will be in unchecked state. +N> When the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property is set to `False` and [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsChecked) property is set to `null`, the CheckBox will be in unchecked state. -The Intermediate state is used when a group of sub-choices has both checked and unchecked states. In the following example, the "Select all" checkbox has the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property set to `true`. The "Select all" checkbox is checked if all child elements are checked, unchecked if all the child elements are unchecked, and Intermediate otherwise. +The Intermediate state is used when a group of sub-choices has both checked and unchecked states. In the following example, the "Select all" CheckBox has the [IsThreeState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_IsThreeState) property set to `true`. The "Select all" CheckBox is checked if all child elements are checked, unchecked if all the child elements are unchecked, and Intermediate otherwise. {% tabs %} {% highlight xaml %} diff --git a/MAUI/CheckBox/Migration.md b/MAUI/CheckBox/Migration.md index f75626ac09..0d0586876c 100644 --- a/MAUI/CheckBox/Migration.md +++ b/MAUI/CheckBox/Migration.md @@ -1,7 +1,7 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI CheckBox | Syncfusion® -description: Learn all about Migrating from Syncfusion® Xamarin CheckBox to Syncfusion® .NET MAUI CheckBox control and more. +description: Learn all about migrating from Syncfusion® Xamarin CheckBox to Syncfusion® .NET MAUI CheckBox control and more. platform: MAUI control: SfCheckBox documentation: UG diff --git a/MAUI/CheckBox/Overview.md b/MAUI/CheckBox/Overview.md index 374068e58d..3f053c96f2 100644 --- a/MAUI/CheckBox/Overview.md +++ b/MAUI/CheckBox/Overview.md @@ -2,7 +2,7 @@ layout: post title: Overview | .NET MAUI CheckBox | Syncfusion® platform: MAUI -description: Learn about the key features in Essential Studio® for .NET MAUI CheckBox Control, its elements, and more. +description: Learn about the key features in Essential Studio® for .NET MAUI CheckBox control, its elements, and more. control: SfCheckBox --- @@ -14,6 +14,6 @@ The [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.But * Supports three states. * Allows users to select and clear the control by tapping. - * Offers customization options for checkbox color, shape, and label text. + * Offers customization options for CheckBox color, shape, and label text. -![Overview image of SfCheckBox](Images/Getting-Started/overviewimage.jpg) \ No newline at end of file +![.NET MAUI CheckBox](Images/Getting-Started/overviewimage.jpg) \ No newline at end of file diff --git a/MAUI/CheckBox/Visual-Customization.md b/MAUI/CheckBox/Visual-Customization.md index 8c689ea409..6f703d722d 100644 --- a/MAUI/CheckBox/Visual-Customization.md +++ b/MAUI/CheckBox/Visual-Customization.md @@ -11,7 +11,7 @@ documentation: UG ## Customizing a shape -The shape of the checkbox can be customized using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_CornerRadius) property. This property specifies a uniform radius value for every corner of the checkbox. +The shape of the CheckBox can be customized using the [CornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_CornerRadius) property. This property specifies a uniform radius value for every corner of the CheckBox. {% tabs %} {% highlight xaml %} @@ -32,7 +32,7 @@ The shape of the checkbox can be customized using the [CornerRadius](https://hel ![.NET MAUI CheckBox](Images/Visual-Customization/checkboxradii.png) -## Customizing State Colors +## Customizing state colors You can customize the state colors using the [`CheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_CheckedColor) and [`UncheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_UncheckedColor) properties. The checked or indeterminate state color is updated based on the [`CheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_CheckedColor) property, while the color for the unchecked state is based on the [`UncheckedColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_UncheckedColor) property. @@ -71,9 +71,9 @@ You can customize the state colors using the [`CheckedColor`](https://help.syncf ![.NET MAUI CheckBox](Images/Visual-Customization/statecolor.png) -## Stroke Thickness +## StrokeThickness -The stroke thickness of the checkbox can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_StrokeThickness) property. +The stroke thickness of the CheckBox can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_StrokeThickness) property. {% tabs %} {% highlight xaml %} @@ -113,7 +113,7 @@ The stroke thickness of the checkbox can be customized using the [`StrokeThickne ![.NET MAUI CheckBox](Images/Visual-Customization/strokethickness.png) -## Setting a Caption Text Appearance +## Setting a caption text appearance You can customize the appearance of the text in the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control using the following properties: @@ -154,7 +154,7 @@ You can customize the appearance of the text in the [`SfCheckBox`](https://help. ![.NET MAUI CheckBox](Images/Visual-Customization/textappearance.png) -## TickColor Customization +## TickColor customization The [`TickColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html#Syncfusion_Maui_Buttons_SfCheckBox_TickColor) property customizes the color of the tick in the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control using the properties listed below. @@ -238,9 +238,9 @@ The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Button ![.NET MAUI CheckBox](Images/Visual-Customization/linebreakmode.png) -This demo can be downloaded from [GitHub link](https://github.com/SyncfusionExamples/How-to-wrap-text-in-DOTNET-MAUI-CheckBox) +This demo can be downloaded from [GitHub link](https://github.com/SyncfusionExamples/How-to-wrap-text-in-DOTNET-MAUI-CheckBox). -## Size Customization +## Size customization The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ControlSize) property is used to customize the size of the [`CheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. @@ -264,7 +264,7 @@ The [`ControlSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons. {% endhighlight %} {% endtabs %} -## Font Auto Scaling Enabled +## FontAutoScalingEnabled The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_FontAutoScalingEnabled) property automatically scales the Checkbox's font size based on the operating system's text size. The default value is `false`. @@ -283,8 +283,8 @@ sfCheckBox.FontAutoScalingEnabled = true; {% endhighlight %} {% endtabs %} -## Enable Animation -The [EnabledAnimation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_EnabledAnimation) property enables or disables the animation for the [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. By default, animations are enabled (`true`). +## Enable animation +The [EnabledAnimation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_EnabledAnimation) property enables or disables the animation for the [.NET MAUI CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. By default, this property is set to `true`. {% tabs %} {% highlight xaml %} @@ -303,7 +303,7 @@ SfCheckBox checkBox = new SfCheckBox {% endhighlight %} {% endtabs %} -## Content Spacing +## ContentSpacing The [ContentSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_ContentSpacing) property adjusts the content spacing in the [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control. {% tabs %} diff --git a/MAUI/Effects-View/Customization.md b/MAUI/Effects-View/Customization.md index a081daf587..9e475c81be 100644 --- a/MAUI/Effects-View/Customization.md +++ b/MAUI/Effects-View/Customization.md @@ -1,15 +1,15 @@ --- layout: post -title: Customization in .NET MAUI Effects View control | Syncfusion® +title: Customization in .NET MAUI Effects View Control | Syncfusion® description: Learn here all about Customization support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- # Customization in .NET MAUI Effects View (SfEffectsView) -The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) control provides support to customize animation duration, color, and more. This section explains how to customize the effects view control. +The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) control provides support to customize animation duration, color, and more. This section explains how to customize the Effects View control. ## RippleAnimationDuration @@ -117,7 +117,7 @@ var effectsView = new SfEffectsView {% endtabs %} -![.NET MAUI Effects View InitialRippleFactor customization](Customization_images/EffectsView_InitialRippleFactor.gif) +![InitialRippleFactor customization](Customization_images/EffectsView_InitialRippleFactor.gif) ## ScaleFactor @@ -150,7 +150,7 @@ var effectsView = new SfEffectsView {% endtabs %} -![.NET MAUI Effects View ScaleFactor customization](Customization_images/EffectsView_Scale.gif) +![ScaleFactor customization](Customization_images/EffectsView_Scale.gif) ## HighlightBackground @@ -179,7 +179,7 @@ var effectsView = new SfEffectsView {% endtabs %} -![.NET MAUI Effects View highlight background customization](Customization_images/EffectsView_Highlight.png) +![Highlight background customization](Customization_images/EffectsView_Highlight.png) ## RippleBackground @@ -205,7 +205,7 @@ var effectsView = new SfEffectsView {% endtabs %} -![.NET MAUI Effects View ripple background customization](Customization_images/EffectsView_RippleColor.gif) +![Ripple background customization](Customization_images/EffectsView_RippleColor.gif) ## SelectionBackground @@ -234,7 +234,7 @@ var effectsView = new SfEffectsView {% endtabs %} -![.NET MAUI Effects View selection background customization](Customization_images/EffectsView_Selection.png) +![Selection background customization](Customization_images/EffectsView_Selection.png) ## Angle @@ -263,5 +263,5 @@ var effectsView = new SfEffectsView {% endtabs %} -![.NET MAUI Effects View rotation angle customization](Customization_images/EffectsView_Rotation.png) +![Rotation angle customization](Customization_images/EffectsView_Rotation.png) diff --git a/MAUI/Effects-View/Effects/Combinations.md b/MAUI/Effects-View/Effects/Combinations.md index 98b6b16dbb..befd39e3da 100644 --- a/MAUI/Effects-View/Effects/Combinations.md +++ b/MAUI/Effects-View/Effects/Combinations.md @@ -1,13 +1,13 @@ --- layout: post -title: The .NET MAUI Combination Effects | Effects View control | Syncfusion® -description: Learn all about the combination of effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Combination Effects | Effects View Control | Syncfusion® +description: Learn all about the combination of effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- -# Combination of Effects +# Combination of effects The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control supports applying multiple [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) in combination. Below are some valid combinations of [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html): diff --git a/MAUI/Effects-View/Effects/Highlight.md b/MAUI/Effects-View/Effects/Highlight.md index dc72771e5e..bf78a6c66d 100644 --- a/MAUI/Effects-View/Effects/Highlight.md +++ b/MAUI/Effects-View/Effects/Highlight.md @@ -1,9 +1,9 @@ --- layout: post -title: The .NET MAUI Highlight Effects | Effects View control | Syncfusion® -description: Learn here all about highlight effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Highlight Effects | Effects View Control | Syncfusion® +description: Learn here all about highlight effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -34,4 +34,4 @@ var effectsView = new SfEffectsView {% endtabs %} -![.net maui highlight effect](Effects_images/net_maui_highlight_effect.png) \ No newline at end of file +![Highlight effect](Effects_images/net_maui_highlight_effect.png) \ No newline at end of file diff --git a/MAUI/Effects-View/Effects/Overview.md b/MAUI/Effects-View/Effects/Overview.md index c709ded18b..87eed0bf64 100644 --- a/MAUI/Effects-View/Effects/Overview.md +++ b/MAUI/Effects-View/Effects/Overview.md @@ -1,9 +1,9 @@ --- layout: post -title: The .NET MAUI Effects View control | Syncfusion® -description: Learn all about effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Effects View Control | Syncfusion® +description: Learn all about effects support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- diff --git a/MAUI/Effects-View/Effects/Ripple.md b/MAUI/Effects-View/Effects/Ripple.md index e13fe0abcd..ab2833a51f 100644 --- a/MAUI/Effects-View/Effects/Ripple.md +++ b/MAUI/Effects-View/Effects/Ripple.md @@ -1,9 +1,9 @@ --- layout: post -title: The .NET MAUI Ripple Effects | Effects View control | Syncfusion® -description: Learn here all about ripple effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Ripple Effects | Effects View Control | Syncfusion® +description: Learn here all about ripple effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -31,4 +31,4 @@ var effectsView = new SfEffectsView() {% endtabs %} -![.net maui ripple effect](Effects_images/net_maui_ripple_effect.gif) \ No newline at end of file +![Ripple effect](Effects_images/net_maui_ripple_effect.gif) \ No newline at end of file diff --git a/MAUI/Effects-View/Effects/Rotation.md b/MAUI/Effects-View/Effects/Rotation.md index 83a63fb9c9..1274cfaef3 100644 --- a/MAUI/Effects-View/Effects/Rotation.md +++ b/MAUI/Effects-View/Effects/Rotation.md @@ -1,9 +1,9 @@ --- layout: post -title: The .NET MAUI Rotate Animation | Effects View control | Syncfusion® -description: Learn all about rotation effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Rotate Animation | Effects View Control | Syncfusion® +description: Learn all about rotation effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -34,4 +34,4 @@ var effectsView = new SfEffectsView {% endtabs %} -![.net maui rotation animation](Effects_images/net_maui_rotation_animation.gif) \ No newline at end of file +![Rotation animation](Effects_images/net_maui_rotation_animation.gif) \ No newline at end of file diff --git a/MAUI/Effects-View/Effects/Scale.md b/MAUI/Effects-View/Effects/Scale.md index 16e0d440c9..c5f630cc9d 100644 --- a/MAUI/Effects-View/Effects/Scale.md +++ b/MAUI/Effects-View/Effects/Scale.md @@ -1,9 +1,9 @@ --- layout: post -title: The .NET MAUI Scale Animation | Effects View control | Syncfusion® -description: Learn all about scale effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Scale Animation | Effects View Control | Syncfusion® +description: Learn all about scale effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -38,4 +38,4 @@ var effectsView = new SfEffectsView {% endtabs %} -![.net maui scale animation](Effects_images/net_maui_scale_animation.png) \ No newline at end of file +![Scale animation](Effects_images/net_maui_scale_animation.png) \ No newline at end of file diff --git a/MAUI/Effects-View/Effects/Selection.md b/MAUI/Effects-View/Effects/Selection.md index 322fbcfb9b..c4c10189ba 100644 --- a/MAUI/Effects-View/Effects/Selection.md +++ b/MAUI/Effects-View/Effects/Selection.md @@ -1,9 +1,9 @@ --- layout: post -title: The .NET MAUI Selection Effects | Effects View control | Syncfusion® -description: Learn all about selection effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +title: The .NET MAUI Selection Effects | Effects View Control | Syncfusion® +description: Learn all about selection effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -34,4 +34,4 @@ var effectsView = new SfEffectsView {% endtabs %} -![.net maui selection effect](Effects_images/net_maui_selection_effect.png) \ No newline at end of file +![Selection effect](Effects_images/net_maui_selection_effect.png) \ No newline at end of file diff --git a/MAUI/Effects-View/Events.md b/MAUI/Effects-View/Events.md index 2581e178a3..934465378a 100644 --- a/MAUI/Effects-View/Events.md +++ b/MAUI/Effects-View/Events.md @@ -1,9 +1,9 @@ --- layout: post -title: Events in .NET MAUI Effects View control | Syncfusion® +title: Events in .NET MAUI Effects View Control | Syncfusion® description: Learn here all about events support in Syncfusion® .NET Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- diff --git a/MAUI/Effects-View/Features.md b/MAUI/Effects-View/Features.md index 23fe431848..e8841fa3e0 100644 --- a/MAUI/Effects-View/Features.md +++ b/MAUI/Effects-View/Features.md @@ -1,9 +1,9 @@ --- layout: post -title: Features in .NET MAUI Effects View control | Syncfusion® +title: Features in .NET MAUI Effects View Control | Syncfusion® description: Learn here all about Features support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -38,7 +38,7 @@ By enabling the [FadeOutRipple](https://help.syncfusion.com/cr/maui/Syncfusion.M {% endtabs %} -![.NET MAUI Effects View FadeOutRipple](Features_images/EffectsView_Fadeout_Ripple.gif) +![FadeOutRipple](Features_images/EffectsView_Fadeout_Ripple.gif) ## IsSelected diff --git a/MAUI/Effects-View/Getting-Started.md b/MAUI/Effects-View/Getting-Started.md index 4fa3405013..a3909d987b 100644 --- a/MAUI/Effects-View/Getting-Started.md +++ b/MAUI/Effects-View/Getting-Started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with .NET MAUI Effects View control | Syncfusion® +title: Getting Started with .NET MAUI Effects View Control | Syncfusion® description: Learn here about getting started with Syncfusion® .NET MAUI Effects View (SfEffectsView) control, its elements, and more. platform: MAUI -control: Effects View +control: SfEffectsView 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +>**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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # Getting Started with .NET MAUI Effects View -This section guides you through setting up and configuring the [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) to your project. +This section guides you through setting up and configuring the [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add [Effects View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) to your project. To quickly get started with the .NET MAUI Effects View, watch this video. @@ -27,19 +27,19 @@ 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.3 or later). -## Step 1: Create a new .NET MAUI Project +## 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, choose a location, then click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and install the latest version. 3. Ensure all necessary dependencies are installed correctly, and the project is restored. -## Step 3: Register the Handler +## Step 3: Register the handler The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependency for all Syncfusion® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -72,7 +72,7 @@ namespace EffectsViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Effects View +## Step 4: Add a basic Effects View 1. To initialize the control, import the Core namespace into your code. @@ -126,21 +126,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project**, then 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**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## 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. 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`. -## Step 3: Register the Handler +## Step 3: Register the handler The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependency for all Syncfusion® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -173,7 +173,7 @@ namespace EffectsViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Effects View +## Step 4: Add a basic Effects View 1. To initialize the control, import the Core namespace into your code. @@ -228,19 +228,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution**, Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Core NuGet Package +## Step 2: Install the Syncfusion® MAUI Core NuGet package 1. In **Solution Explorer**, right-click the project and choose **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. If not, open the terminal in Rider and manually run: `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependency for all Syncfusion® controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -273,7 +273,7 @@ namespace EffectsViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Effects View +## Step 4: Add a basic Effects View 1. To initialize the control, import the Core namespace into your code. @@ -319,9 +319,9 @@ namespace EffectsViewMauiSample {% endtabcontent %} {% endtabcontents %} -![Effects View Initialization](Getting-Started_images/RippleEffect.gif) +![Effects View initialization](Getting-Started_images/RippleEffect.gif) -N> You can refer to our [.NET MAUI Effects View](https://www.syncfusion.com/maui-controls/maui-effects-view) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Effects View Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/EffectsView) that shows you how to render the Effects View in .NET MAUI. +N> You can refer to our [.NET MAUI Effects View](https://www.syncfusion.com/maui-controls/maui-effects-view) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Effects View example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/EffectsView) that shows you how to render the Effects View in .NET MAUI. ## See also diff --git a/MAUI/Effects-View/Interaction.md b/MAUI/Effects-View/Interaction.md index 566f72253f..f32275e4b7 100644 --- a/MAUI/Effects-View/Interaction.md +++ b/MAUI/Effects-View/Interaction.md @@ -1,9 +1,9 @@ --- layout: post -title: Interaction in .NET MAUI Effects View control | Syncfusion® +title: Interaction in .NET MAUI Effects View Control | Syncfusion® description: Learn here all about interaction support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- diff --git a/MAUI/Effects-View/Methods.md b/MAUI/Effects-View/Methods.md index 73a1d84bab..f2d5890c6a 100644 --- a/MAUI/Effects-View/Methods.md +++ b/MAUI/Effects-View/Methods.md @@ -1,9 +1,9 @@ --- layout: post -title: Methods in .NET MAUI Effects View control | Syncfusion® +title: Methods in .NET MAUI Effects View Control | Syncfusion® description: Learn here all about methods support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- diff --git a/MAUI/Effects-View/Migration.md b/MAUI/Effects-View/Migration.md index 8aa4057647..4111091bbb 100644 --- a/MAUI/Effects-View/Migration.md +++ b/MAUI/Effects-View/Migration.md @@ -1,9 +1,9 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfEffectsView | Syncfusion® -description: Learn here all about Migrating from Syncfusion® Xamarin Effects View to Syncfusion® .NET MAUI Effects View control and more. +description: Learn here all about migrating from Syncfusion® Xamarin Effects View to Syncfusion® .NET MAUI Effects View control and more. platform: MAUI -control: Effects View +control: SfEffectsView documentation: UG --- @@ -36,7 +36,7 @@ To ease the migration from Xamarin SfEffectsView to .NET MAUI SfEffectsView, mos {{'[HighlightColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.EffectsView.SfEffectsView.html#Syncfusion_XForms_EffectsView_SfEffectsView_HighlightColor)'| markdownify }} {{'[HighlightBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_HighlightBackground)'| markdownify }} -Gets or sets the brush to highlight the effects view. +Gets or sets the brush to highlight the Effects View. {{'[RippleColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.EffectsView.SfEffectsView.html#Syncfusion_XForms_EffectsView_SfEffectsView_RippleColor)' | markdownify }} {{'[RippleBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_RippleBackground)'| markdownify }} diff --git a/MAUI/Effects-View/Overview.md b/MAUI/Effects-View/Overview.md index 59daeefe82..0ac5aa540f 100644 --- a/MAUI/Effects-View/Overview.md +++ b/MAUI/Effects-View/Overview.md @@ -1,13 +1,13 @@ --- layout: post -title: About .NET MAUI Effects View control | Syncfusion® +title: About .NET MAUI Effects View Control | Syncfusion® description: Learn here about the introduction of Syncfusion® .NET MAUI Effects View (SfEffectsView) control, its elements, and more. platform: MAUI -control: Effects View +control: SfEffectsView 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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). +>**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 to this [migration document](https://help.syncfusion.com/maui-toolkit/migration). # .NET MAUI Effects View (SfEffectsView) Overview diff --git a/MAUI/NavigationDrawer/Duration.md b/MAUI/NavigationDrawer/Duration.md index 16a8add5d9..6b508027c0 100644 --- a/MAUI/NavigationDrawer/Duration.md +++ b/MAUI/NavigationDrawer/Duration.md @@ -1,6 +1,6 @@ --- layout: post -title: Animation Duration in .NET MAUI Navigation Drawer control | Syncfusion® +title: Animation Duration in .NET MAUI Navigation Drawer Control | Syncfusion® description: Learn about Animation Duration support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. platform: MAUI control: SfNavigationDrawer @@ -8,8 +8,6 @@ documentation: UG --- # Animation Duration in .NET MAUI Navigation Drawer (SfNavigationDrawer) -## Overview - The [Duration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Duration) property of the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) specifies the timeline for completing one animation cycle. Setting a smaller duration value accelerates animation speed. {% tabs %} diff --git a/MAUI/NavigationDrawer/Events.md b/MAUI/NavigationDrawer/Events.md index 75594a4241..7a774d39f5 100644 --- a/MAUI/NavigationDrawer/Events.md +++ b/MAUI/NavigationDrawer/Events.md @@ -1,7 +1,7 @@ --- layout: post -title: Events in .NET MAUI Navigation Drawer control | Syncfusion® -description: Learn about event support in the Syncfusion® Essential Studio® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements, and more. +title: Events in .NET MAUI Navigation Drawer Control | Syncfusion® +description: Learn about event support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements, and more. platform: MAUI control: SfNavigationDrawer documentation: UG @@ -17,7 +17,7 @@ There are five built-in events in the [SfNavigationDrawer](https://help.syncfusi * [DrawerClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerClosed) * [DrawerToggled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerToggled) -## DrawerOpening Event +## DrawerOpening event The [DrawerOpening](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerOpening) event is triggered before the drawer pane opens. Restrict the drawer from opening by canceling this event by setting the `Cancel` property in the event argument to `true`. The event arguments are of type `CancelEventArgs`. It exposes the following property: @@ -46,7 +46,7 @@ private void navigationDrawer_DrawerOpening(object sender, System.ComponentModel {% endhighlight %} {% endtabs %} -## DrawerOpened Event +## DrawerOpened event The [DrawerOpened](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerOpened) event triggered after a drawer is opened. @@ -76,7 +76,7 @@ private void navigationDrawer_DrawerOpened(object sender, EventArgs e) {% endhighlight %} {% endtabs %} -## DrawerClosing Event +## DrawerClosing event The [DrawerClosing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerClosing) event is triggered before the drawer pane closes. Restrict the drawer from closing by canceling this event by setting the `Cancel` property in the event argument to `true`. The event arguments are of type `CancelEventArgs`. It exposes the following property: @@ -105,7 +105,7 @@ private void navigationDrawer_DrawerClosing(object sender, System.ComponentModel {% endhighlight %} {% endtabs %} -## DrawerClosed Event +## DrawerClosed event The [DrawerClosed](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerClosed) event triggered after a drawer is closed. @@ -135,7 +135,7 @@ private void navigationDrawer_DrawerClosed(object sender, EventArgs e) {% endhighlight %} {% endtabs %} -## DrawerToggled Event +## DrawerToggled event The [DrawerToggled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerToggled) event is triggered after a drawer is opened or closed. The event arguments are of type [ToggledEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.ToggledEventArgs.html). It exposes the following property: diff --git a/MAUI/NavigationDrawer/Getting-Started.md b/MAUI/NavigationDrawer/Getting-Started.md index 392ea576a4..4886011179 100644 --- a/MAUI/NavigationDrawer/Getting-Started.md +++ b/MAUI/NavigationDrawer/Getting-Started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with .NET MAUI Navigation Drawer control | Syncfusion® +title: Getting Started with .NET MAUI Navigation Drawer Control | Syncfusion® description: Learn how to get started with the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, including its elements and features. platform: MAUI control: SfNavigationDrawer @@ -11,7 +11,7 @@ documentation: UG # Getting Started with .NET MAUI Navigation Drawer -This section guides you through setting up and configuring a [NavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) in your .NET MAUI application. Follow the steps below to add a basic Navigation Drawer to your project. +This section guides you through setting up and configuring a [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) in your .NET MAUI application. Follow the steps below to add a basic Navigation Drawer to your project. To quickly get started with the .NET MAUI Navigation Drawer, watch this video. @@ -27,19 +27,19 @@ 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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location. Then, click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI NavigationDrawer NuGet Package +## Step 2: Install the Syncfusion® MAUI Navigation Drawer NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.NavigationDrawer](https://www.nuget.org/packages/Syncfusion.Maui.NavigationDrawer) 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 The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) NuGet is a dependent package for all Syncfusion® controls in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -73,9 +73,9 @@ namespace NavigationDrawerGettingStarted {% endhighlight %} -## Step 4: Add a Basic NavigationDrawer +## Step 4: Add a basic Navigation Drawer -1. To initialize the control, import the NavigationDrawer namespace into your code. +1. To initialize the control, import the Navigation Drawer namespace into your code. 2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html). @@ -125,21 +125,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI Navigation Drawer NuGet Package +## Step 2: Install the Syncfusion® MAUI Navigation Drawer 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.NavigationDrawer` to install the Syncfusion® .NET MAUI Navigation Drawer package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler 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. @@ -173,7 +173,7 @@ namespace NavigationDrawerGettingStarted {% endhighlight %} -## Step 4: Add a Basic Navigation Drawer +## Step 4: Add a basic Navigation Drawer 1. To initialize the control, import the Navigation Drawer namespace into your code. @@ -226,19 +226,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution**, Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI NavigationDrawer NuGet Package +## Step 2: Install the Syncfusion® MAUI Navigation Drawer NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.NavigationDrawer](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. If not, open the Terminal in Rider and manually run: `dotnet restore`. -## Step 3: Register the Handler +## Step 3: Register the handler 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. @@ -272,9 +272,9 @@ namespace NavigationDrawerGettingStarted {% endhighlight %} -## Step 4: Add a Basic NavigationDrawer +## Step 4: Add a basic Navigation Drawer -1. To initialize the control, import the NavigationDrawer namespace into your code. +1. To initialize the control, import the Navigation Drawer namespace into your code. 2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html). @@ -318,7 +318,7 @@ namespace NavigationDrawerGettingStarted N> It is mandatory to set [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) for [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) upon initializing. -## Adjust Drawer Size +## Adjust drawer size The default position of the navigation pane is on the left. Change the drawer width to 250 using the [DrawerWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerWidth) property. @@ -363,7 +363,7 @@ public partial class NavigationDrawerPage : ContentPage N> To change the side of the navigation pane, utilize the [Position](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Position) property. Adjust the drawer height in the Top and Bottom positions using the [DrawerHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeight) property. -## Add Hamburger Menu for Toggling Drawer +## Add hamburger menu for toggling drawer Create an ImageButton and set the required image to the `Source` property. Ensure the image is placed in the `Resources/Images` directory. Subscribe to the Clicked event of the button and invoke the [ToggleDrawer()](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method to toggle the drawer. Properly align the layout of [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) to position the hamburger icon at the top left, as demonstrated in the following code. @@ -494,9 +494,9 @@ public partial class NavigationDrawerPage : ContentPage {% endhighlight %} {% endtabs %} -![CustomView Image](Images/getting-started/getting_main_content.png) +![CustomView](Images/getting-started/getting_main_content.png) -## Set ListView as Drawer Content +## Set ListView as DrawerContentView Create a ListView with items and set it as [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView). @@ -669,6 +669,6 @@ public partial class NavigationDrawerPage : ContentPage {% endhighlight %} {% endtabs %} -![Overview Image for NavigationDrawer](Images/getting-started/gettingstarted.png) +![.NET MAUI Navigation Drawer](Images/getting-started/gettingstarted.png) You can find the getting started sample from the [`GitHub`](https://github.com/SyncfusionExamples/Getting-started-sample-for-.NET-MAUI-NavigationDrawer) link. \ No newline at end of file diff --git a/MAUI/NavigationDrawer/Main-Content.md b/MAUI/NavigationDrawer/Main-Content.md index c72a55cd7c..86cfb09ffd 100644 --- a/MAUI/NavigationDrawer/Main-Content.md +++ b/MAUI/NavigationDrawer/Main-Content.md @@ -1,6 +1,6 @@ --- layout: post -title: Set Main Content in .NET MAUI Navigation Drawer control | Syncfusion® +title: Set Main Content in .NET MAUI Navigation Drawer Control | Syncfusion® description: Learn all about setting Main Content support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. platform: MAUI control: SfNavigationDrawer @@ -10,7 +10,7 @@ documentation: UG # Setting Main Content in .NET MAUI Navigation Drawer -The main content of the NavigationDrawer is always visible and can be configured using the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) property. In the following code example, the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) is updated when the selection changes in the ListView, allowing for easy navigation and content switching. +The main content of the Navigation Drawer is always visible and can be configured using the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) property. In the following code example, the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) is updated when the selection changes in the ListView, allowing for easy navigation and content switching. {% tabs %} @@ -147,10 +147,10 @@ public partial class NavigationDrawerPage : ContentPage N> It is mandatory to set the [ContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ContentView) for [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) when initializing. -![contentview](Images/main-content/getting_main_content.png) +![ContentView](Images/main-content/getting_main_content.png) You can find the complete sample on [`GitHub`](https://github.com/SyncfusionExamples/.NET-MAUI-NavigationDrawer-MainContent). ## See also -[How to load content page to .NET MAUI NavigationDrawer content view?](https://support.syncfusion.com/kb/article/15674/how-to-load-content-page-to-net-maui-navigationdrawer-contentview) \ No newline at end of file +[How to load content page to .NET MAUI Navigation Drawer content view?](https://support.syncfusion.com/kb/article/15674/how-to-load-content-page-to-net-maui-navigationdrawer-contentview) \ No newline at end of file diff --git a/MAUI/NavigationDrawer/Migration.md b/MAUI/NavigationDrawer/Migration.md index ae7b34f627..2760f808a2 100644 --- a/MAUI/NavigationDrawer/Migration.md +++ b/MAUI/NavigationDrawer/Migration.md @@ -1,13 +1,13 @@ --- layout: post title: Migrating from Xamarin to .NET MAUI SfNavigationDrawer | Syncfusion® -description: Learn all about migrating from Syncfusion® Xamarin NavigationDrawer to Syncfusion® .NET MAUI NavigationDrawer control and more. +description: Learn all about migrating from Syncfusion® Xamarin Navigation Drawer to Syncfusion® .NET MAUI Navigation Drawer control and more. platform: MAUI control: SfNavigationDrawer documentation: UG --- -# Migrate from Xamarin NavigationDrawer to .NET MAUI NavigationDrawer +# Migrate from Xamarin Navigation Drawer to .NET MAUI Navigation Drawer To simplify the migration process from Xamarin SfNavigationDrawer to .NET MAUI SfNavigationDrawer, most of the APIs from Xamarin SfNavigationDrawer have been retained in MAUI SfNavigationDrawer. However, some APIs have been renamed to ensure consistency in API naming within MAUI SfNavigationDrawer. The changes to APIs between Xamarin SfNavigationDrawer and .NET MAUI SfNavigationDrawer are as follows: @@ -32,7 +32,7 @@ To simplify the migration process from Xamarin SfNavigationDrawer to .NET MAUI S {{'[DefaultDrawerSettings](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfNavigationDrawer.XForms.SfNavigationDrawer.html#Syncfusion_SfNavigationDrawer_XForms_SfNavigationDrawer_DefaultDrawerSettings)'| markdownify }} {{'[DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings)'| markdownify}} -Gets or sets the DrawerSettings, which is a container for various customization options, allowing the appearance of the navigation drawer to be customized. +Gets or sets the DrawerSettings, which is a container for various customization options, allowing the appearance of the Navigation Drawer to be customized. N> In Xamarin Forms SfNavigationDrawer, the obsolete properties have been removed in .NET MAUI, and can be exclusively set using the [DrawerSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_DrawerSettings) properties. diff --git a/MAUI/NavigationDrawer/Navigation-Pane-Sides.md b/MAUI/NavigationDrawer/Navigation-Pane-Sides.md index 9c1359bd21..56945bdc7d 100644 --- a/MAUI/NavigationDrawer/Navigation-Pane-Sides.md +++ b/MAUI/NavigationDrawer/Navigation-Pane-Sides.md @@ -3,7 +3,7 @@ layout: post title: Configuring the Drawer in .NET MAUI Navigation Drawer | Syncfusion® description: Learn all about configuring the drawer in different sides support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. platform: MAUI -control: SfNavigationDrawer +control: SfNavigationDrawer documentation: UG --- # Configure the Drawer in Different Sides in .NET MAUI Navigation Drawer diff --git a/MAUI/NavigationDrawer/Overview.md b/MAUI/NavigationDrawer/Overview.md index 50202d2dd6..ed187e9211 100644 --- a/MAUI/NavigationDrawer/Overview.md +++ b/MAUI/NavigationDrawer/Overview.md @@ -1,6 +1,6 @@ --- layout: post -title: About .NET MAUI Navigation Drawer control | Syncfusion® +title: About .NET MAUI Navigation Drawer Control | Syncfusion® description: Learn about introduction of the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control, its elements, and more. platform: MAUI control: SfNavigationDrawer @@ -11,7 +11,7 @@ documentation: UG # .NET MAUI Navigation Drawer (SfNavigationDrawer) Overview -The NavigationDrawer for .NET MAUI is a simpler component for creating a navigation pane in your application. It consists of a content area and a sliding pane that extends from the edge of the page. The pane can be opened either by swiping from the screen edges or programmatically. +The .NET MAUI Navigation Drawer is a simpler component for creating a navigation pane in your application. It consists of a content area and a sliding pane that extends from the edge of the page. The pane can be opened either by swiping from the screen edges or programmatically. ![.NET MAUI Navigation Drawer.](Images/overview/net-maui-navigationdrawer.png) diff --git a/MAUI/NavigationDrawer/Side-Pane-Content.md b/MAUI/NavigationDrawer/Side-Pane-Content.md index 198ba94ee7..3ee7ee8c82 100644 --- a/MAUI/NavigationDrawer/Side-Pane-Content.md +++ b/MAUI/NavigationDrawer/Side-Pane-Content.md @@ -19,7 +19,7 @@ The drawer pane content is only viewable when the drawer is in the open state. C N> Header and Footer content is optional, but the Drawer content is mandatory to allocate space for the drawer. -## Header Content +## Header content The header is displayed at the top of the drawer. Use the [DrawerHeaderView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderView) property to set the header content: @@ -61,7 +61,7 @@ this.Content = navigationDrawer; ![Header](Images/panel-content/navigation_drawer_header.png) -## Header Height +## Header height Adjust the height of the drawer header content using the [DrawerHeaderHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeaderHeight) property. @@ -105,7 +105,7 @@ this.Content = navigationDrawer; ![Header height](Images/panel-content/navigation_drawer_header_height.png) -## Footer Content +## Footer content The footer is displayed at the bottom of the drawer. Use the [DrawerFooterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterView) property to set the footer content: @@ -146,7 +146,7 @@ this.Content = navigationDrawer; ![Footer](Images/panel-content/navigation_drawer_footer.png) -## Footer Height +## Footer height Adjust the height of the drawer footer content using the [DrawerFooterHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerFooterHeight) property. @@ -190,7 +190,7 @@ this.Content = navigationDrawer; ![Footer height](Images/panel-content/navigation_drawer_footer_height.png) -## Drawer Content +## Drawer content The main content of the drawer is displayed between the header and footer content. It can be set using the [DrawerContentView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerContentView) property. The content view occupies the space left by the header and footer content. @@ -229,4 +229,4 @@ this.Content = navigationDrawer; {% endtabs %} -![content](Images/panel-content/navigation_drawer_content.png) +![Content](Images/panel-content/navigation_drawer_content.png) diff --git a/MAUI/NavigationDrawer/Side-Pane-Sizing.md b/MAUI/NavigationDrawer/Side-Pane-Sizing.md index 60625fc1c1..0aa17545de 100644 --- a/MAUI/NavigationDrawer/Side-Pane-Sizing.md +++ b/MAUI/NavigationDrawer/Side-Pane-Sizing.md @@ -11,7 +11,7 @@ documentation: UG The size of the side pane can be adjusted using the [DrawerHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeight) and [DrawerWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerWidth) properties. -## Drawer Height +## DrawerHeight The [DrawerHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerHeight) property changes the height of the side pane when the [Position](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Position) is set to [Top](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.Position.html#Syncfusion_Maui_NavigationDrawer_Position_Top) or [Bottom](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.Position.html#Syncfusion_Maui_NavigationDrawer_Position_Bottom). @@ -47,9 +47,9 @@ The [DrawerHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Navigatio {% endtabs %} -![Drawer height](Images/panel-size/navigation_drawer_pane_height.png) +![DrawerHeight](Images/panel-size/navigation_drawer_pane_height.png) -## Drawer Width +## DrawerWidth The [DrawerWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_DrawerWidth) property changes the width of the side pane when the [Position](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_Position) is set to [Left](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.Position.html#Syncfusion_Maui_NavigationDrawer_Position_Left) or [Right](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.Position.html#Syncfusion_Maui_NavigationDrawer_Position_Right). @@ -87,4 +87,4 @@ this.Content = navigationDrawer; {% endtabs %} -![Drawer width](Images/panel-size/navigation_drawer_pane_width.png) +![DrawerWidth](Images/panel-size/navigation_drawer_pane_width.png) diff --git a/MAUI/NavigationDrawer/Swipe-Gesture.md b/MAUI/NavigationDrawer/Swipe-Gesture.md index 22be045d0b..7b2282588f 100644 --- a/MAUI/NavigationDrawer/Swipe-Gesture.md +++ b/MAUI/NavigationDrawer/Swipe-Gesture.md @@ -1,7 +1,7 @@ --- layout: post title: Swipe Gesture in .NET MAUI Navigation Drawer | Syncfusion® -description: Learn about SwipGesture support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. +description: Learn about Swipe Gesture support in the Syncfusion® .NET MAUI Navigation Drawer (SfNavigationDrawer) control and more. platform: MAUI control: SfNavigationDrawer documentation: UG @@ -9,9 +9,9 @@ documentation: UG # Swipe Gesture in .NET MAUI Navigation Drawer (SfNavigationDrawer) -The NavigationDrawer supports swipe gesture for both opening and closing the drawer. +The Navigation Drawer supports swipe gesture for both opening and closing the drawer. -## Enabling Swipe Gesture +## Enabling swipe gesture The [EnableSwipeGesture](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_EnableSwipeGesture) property can activate or deactivate the swipe functionality in the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.html). @@ -42,7 +42,7 @@ this.Content = navigationDrawer; {% endtabs %} -## Swipe Sensitivity +## Swipe sensitivity The [TouchThreshold](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_NavigationDrawer_DrawerSettings_TouchThreshold) property in the [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.html) can expand the swipe region. The default value of TouchThreshold is `120`. diff --git a/MAUI/NavigationDrawer/Toggling-Drawer.md b/MAUI/NavigationDrawer/Toggling-Drawer.md index 225d12ebf7..3b8967a4c7 100644 --- a/MAUI/NavigationDrawer/Toggling-Drawer.md +++ b/MAUI/NavigationDrawer/Toggling-Drawer.md @@ -15,7 +15,7 @@ The drawer in the SfNavigationDrawer can be toggled using the following methods: * ToggleDrawer Method * Swipe Gesture -## Opening Drawer Programmatically +## Opening drawer programmatically The [IsOpen](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_IsOpen) property and [ToggleDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_Maui_NavigationDrawer_SfNavigationDrawer_ToggleDrawer) method enable programmatically opening or closing the drawer. diff --git a/MAUI/Radial-Menu/CenterButton-Customization.md b/MAUI/Radial-Menu/CenterButton-Customization.md index 963a08d0df..1e2ed832a6 100644 --- a/MAUI/Radial-Menu/CenterButton-Customization.md +++ b/MAUI/Radial-Menu/CenterButton-Customization.md @@ -1,15 +1,15 @@ --- layout: post -title: CenterButton Customization in MAUI Radial Menu Control | Syncfusion® -description: Learn about CenterButton Customization support in Syncfusion® MAUI Radial Menu(SfRadialMenu) control and more. +title: CenterButton Customization in .NET MAUI Radial Menu Control | Syncfusion® +description: Learn about center button customization support in Syncfusion® .NET MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- # CenterButton Customization in MAUI Radial Menu (SfRadialMenu) -The CenterButton or BackButton in the radial menu is a view in the center of the radial menu. It performs operations such as opening and closing the rim and navigating to the next-level items. You can customize the CenterButton/BackButton with `FontIcon`, `Custom View`, and `Caption`. +The center button or back button in the Radial Menu is a view in the center of the Radial Menu. It performs operations such as opening and closing the rim and navigating to the next-level items. You can customize the CenterButton/BackButton with `FontIcon`, `Custom View`, and `Caption`. ## CenterButtonText and CenterButtonBackText @@ -102,7 +102,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with CenterButtonText and CenterButtonBackText.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-text.png) +![CenterButtonText and CenterButtonBackText.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-text.png) ## CenterButtonTextColor and CenterButtonBackTextColor @@ -266,7 +266,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with BackgroundColor.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-backgroundcolor.png) +![CenterButtonBackgroundColor](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-backgroundcolor.png) ## CenterButtonRadius @@ -328,7 +328,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with CenterButtonRadius.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-radius.png) +![CenterButtonRadius](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-radius.png) ## CenterButtonFontFamily and CenterButtonBackFontFamily @@ -673,7 +673,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with Stroke.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-stroke.png) +![CenterButtonStroke](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-stroke.png) ## CenterButtonStrokeThickness @@ -738,7 +738,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with StrokeThickness.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-strokethickness.png) +![CenterButtonStrokeThickness](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-strokethickness.png) ## CenterButtonView and CenterButtonBackView @@ -858,7 +858,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with CenterButtonView and CenterButtonBackView.](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-frontview-and-backview.png) +![CenterButtonView and CenterButtonBackView](images/centerbutton-customization/maui-radialmenu-centerbutton-customization-frontview-and-backview.png) ## EnableCenterButtonAnimation @@ -921,7 +921,7 @@ namespace RadialSample ## CenterButtonFontAutoScalingEnabled -The [CenterButtonFontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontAutoScalingEnabled) property is used to automatically scale the Radial menu's center button font size based on the operating system's text size. The default value of the `CenterButtonFontAutoScalingEnabled` property is `false.` This property applies to both the [`CenterButtonText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonText) and the [`CenterButtonBackText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackText). +The [CenterButtonFontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonFontAutoScalingEnabled) property is used to automatically scale the Radial Menu's center button font size based on the operating system's text size. The default value of the `CenterButtonFontAutoScalingEnabled` property is `false.` This property applies to both the [`CenterButtonText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonText) and the [`CenterButtonBackText`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackText). {% tabs %} diff --git a/MAUI/Radial-Menu/Events.md b/MAUI/Radial-Menu/Events.md index 0252c4e0d4..6f6d285ff1 100644 --- a/MAUI/Radial-Menu/Events.md +++ b/MAUI/Radial-Menu/Events.md @@ -1,17 +1,17 @@ --- layout: post -title: Events in MAUI Radial Menu Control | Syncfusion® -description: Learn about Events in Syncfusion® Essential Studio® .NET MAUI Radio Menu control, its elements and more. +title: Events in .NET MAUI Radial Menu Control | Syncfusion® +description: Learn about Events in Syncfusion® .NET MAUI Radio Menu control, its elements and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- # Events in MAUI Radial Menu (SfRadialMenu) -## Perform an Action While Navigating to the Next Level +## Perform an action while navigating to the next level -In the radial menu, you can perform an action while navigating between levels. The [`Navigating`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigating) event occurs when moving from one level to another, and the [`Navigated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigated) event triggers after reaching the new level. +In the Radial Menu, you can perform an action while navigating between levels. The [`Navigating`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigating) event occurs when moving from one level to another, and the [`Navigated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Navigated) event triggers after reaching the new level. {% tabs %} @@ -85,9 +85,9 @@ namespace RadialSample N> You can cancel navigation using the `Cancel` event argument. -## Perform an Action While Opening the Radial Menu +## Perform an action while opening the Radial Menu -You can perform an action while opening the radial menu. The [`Opening`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opening) event occurs when the radial menu begins to open, and the [`Opened`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opened) event occurs once it is fully open. +You can perform an action while opening the Radial Menu. The [`Opening`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opening) event occurs when the Radial Menu begins to open, and the [`Opened`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Opened) event occurs once it is fully open. {% tabs %} @@ -159,9 +159,9 @@ namespace RadialSample {% endtabs %} -## Perform an Action While Closing the Radial Menu +## Perform an action while closing the Radial Menu -You can perform an action when closing the radial menu. The [`Closing`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closing) event event occurs when the radial menu begins to close, and the [`Closed`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closed) event occurs once it is completely closed. +You can perform an action when closing the Radial Menu. The [`Closing`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closing) event event occurs when the Radial Menu begins to close, and the [`Closed`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_Closed) event occurs once it is completely closed. {% tabs %} @@ -233,9 +233,9 @@ namespace RadialSample {% endtabs %} -## Perform an Action While Tapping the Center Back Button +## Perform an action while tapping the center back button -You can perform an action when tapping the center back button of the radial menu. The [`CenterButtonBackTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackTapped) event occurs when the center button of the radial menu is tapped. +You can perform an action when tapping the center back button of the Radial Menu. The [`CenterButtonBackTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_CenterButtonBackTapped) event occurs when the center button of the Radial Menu is tapped. {% tabs %} @@ -299,9 +299,9 @@ namespace RadialSample {% endtabs %} -## Perform an Action While Tapping the Radial Menu Item +## Perform an action while tapping the Radial Menu item -You can perform an action when tapping the radial menu item of the radial menu. The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemTapped) event is triggered when any item in the radial menu is tapped. +You can perform an action when tapping the Radial Menu item of the Radial Menu. The [`ItemTapped`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_ItemTapped) event is triggered when any item in the Radial Menu is tapped. {% tabs %} @@ -365,9 +365,9 @@ namespace RadialSample {% endtabs %} -## Perform an Action While Pressing and Releasing the Radial Menu Item +## Perform an action while pressing and releasing the Radial Menu item -You can perform an action when pressing and releasing the Radial menu item of the Radial menu. The [TouchDown](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchDown) event occurs when pressing the Radial menu item, and the [TouchUp](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchUP) event occurs on releasing. +You can perform an action when pressing and releasing the Radial Menu item of the Radial Menu. The [TouchDown](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchDown) event occurs when pressing the Radial Menu item, and the [TouchUp](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html?tabs=tabid-1#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_TouchUP) event occurs on releasing. {% tabs %} diff --git a/MAUI/Radial-Menu/Getting-Started.md b/MAUI/Radial-Menu/Getting-Started.md index 6adb0539a5..2b6f19260d 100644 --- a/MAUI/Radial-Menu/Getting-Started.md +++ b/MAUI/Radial-Menu/Getting-Started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with MAUI Radial Menu Control | Syncfusion® -description: Learn about getting started with the Syncfusion® MAUI Radial Menu (SfRadialMenu) control, its elements, and more. +title: Getting Started with .NET MAUI Radial Menu Control | Syncfusion® +description: Learn about getting started with the Syncfusion® .NET MAUI Radial Menu (SfRadialMenu) control, its elements, and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- # Getting Started with .NET MAUI Radial Menu -This section guides you through setting up and configuring a [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) in your .NET MAUI application. Follow the steps below to add a basic [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) to your project. +This section guides you through setting up and configuring a [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) in your .NET MAUI application. Follow the steps below to add a basic [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) to your project. To quickly get started with the .NET MAUI Radial Menu, watch this video. @@ -25,19 +25,19 @@ Before proceeding, ensure the following are set up: 1. Install the [.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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location. Then, click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI RadialMenu NuGet Package +## Step 2: Install the Syncfusion® MAUI Radial Menu NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.RadialMenu](https://www.nuget.org/packages/Syncfusion.Maui.RadialMenu/) 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. @@ -66,10 +66,10 @@ Before proceeding, ensure the following are set up: {% endhighlight %} {% endtabs %} -## Step 4: Add a RadialMenu +## Step 4: Add a Radial Menu -1. To initialize the control, import the RadialMenu namespace into your code. -2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). +1. To initialize the control, import the Radial Menu namespace into your code. +2. Initialize [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). {% tabs %} {% highlight xaml %} @@ -114,21 +114,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI RadialMenu NuGet Package +## Step 2: Install the Syncfusion® MAUI Radial Menu 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.RadialMenu` to install the Syncfusion® .NET MAUI RadialMenu package. +3. Run the command `dotnet add package Syncfusion.Maui.RadialMenu` to install the Syncfusion® .NET MAUI Radial Menu package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. @@ -157,10 +157,10 @@ Before proceeding, ensure the following are set up: {% endhighlight %} {% endtabs %} -## Step 4: Add a RadialMenu +## Step 4: Add a Radial Menu -1. To initialize the control, import the RadialMenu namespace into your code. -2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). +1. To initialize the control, import the Radial Menu namespace into your code. +2. Initialize [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). {% tabs %} {% highlight xaml %} @@ -205,19 +205,19 @@ Before proceeding, ensure the following are set up: 2. Install the [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution,** Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI RadialMenu NuGet Package +## Step 2: Install the Syncfusion® MAUI Radial Menu NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.RadialMenu](https://www.nuget.org/packages/Syncfusion.Maui.RadialMenu/) 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 +## 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. @@ -246,10 +246,10 @@ Before proceeding, ensure the following are set up: {% endhighlight %} {% endtabs %} -## Step 4: Add a RadialMenu +## Step 4: Add a Radial Menu -1. To initialize the control, import the RadialMenu namespace into your code. -2. Initialize [RadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). +1. To initialize the control, import the Radial Menu namespace into your code. +2. Initialize [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html). {% tabs %} {% highlight xaml %} @@ -286,7 +286,7 @@ namespace RadialMenuGettingStarted {% endtabcontent %} {% endtabcontents %} -## Adding Radial Menu with Items +## Adding Radial Menu with items {% tabs %} @@ -370,9 +370,9 @@ namespace RadialMenuGettingStarted {% endtabs %} -![Getting started in .NET MAUI RadialMenu control.](images/getting-started/maui-radialmenu-getting-started.png) +![Getting started with .NET MAUI Radial Menu.](images/getting-started/maui-radialmenu-getting-started.png) -N> You can find the getting started sample of .NET MAUI SfRadialMenu from this [link](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-Radial-Menu). +N> You can find the getting started sample of .NET MAUI Radial Menu from this [link](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-Radial-Menu). diff --git a/MAUI/Radial-Menu/Overview.md b/MAUI/Radial-Menu/Overview.md index f48dde347b..90179d0099 100644 --- a/MAUI/Radial-Menu/Overview.md +++ b/MAUI/Radial-Menu/Overview.md @@ -1,17 +1,17 @@ --- layout: post -title: About MAUI Radial Menu Control | Syncfusion® -description: Learn about the introduction of the Syncfusion® MAUI Radial Menu (SfRadialMenu) control, its elements, and more. +title: About .NET MAUI Radial Menu Control | Syncfusion® +description: Learn about the introduction of the Syncfusion® .NET MAUI Radial Menu (SfRadialMenu) control, its elements, and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- -# .NET MAUI RadialMenu (SfRadialMenu) Overview +# .NET MAUI Radial Menu (SfRadialMenu) Overview - The [.NET MAUI RadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu) control displays a hierarchical menu in a circular layout, optimized for touch-enabled devices. It is typically used as a context menu and can expose more menu items in the same space than traditional menus. + The [.NET MAUI Radial Menu](https://www.syncfusion.com/maui-controls/maui-radial-menu) control displays a hierarchical menu in a circular layout, optimized for touch-enabled devices. It is typically used as a context menu and can expose more menu items in the same space than traditional menus. - ![Overview in .NET MAUI SfRadialMenu](images/overview/maui-radialmenu-overview.png) + ![.NET MAUI Radial Menu](images/overview/maui-radialmenu-overview.png) ## Key features diff --git a/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md b/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md index 7615117a15..eb4505b96a 100644 --- a/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md +++ b/MAUI/Radial-Menu/Place-And-Drag-RadialMenu.md @@ -1,17 +1,17 @@ --- layout: post -title: Placing and Dragging in MAUI Radial Menu Control | Syncfusion® -description: Learn all about placing and dragging RadialMenu support in Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. +title: Placing and Dragging in .NET MAUI Radial Menu Control | Syncfusion® +description: Learn all about placing and dragging support in Syncfusion® .NET MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- -# Placing and Dragging RadialMenu in MAUI Radial Menu (SfRadialMenu) +# Placing and Dragging in MAUI Radial Menu (SfRadialMenu) -You can place radial menu anywhere on its parent layout and drag it within the parent layout. +You can place Radial Menu anywhere on its parent layout and drag it within the parent layout. -## Dragging RadialMenu +## Dragging Radial Menu You can enable or disable dragging by using the [`IsDragEnabled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsDragEnabled) property. @@ -69,19 +69,19 @@ namespace RadialSample {% endtabs %} -![Image for dragging](images/placing-dragging/maui-radialmenu-dragging.png) +![Dragging Radial Menu](images/placing-dragging/maui-radialmenu-dragging.png) -## DragEvents +## Drag events -[`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) provides an event for [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) that is triggered when the RadialMenu begins to be dragged. +[`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) provides an event for [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) that is triggered when the Radial Menu begins to be dragged. ### DragBegin event -This event is triggered when the RadialMenu starts to drag, using [`DragBeginEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html). +This event is triggered when the Radial Menu starts to drag, using [`DragBeginEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html). -* [`Position`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Position) - Gets the starting position of the RadialMenu. +* [`Position`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Position) - Gets the starting position of the Radial Menu. -* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Handled) - Gets and sets a boolean value for enabling or disabling the dragging of the RadialMenu. +* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragBeginEventArgs.html#Syncfusion_Maui_RadialMenu_DragBeginEventArgs_Handled) - Gets and sets a boolean value for enabling or disabling the dragging of the Radial Menu. To hook the [`DragBegin`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragBegin) event to obtain the start position and restrict dragging, follow the code example: @@ -145,13 +145,13 @@ namespace RadialSample ### DragEnd event -This event is triggered when dragging ends in the RadialMenu, using [`DragEndEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html). +This event is triggered when dragging ends in the Radial Menu, using [`DragEndEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html). -* [`OldValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_OldValue) - Gets the start position of the RadialMenu. +* [`OldValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_OldValue) - Gets the start position of the Radial Menu. -* [`NewValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_NewValue) - Gets the end position of the RadialMenu. +* [`NewValue`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_NewValue) - Gets the end position of the Radial Menu. -* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_Handled) - Gets and sets a boolean value to restrict the RadialMenu from moving to another position. +* [`Handled`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.DragEndEventArgs.html#Syncfusion_Maui_RadialMenu_DragEndEventArgs_Handled) - Gets and sets a boolean value to restrict the Radial Menu from moving to another position. To hook the [`DragEnd`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DragEnd) event and obtain start position, end position, and restrict movement, follow the code example: @@ -215,9 +215,9 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Placing RadialMenu +## Placing Radial Menu -You can place the radial menu anywhere on its parent layout. The position of the RadialMenu is calculated based on the parent layout's center point. +You can place the Radial Menu anywhere on its parent layout. The position of the Radial Menu is calculated based on the parent layout's center point. {% tabs %} diff --git a/MAUI/Radial-Menu/Populating-Items.md b/MAUI/Radial-Menu/Populating-Items.md index 78ade65cfe..9775b869e6 100644 --- a/MAUI/Radial-Menu/Populating-Items.md +++ b/MAUI/Radial-Menu/Populating-Items.md @@ -1,23 +1,23 @@ --- layout: post -title: Populating Items in MAUI Radial Menu Control | Syncfusion® -description: Learn about item population support in the Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. +title: Populating Items in .NET MAUI Radial Menu Control | Syncfusion® +description: Learn about item population support in the Syncfusion® .NET MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- # Populating Items in MAUI Radial Menu (SfRadialMenu) -This section explains how to populate items through radial menu items and item sources with item templates. +This section explains how to populate items through Radial Menu items and item sources with item templates. -## Through Radial Menu Items +## Through Radial Menu items -By passing a collection of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), you can view the [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) control. The radial menu item class provides various options to customize items by providing custom views, font icons, and images. You can add radial menu items hierarchically. +By passing a collection of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), you can view the [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html) control. The Radial Menu item class provides various options to customize items by providing custom views, font icons, and images. You can add Radial Menu items hierarchically. ### Text -The following code sample demonstrates how to create a RadialMenu control with items having the given text. +The following code sample demonstrates how to create a Radial Menu control with items having the given text. {% tabs %} @@ -74,13 +74,13 @@ namespace RadialSample {% endtabs %} -N> Instead of using ObservableCollection, use [`RadialMenuItemsCollection`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.RadialMenuItemsCollection.html) for the RadialMenu Items list and [`SubMenuItemsCollection`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SubMenuItemsCollection.html) for the list of items within each RadialMenuItem. +N> Instead of using ObservableCollection, use [`RadialMenuItemsCollection`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.RadialMenuItemsCollection.html) for the Radial Menu Items list and [`SubMenuItemsCollection`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SubMenuItemsCollection.html) for the list of items within each Radial Menu item. -![Display text in .NET MAUI RadialMenu](images/populating-items/maui-radialmenu-populating-only-text.png) +![Text](images/populating-items/maui-radialmenu-populating-only-text.png) -### Image with Text +### Image with text -The following code sample demonstrates how to display images and text in the RadialMenu items of the control. +The following code sample demonstrates how to display images and text in the Radial Menu items of the control. {% tabs %} @@ -137,11 +137,11 @@ namespace RadialSample {% endtabs %} -![Display image with text in .NET MAUI RadialMenu.](images/populating-items/maui-radialmenu-populating-text-with-images.png) +![Image with text](images/populating-items/maui-radialmenu-populating-text-with-images.png) -## Custom Font with Text +## Custom font with text -The following code sample demonstrates how to display custom font with text in the RadialMenu items of the control. +The following code sample demonstrates how to display custom font with text in the Radial Menu items of the control. {% tabs %} @@ -222,13 +222,13 @@ namespace RadialSample {% endtabs %} -![Display font with text in .NET MAUI RadialMenu.](images/populating-items/maui-radialmenu-populating-text-icons.png) +![Font with text](images/populating-items/maui-radialmenu-populating-text-icons.png) -### Adding Nested Items of Radial Menu +### Adding nested items of Radial Menu You can populate nested levels of items within a menu to group similar actions. For example, you can group clipboard operations by adding a clipboard as a main menu and cut, copy, and paste as its children. -The following code sample demonstrates how to add the nested items of radial menu. +The following code sample demonstrates how to add the nested items of Radial Menu. {% tabs %} @@ -320,7 +320,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with Items.](images/populating-items/maui-radialmenu-populating-nested-items.png) +![Nested items](images/populating-items/maui-radialmenu-populating-nested-items.png) ## Through ItemsSource and ItemTemplate @@ -415,11 +415,11 @@ namespace RadialSample {% endtabs %} -![Display RadialMenu with ItemsSource and ItemTemplate.](images/populating-items/maui-radialmenu-populating-itemssource-with-itemtemplate.png) +![ItemsSource and ItemTemplate](images/populating-items/maui-radialmenu-populating-itemssource-with-itemtemplate.png) -## Animation Duration +## AnimationDuration -The animation duration in a radial menu can be changed using the [`AnimationDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_AnimationDuration) property. It is used to change the speed of opening and closing of the radial menu. +The animation duration in a Radial Menu can be changed using the [`AnimationDuration`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_AnimationDuration) property. It is used to change the speed of opening and closing of the Radial Menu. {% tabs %} @@ -479,7 +479,7 @@ namespace RadialSample ## IsOpen -The [`IsOpen`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsOpen) property indicates whether the radial menu is in an open or closed state. +The [`IsOpen`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_IsOpen) property indicates whether the Radial Menu is in an open or closed state. {% tabs %} @@ -537,7 +537,7 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Separator Thickness and Color in Radial menu +## Separator thickness and color in Radial Menu The thickness of the strip between items can be changed using the [`SeparatorThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SeparatorThickness) property, and the color of the strip can be changed using the [`SeparatorColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SeparatorColor) property. @@ -600,7 +600,7 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Rim Color and Rim Radius in Radial menu +## RimColor and RimRadius in Radial Menu The radius of the rim can be changed using the [`RimRadius`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_RimRadius) property, and the color of the rim can be changed using the [`RimColor`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_RimColor) property. @@ -663,7 +663,7 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Display Member Path +## DisplayMemberPath The control is populated with a list of employees, and the employee model contains two properties: ID and EmployeeName. So, it is necessary to intimate by which property it should display to the items. The [`DisplayMemberPath`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_DisplayMemberPath) property specifies the property path. @@ -739,9 +739,9 @@ namespace RadialSample {% endhighlight %} {% endtabs %} -## Selection Color +## SelectionColor -The [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) allows you to change the selection color for the selected Radial menu item by using the [SelectionColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SelectionColor) property. +The [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) allows you to change the selection color for the selected Radial Menu item by using the [SelectionColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_SelectionColor) property. {% tabs %} diff --git a/MAUI/Radial-Menu/Segmenting-Placing-Items.md b/MAUI/Radial-Menu/Segmenting-Placing-Items.md index c82f4f826a..a7c4213a34 100644 --- a/MAUI/Radial-Menu/Segmenting-Placing-Items.md +++ b/MAUI/Radial-Menu/Segmenting-Placing-Items.md @@ -1,15 +1,15 @@ --- layout: post title: Segmenting and Placing Items in .NET MAUI Radial Menu | Syncfusion® -description: Learn about segmenting and placing items in the .NET MAUI Radio Menu control, its elements, and more. +description: Learn about segmenting and placing items in the .NET MAUI Radial Menu control, its elements, and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- # Segmenting and Placing Items in .NET MAUI Radial Menu -There are two layout types available for the radial menu: +There are two layout types available for the Radial Menu: * [`Default`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Default) * [`Custom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Custom) @@ -18,7 +18,7 @@ Both the layout types divide the available space equally among all the children ## Default -The number of segments in the panel is determined by the count of children in each level. As the segment count differs in each hierarchical level, radial menu items are arranged in the sequential order they are added. +The number of segments in the panel is determined by the count of children in each level. As the segment count differs in each hierarchical level, Radial Menu items are arranged in the sequential order they are added. {% tabs %} @@ -84,9 +84,9 @@ The [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui ### SegmentIndex -The [`SegmentIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_SegmentIndex) property specifies the index of a radial menu item in the circular panel. Based on the index, items are inserted into segment. If the `SegmentIndex` is not specified for a `RadialMenuItem`, the item is arranged in the next available free segment. +The [`SegmentIndex`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_SegmentIndex) property specifies the index of a Radial Menu item in the circular panel. Based on the index, items are inserted into segment. If the `SegmentIndex` is not specified for a `RadialMenuItem`, the item is arranged in the next available free segment. -## Code Snippet for VisibleSegmentCount and SegmentIndex +## Code snippet for VisibleSegmentCount and SegmentIndex {% tabs %} @@ -227,6 +227,6 @@ namespace RadialSample {% endtabs %} -![VisibleSegment.](images/segmentation/maui-radialmenu-segmentation-segmentIndex.png) +![VisibleSegment](images/segmentation/maui-radialmenu-segmentation-segmentIndex.png) N> The [`VisibleSegmentsCount`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html#Syncfusion_Maui_RadialMenu_SfRadialMenu_VisibleSegmentsCount) property applies only to the [`Custom`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.LayoutType.html#Syncfusion_Maui_RadialMenu_LayoutType_Custom) layout. \ No newline at end of file diff --git a/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md b/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md index 14c8e99207..cc5133a57a 100644 --- a/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md +++ b/MAUI/Radial-Menu/SfRadialMenuItem-Customization.md @@ -1,15 +1,15 @@ --- layout: post -title: SfRadialMenuItems Customization in MAUI Radial Menu | Syncfusion® -description: Learn about SfRadialMenuItems customization support in the Syncfusion® MAUI Radial Menu (SfRadialMenu) control and more. +title: SfRadialMenuItems Customization in .NET MAUI Radial Menu | Syncfusion® +description: Learn about SfRadialMenuItem's customization support in the Syncfusion® .NET MAUI Radial Menu (SfRadialMenu) control and more. platform: MAUI -control: RadialMenu (SfRadialMenu) +control: SfRadialMenu documentation: UG --- -# SfRadialMenuItems Customization in MAUI Radial Menu (SfRadialMenu) +# SfRadialMenuItem's Customization in MAUI Radial Menu (SfRadialMenu) -The [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) class provides various options to customize items with `Custom Views`, `FontIcons`, and `Images`. You can add radial menu items by hierarchy. To add a [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) to a [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), create an instance of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), and add it to the [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Items) property. +The [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) class provides various options to customize items with `Custom Views`, `FontIcons`, and `Images`. You can add Radial Menu items by hierarchy. To add a [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html) to a [`SfRadialMenu`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenu.html), create an instance of [`SfRadialMenuItem`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html), and add it to the [`Items`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_Items) property. ## Items @@ -221,7 +221,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenuItem with ItemHeight and ItemWidth.](images/radialmenuitem-customization/maui-radialmenu-radialmenuitem-itemheight-and-itemwidth.png) +![RadialMenuItem with ItemHeight and ItemWidth.](images/radialmenuitem-customization/maui-radialmenu-radialmenuitem-itemheight-and-itemwidth.png) ## BackgroundColor @@ -288,7 +288,7 @@ namespace RadialSample {% endtabs %} -![Display RadialMenuItem with BackgroundColor.](images/radialmenuitem-customization/maui-radialmenu-radialmenuitem-backgroundcolor.png) +![RadialMenuItem with BackgroundColor.](images/radialmenuitem-customization/maui-radialmenu-radialmenuitem-backgroundcolor.png) ## FontFamily @@ -730,9 +730,9 @@ namespace RadialMenuCommandSample {% endhighlight %} -## Font Auto Scaling Enabled +## FontAutoScalingEnabled -The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontAutoScalingEnabled) property is used to automatically scale the Radial menu item's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false`. +The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.SfRadialMenuItem.html#Syncfusion_Maui_RadialMenu_SfRadialMenuItem_FontAutoScalingEnabled) property is used to automatically scale the Radial Menu item's font size based on the operating system's text size. The default value of the `FontAutoScalingEnabled` property is `false`. {% tabs %} diff --git a/MAUI/Radial-Menu/migration.md b/MAUI/Radial-Menu/migration.md index 21bc2a67ef..74eacc0e04 100644 --- a/MAUI/Radial-Menu/migration.md +++ b/MAUI/Radial-Menu/migration.md @@ -1,13 +1,13 @@ --- layout: post title: Migrate from Xamarin to .NET MAUI SfRadialMenu | Syncfusion® -description: Learn about migrating from the Syncfusion® Xamarin.Forms RadialMenu control to the .NET MAUI RadialMenu control. +description: Learn about migrating from the Syncfusion® Xamarin.Forms Radial Menu control to the .NET MAUI Radial Menu control. platform: MAUI -control: RadialMenu (SfRadialMenu) control +control: SfRadialMenu documentation: UG --- -# Migrate from Xamarin.Forms RadialMenu to .NET MAUI RadialMenu Control +# Migrate from Xamarin.Forms Radial Menu to .NET MAUI Radial Menu Control To simplify the migration from the [Xamarin SfRadialMenu Control](https://www.syncfusion.com/xamarin-ui-controls/xamarin-radial-menu) to the [.NET MAUI SfRadialMenu Control](https://www.syncfusion.com/maui-controls/maui-radial-menu), most of the APIs from the `Xamarin SfRadialMenu Control` have been retained in the `.NET MAUI SfRadialMenu Control`. However, to maintain the consistency in API naming within the `.NET MAUI SfRadialMenu Control`, some APIs have been renamed. The following sections outline the differences. @@ -22,9 +22,9 @@ To simplify the migration from the [Xamarin SfRadialMenu Control](https://www.sy Syncfusion.Maui.RadialMenu -## Initialize Control +## Initialize control -To initialize the control, import the radial menu control namespace and initialize the [SfRadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu) as shown in the following code sample. +To initialize the control, import the Radial Menu control namespace and initialize the [SfRadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu) as shown in the following code sample. @@ -87,7 +87,7 @@ this.Content = radialMenu; ## Properties -### SfRadialMenu Control +### SfRadialMenu control
@@ -109,7 +109,7 @@ this.Content = radialMenu;
-## Upcoming features in .NET MAUI RadialMenu +## Upcoming features in .NET MAUI Radial Menu * **LayoutType:** Determines the arrangement of items on the rim, either automatic or user-defined. * **VisibleSegmentCount:** Determines the number of segments visible at a time on the menu. diff --git a/MAUI/Radio-Button/Events.md b/MAUI/Radio-Button/Events.md index 275624cf0f..2d7a859211 100644 --- a/MAUI/Radio-Button/Events.md +++ b/MAUI/Radio-Button/Events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in .NET MAUI Radio Button Control | Syncfusion® -description: Learn about event support in Syncfusion® Essential Studio® .NET MAUI Radio Button control, its elements, and more. +description: Learn about event support in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control, its elements, and more. platform: MAUI control: SfRadioButton documentation: UG @@ -64,7 +64,7 @@ private void RadioButton_StateChanged(object sender, Syncfusion.Maui.Buttons.Sta ## StateChanging event -The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property is about to change, typically by tapping the RadioButton control. The event arguments are of type `StateChangingEventArgs` and provide the following properties: +The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.StateChangingEventArgs.html) event is triggered when the state of the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property is about to change, typically by tapping the Radio Button control. The event arguments are of type `StateChangingEventArgs` and provide the following properties: * [`IsChecked`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) : The new value(state) of the `IsChecked` property. * `Cancel` : Gets or sets a value indicating whether the event should be canceled. diff --git a/MAUI/Radio-Button/Getting-Started.md b/MAUI/Radio-Button/Getting-Started.md index b62fe3603e..c8d1f5beab 100644 --- a/MAUI/Radio-Button/Getting-Started.md +++ b/MAUI/Radio-Button/Getting-Started.md @@ -1,18 +1,18 @@ --- layout: post title: Getting Started with .NET MAUI Radio Button Control | Syncfusion® -description: Learn about getting started with Syncfusion® Essential Studio® .NET MAUI Radio Button control, its elements, and more. +description: Learn about getting started with Syncfusion® .NET MAUI Radio Button (SfRadioButton) control, its elements, and more. platform: MAUI control: SfRadioButton documentation: UG -keywords : .NET MAUI Radio Button, MAUI Radio Button, MAUI Radio Button Group, MAUI Radio Button State. +keywords : .net maui radio button, maui radio button, maui radio button group, maui radio button state. --- -# Getting Started with .NET MAUI RadioButton +# Getting Started with .NET MAUI Radio Button -This section guides you through setting up and configuring a [RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) in your .NET MAUI application. Follow the steps below to add a basic RadioButton to your project. +This section guides you through setting up and configuring a [SfRadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) in your .NET MAUI application. Follow the steps below to add a basic Radio Button to your project. -To quickly get started with the .NET MAUI RadioButton, watch this video. +To quickly get started with the .NET MAUI Radio Button, watch this video. {% youtube "https://www.youtube.com/watch?v=z5EwGpw0KTI" %} @@ -26,19 +26,19 @@ 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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and choose the **.NET MAUI App** template. 2. Name the project and choose a location. Then, click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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. @@ -73,7 +73,7 @@ namespace RadioButtonGettingStarted {% endhighlight %} -## Step 4: Add a Basic RadioButton +## Step 4: Add a basic Radio Button 1. To initialize the control, import the Buttons namespace into your code. 2. Initialize [SfRadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html). @@ -120,21 +120,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons 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.Buttons` to install the Syncfusion® .NET MAUI Buttons package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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 in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -169,7 +169,7 @@ namespace RadioButtonGettingStarted {% endhighlight %} -## Step 4: Add a Basic RadioButton +## Step 4: Add a basic Radio Button 1. To initialize the control, import the Buttons namespace into your code. 2. Initialize [SfRadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html). @@ -217,19 +217,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution**, Select .NET (C#), and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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 +## 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 in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -264,7 +264,7 @@ namespace RadioButtonGettingStarted {% endhighlight %} -## Step 4: Add a Basic RadioButton +## Step 4: Add a basic Radio Button 1. To initialize the control, import the Buttons namespace into your code. 2. Initialize [SfRadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html). @@ -303,9 +303,9 @@ namespace RadioButtonGettingStarted {% endtabcontent %} {% endtabcontents %} -## Setting Caption +## Setting caption -The .NET MAUI Radio Button caption can be defined using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the radio button and is displayed next to it. +The .NET MAUI Radio Button caption can be defined using the [Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property. This caption typically describes the meaning of the Radio Button and is displayed next to it. {% tabs %} {% highlight xaml %} @@ -324,7 +324,7 @@ The .NET MAUI Radio Button caption can be defined using the [Text](https://help. ![.NET MAUI Radio Button](Images/Getting-Started/radiobutton.png) -## Change the Radio Button State +## Change the Radio Button state The two different visual states of the [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) are: @@ -333,7 +333,7 @@ The two different visual states of the [.NET MAUI Radio Button](https://help.syn To change the state of the .NET MAUI Radio Button, you can utilize the [IsChecked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_IsChecked) property of [SfRadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html). When the Radio Button is checked, an inner circle is added to its visualization. -You can group multiple radio buttons together by using RadioGroup. Only one button within a group can be selected at a time. +You can group multiple Radio Buttons together by using Radio Group. Only one button within a group can be selected at a time. {% tabs %} {% highlight xaml %} @@ -365,4 +365,4 @@ N> [SfRadioButtons](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons. You can find the complete getting started sample of the .NET MAUI Radio Button from this [link](https://github.com/SyncfusionExamples/maui-radiobutton-samples). -N> You can also explore our [.NET MAUI Radio Button Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/RadioButton) that shows you how to render the Radio Button in .NET MAUI. \ No newline at end of file +N> You can also explore our [.NET MAUI Radio Button example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/RadioButton) that shows you how to render the .NET MAUI Radio Button. \ No newline at end of file diff --git a/MAUI/Radio-Button/Grouping.md b/MAUI/Radio-Button/Grouping.md index cf56dfc23c..e536aa0f98 100644 --- a/MAUI/Radio-Button/Grouping.md +++ b/MAUI/Radio-Button/Grouping.md @@ -5,14 +5,14 @@ description: Learn about grouping support in Syncfusion® .NET MAUI Radio Button platform: MAUI control: SfRadioButton documentation: UG -keywords : .NET MAUI Radio Button, MAUI Radio Button, MAUI Radio Button Group, MAUI Radio Button Grouping, MAUI Radio Group. +keywords : .net maui radio button, maui radio button, maui radio button group, maui radio button grouping, maui radio group. --- # Grouping in .NET MAUI Radio Button (SfRadioButton) -## Group Key +## GroupKey -The [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) in [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) allows you to group a set of radio buttons present inside any layout. By grouping this way, you can select only one radio button per [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) at a time. +The [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) in [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) allows you to group a set of Radio Buttons present inside any layout. By grouping this way, you can select only one Radio Button per [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_GroupKey) at a time. * [CheckedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedItem) - Gets the current checked item from the .NET MAUI Radio Button group. @@ -55,18 +55,18 @@ The [GroupKey](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRad {% endhighlight %} {% endtabs %} -![GroupKey support for SfRadioButton](Images/Grouping/groupkey.png) +![GroupKey](Images/Grouping/groupkey.png) ### CheckedChanged event The [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedChanged) event of [SfRadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) occurs when a checked item is changed. The argument contains the following information: -* [PreviousItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_PreviousItem) - Gets the previously checked radio button from the group. -* [CurrentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_CurrentItem) - Gets the currently checked radio button from the group. +* [PreviousItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_PreviousItem) - Gets the previously checked Radio Button from the group. +* [CurrentItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.CheckedChangedEventArgs.html#Syncfusion_Maui_Buttons_CheckedChangedEventArgs_CurrentItem) - Gets the currently checked Radio Button from the group. ## .NET MAUI Radio Group -[SfRadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) is a container that contains a set of radio buttons. When you select a radio button in a .NET MAUI Radio Button group, all other items will be automatically deselected. At any given time, you can only select one radio button from the same .NET MAUI Radio Button group. It also includes the [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedChanged) event and the [CheckedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedItem) property. +[SfRadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) is a container that contains a set of Radio Buttons. When you select a Radio Button in a .NET MAUI Radio Button group, all other items will be automatically deselected. At any given time, you can only select one Radio Button from the same .NET MAUI Radio Button group. It also includes the [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedChanged) event and the [CheckedItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_CheckedItem) property. {% tabs %} {% highlight xaml %} @@ -93,7 +93,7 @@ The [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons {% endhighlight %} {% endtabs %} -![.NET MAUI RadioGroup Image](Images/Grouping/radiogroup.png) +![.NET MAUI Radio Group](Images/Grouping/radiogroup.png) ### Orientation in .NET MAUI Radio Group @@ -124,13 +124,13 @@ The [CheckedChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons {% endhighlight %} {% endtabs %} -![.NET MAUI RadioGroup horizontal orientation](Images/Grouping/radiogrouporientation.png) +![.NET MAUI Radio Group horizontal orientation](Images/Grouping/radiogrouporientation.png) -## Selected Value +## SelectedValue -The [.NET MAUI RadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) class defines a [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property, of type `object`. This property represents the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of the checked [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a defined group. +The [.NET MAUI Radio Group](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) class defines a [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property, of type `object`. This property represents the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of the checked [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a defined group. -When any [.NET MAUI RadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a [.NET MAUI RadioGroup](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) is checked, the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of that RadioButton is assigned to the [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property of the RadioGroup. The `SelectedValue` is dynamically updated whenever a different RadioButton within the RadioGroup is checked. +When any [.NET MAUI Radio Button](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) within a [.NET MAUI Radio Group](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html) is checked, the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html#Syncfusion_Maui_Buttons_SfRadioButton_Value) of that Radio Button is assigned to the [SelectedValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioGroup.html#Syncfusion_Maui_Buttons_SfRadioGroup_SelectedValue) property of the Radio Group. The `SelectedValue` is dynamically updated whenever a different Radio Button within the Radio Group is checked. {% tabs %} {% highlight xaml %} @@ -170,4 +170,4 @@ radioGroup.Children.Add(creditCardRadioButton); {% endhighlight %} {% endtabs %} -![.NET MAUI Radio Button SelectedValue](Images/Grouping/selectedvalue.png) +![SelectedValue](Images/Grouping/selectedvalue.png) diff --git a/MAUI/Radio-Button/Overview.md b/MAUI/Radio-Button/Overview.md index d14496a6e1..44f7f7bfd7 100644 --- a/MAUI/Radio-Button/Overview.md +++ b/MAUI/Radio-Button/Overview.md @@ -2,17 +2,17 @@ layout: post title: Overview | .NET MAUI Radio Button | Syncfusion® platform: .NET MAUI -description: Learn about the overall key features in Essential Studio® for .NET MAUI SfRadioButton Control, its elements, and more. +description: Learn about the overall key features in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control, its elements, and more. control: SfRadioButton --- # .NET MAUI Radio Button (SfRadioButton) Overview -The .NET MAUI Radio Button is a selection control that allows users to select one option from a set. The two states of the radio button are checked and unchecked. +The .NET MAUI Radio Button is a selection control that allows users to select one option from a set. The two states of the Radio Button are checked and unchecked. ## Key features * Allow users to select and clear the control by tapping. -* Supports radio button color and label text customization. +* Supports Radio Button color and label text customization. -![.NET MAUI Radio Button Image](Images/Getting-Started/radiobuttonoverview.png) +![.NET MAUI Radio Button](Images/Getting-Started/radiobuttonoverview.png) diff --git a/MAUI/Radio-Button/Visual-Customization.md b/MAUI/Radio-Button/Visual-Customization.md index 18b6d9f5d9..a9552f0a2a 100644 --- a/MAUI/Radio-Button/Visual-Customization.md +++ b/MAUI/Radio-Button/Visual-Customization.md @@ -2,16 +2,16 @@ layout: post title: Visual Customization in .NET MAUI Radio Button Control | Syncfusion® description: Learn here all about Visual Customization support in Syncfusion® .NET MAUI Radio Button (SfRadioButton) control and more. -platform: maui +platform: MAUI control: SfRadioButton -documentation: ug +documentation: UG --- # Visual Customization in .NET MAUI Radio Button (SfRadioButton) -## Customizing a State Color +## Customizing a state color -The default state colors can be customized using the `CheckedColor` and `UncheckedColor` properties. The checked state color is updated to the specified `CheckedColor` value when the state changes to checked. Similarly, the unchecked state color is updated to the specified `UncheckedColor` value when the state changes to unchecked. +The default state colors can be customized using the `CheckedColor` and `UncheckedColor` properties. The checked state color is updated to the specified `CheckedColor` value when the state changes to checked. Similarly, the unchecked state color is updated to the specified `UncheckedColor` value when the state changes to unchecked. {% tabs %} {% highlight xaml %} @@ -41,7 +41,7 @@ The default state colors can be customized using the `CheckedColor` and `Uncheck ![CheckedColor and UncheckedColor in Radio Button](Images/VisualCustomization/statecolor.png) -## Stroke Thickness +## StrokeThickness The stroke thickness of the circle in the Radio Button control can be customized using the [`StrokeThickness`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_StrokeThickness) property. @@ -71,11 +71,11 @@ The stroke thickness of the circle in the Radio Button control can be customized {% endhighlight %} {% endtabs %} -![.NET MAUI Radio Button StrokeThickness](Images/VisualCustomization/radiostrokethickness.png) +![StrokeThickness](Images/VisualCustomization/radiostrokethickness.png) N> StrokeThickness support has not been provided for Android Platform. -## Setting a Caption Text Appearance +## Setting a caption text appearance You can customize the display text appearance of the [`SfRadioButton`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control using the following properties: @@ -114,7 +114,7 @@ You can customize the display text appearance of the [`SfRadioButton`](https://h {% endhighlight %} {% endtabs %} -![.NET MAUI Radio Button TextAppereance](Images/VisualCustomization/textappearance.png) +![Text appereance](Images/VisualCustomization/textappearance.png) ## LineBreakMode @@ -130,7 +130,7 @@ The [`LineBreakMode`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Button {% tabs %} {% highlight xaml %} - 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 Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons NuGet package 1. In **Solution Explorer**, right-click the project and select **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) and install the latest version. 3. Ensure all 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 in .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion® core. @@ -122,21 +122,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons 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.Buttons` to install the Syncfusion® .NET MAUI Buttons package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. @@ -220,19 +220,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution,** Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI Buttons NuGet Package +## Step 2: Install the Syncfusion® MAUI Buttons NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons/) 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 +## 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. @@ -308,9 +308,9 @@ namespace SwitchGettingStarted {% endtabcontent %} {% endtabcontents %} -## Performing an Action Based on State +## Performing an action based on state -You can switch between states in the .NET MAUI Switch control. When the state changes,the [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) and [StateChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html) events are triggered. These events allow you to perform specific actions depending on the current state of the switch. The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) event also allows you to cancel the transition to a new state if needed. +You can switch between states in the .NET MAUI Switch control. When the state changes,the [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) and [StateChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs.html) events are triggered. These events allow you to perform specific actions depending on the current state of the Switch. The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) event also allows you to cancel the transition to a new state if needed. The following code example displays a message box when the .NET MAUI Switch is switched to the off state after the work is completed. @@ -347,4 +347,4 @@ private void SfSwitch_StateChanged(object sender, SwitchStateChangedEventArgs e) N> Find the complete getting started sample of the .NET MAUI Switch from this [link](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-SfSwitch). -N> Refer to our [.NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch) feature tour page for its groundbreaking feature representations. Explore our [.NET MAUI Switch Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/Switch) for rendering the Switch in .NET MAUI. \ No newline at end of file +N> Refer to our [.NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch) feature tour page for its groundbreaking feature representations. Explore our [.NET MAUI Switch example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Buttons/SampleBrowser.Maui.Buttons/Samples/Switch) for rendering the .NET MAUI Switch. \ No newline at end of file diff --git a/MAUI/Switch/Overview.md b/MAUI/Switch/Overview.md index 8196e5a248..7beb5c1bff 100644 --- a/MAUI/Switch/Overview.md +++ b/MAUI/Switch/Overview.md @@ -5,7 +5,7 @@ description: Learn about introduction of the Syncfusion® .NET MAUI Switch (SfSw platform: MAUI control: SfSwitch documentation: UG -keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch control, MAUI Switch control. +keywords : .net maui switch, maui switch, .net maui switch control, maui switch control. --- # .NET MAUI Switch (SfSwitch) Overview @@ -19,4 +19,4 @@ The .NET MAUI Switch control provides an efficient way to toggle between states * Visual state manager powers the control. * Customize the path inside the thumb. -![Overview image of SfSwitch in .NET MAUI](Images/overview/net-maui-overview.png) \ No newline at end of file +![.NET MAUI Switch](Images/overview/net-maui-overview.png) \ No newline at end of file diff --git a/MAUI/Switch/Right-To-Left.md b/MAUI/Switch/Right-To-Left.md index ca224a122b..19fa592942 100644 --- a/MAUI/Switch/Right-To-Left.md +++ b/MAUI/Switch/Right-To-Left.md @@ -5,7 +5,7 @@ description: Learn all about Right To Left support in the Syncfusion®.NET MAUI platform: MAUI control: SfSwitch documentation: UG -keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch RTL, MAUI Switch Flow Direction. +keywords : .net maui switch, maui switch, .net mauu switch rtl, maui switch flow direction. --- # Right To Left in .NET MAUI Switch (SfSwitch) @@ -30,4 +30,4 @@ this.Content = sfSwitch; {% endtabs %} -![SfSwitch with RTL flow direction](images/RTL/RTL_Switch.png) \ No newline at end of file +![RTL flow direction](images/RTL/RTL_Switch.png) \ No newline at end of file diff --git a/MAUI/Switch/Visual-State-Manager.md b/MAUI/Switch/Visual-State-Manager.md index 2a59f032fb..ef2eeddaf8 100644 --- a/MAUI/Switch/Visual-State-Manager.md +++ b/MAUI/Switch/Visual-State-Manager.md @@ -1,11 +1,11 @@ --- layout: post -title: Visual state manager in .NET MAUI Switch (SfSwitch) | Syncfusion® +title: Visual State Manager in .NET MAUI Switch (SfSwitch) | Syncfusion® description: Learn about handling the visual state manager in the Syncfusion® .NET MAUI Switch (SfSwitch) control, and more. platform: MAUI control: SfSwitch documentation: UG -keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch Visual States, MAUI Switch Visuals. +keywords : .net maui switch, maui switch, .net maui switch visual states, maui switch visuals. --- # Visual State Manager in .NET MAUI Switch (SfSwitch) diff --git a/MAUI/Switch/customization.md b/MAUI/Switch/customization.md index e17d976d73..affe689333 100644 --- a/MAUI/Switch/customization.md +++ b/MAUI/Switch/customization.md @@ -5,7 +5,7 @@ description: Learn about the customization support in the Syncfusion® .NET MAUI platform: MAUI control: SfSwitch documentation: UG -keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch Customize, MAUI Switch Customize, MAUI Switch Color, MAUI Switch Size, MAUI Switch Icon. +keywords : .net maui switch, maui switch, .net maui switch customize, maui switch customize, maui switch color, maui switch size, maui switch icon. --- # Customization in .NET MAUI Switch (SfSwitch) @@ -118,7 +118,7 @@ this.Content = sfSwitch; {% endtabs %} -![switch control with visual state customization](images/customization/Colors.png) +![Visual state customization](images/customization/Colors.png) ## Sizing @@ -225,9 +225,9 @@ this.Content = sfSwitch; {% endtabs %} -![switch conrol with sizing](images/customization/Sizing.png) +![Sizing](images/customization/Sizing.png) -## Custom Path +## CustomPath In the .NET MAUI Switch control, customize the thumb's icon using the following properties: @@ -343,7 +343,7 @@ this.Content = sfSwitch; {% endtabs %} -![Switch control with custom path](images/Path/Path.gif) +![CustomPath](images/Path/Path.gif) N> Keep the size of the [`CustomPath`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html#Syncfusion_Maui_Buttons_SwitchSettings_CustomPath) within the dimensions of the thumb. diff --git a/MAUI/Switch/states.md b/MAUI/Switch/states.md index 88a9dd9b50..90a5d57662 100644 --- a/MAUI/Switch/states.md +++ b/MAUI/Switch/states.md @@ -1,18 +1,18 @@ --- layout: post -title: States in .NET MAUI Switch control | Syncfusion® +title: States in .NET MAUI Switch Control | Syncfusion® description: Learn all about the state support in the Syncfusion® .NET MAUI Switch (SfSwitch) control, its elements, and more. platform: MAUI control: SfSwitch documentation: UG -keywords : .NET MAUI Switch, MAUI Switch, .NET MAUI Switch States, MAUI Switch State. +keywords : .net maui switch, maui switch, .net maui switch states, maui switch state. --- # States in .NET MAUI Switch (SfSwitch) The .NET MAUI Switch allows you to configure various states as explained in the following sections. -## On State +## On state You can switch to the "On" state by tapping the .NET MAUI Switch button or by setting a value, as demonstrated in the following code example. @@ -34,9 +34,9 @@ this.Content = sfSwitch; {% endtabs %} -![.NET MAUI Switch control is displaying on state.](images/States/net-maui-switch-state-on.png) +![On state.](images/States/net-maui-switch-state-on.png) -## Off State +## Off state This is the default state. You can switch to the "Off" state by tapping the .NET MAUI Switch button or by defining it, as demonstrated in the following code example. @@ -58,9 +58,9 @@ this.Content = sfSwitch; {% endtabs %} -![.NET MAUI Switch control displaying off state.](images/States/net-maui-switch-state-off.png) +![Off state.](images/States/net-maui-switch-state-off.png) -## Indeterminate State +## Indeterminate state The indeterminate state can be enabled by using the [AllowIndeterminateState](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_AllowIndeterminateState) property when you need to display the work progress. The following code example demonstrates how to load the .NET MAUI Switch in an Indeterminate state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to null. @@ -84,11 +84,11 @@ sfSwitch.AllowIndeterminateState = true; {% endtabs %} -![.NET MAUI Switch conrol is displaying indeterminate state.](images/States/net-maui-switch-indeterminate.png) +![Indeterminate state.](images/States/net-maui-switch-indeterminate.png) N> By default, the switch control has only two states: on and off. -## Disabled On +## Disabled On state You can switch to the disabled "On" state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to true and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property to false. @@ -111,9 +111,9 @@ this.Content = sfSwitch; {% endtabs %} -![.NET MAUI Switch control displaying disabled on state.](images/States/net-maui-switch-disabled-on.png) +![Disabled On state.](images/States/net-maui-switch-disabled-on.png) -## Disabled Off +## Disabled Off state You can switch to the disabled "Off" state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property to false and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property to false. @@ -136,9 +136,9 @@ this.Content = sfSwitch; {% endtabs %} -![.NET MAUI Switch control displaying disabled off state.](images/States/net-maui-switch-disabled-off.png) +![Disabled off state.](images/States/net-maui-switch-disabled-off.png) -## Disabled Indeterminate +## Disabled indeterminate state The disabled indeterminate state can be enabled when you need to display the work progress. The below code example demonstrates loading the switch in a disabled indeterminate state by setting the [IsOn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsOn) property value to null and the [IsEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html#Syncfusion_Maui_Buttons_SfSwitch_IsEnabled) property to false. @@ -162,4 +162,4 @@ this.Content = sfSwitch; {% endtabs %} -![.NET MAUI Switch control displaying disabled indeterminate state.](images/States/net-maui-switch-disabled-indeterminate.png) +![Disabled indeterminate state.](images/States/net-maui-switch-disabled-indeterminate.png) diff --git a/MAUI/TabView/Events.md b/MAUI/TabView/Events.md index a98b78306c..e19ef92f57 100644 --- a/MAUI/TabView/Events.md +++ b/MAUI/TabView/Events.md @@ -7,7 +7,7 @@ control: SfTabView documentation: UG --- -# Events in .NET MAUI Tab View +# Events in .NET MAUI Tab View This section provides information about the events available in the .NET MAUI Tab View control. @@ -109,4 +109,4 @@ private void TabView_SelectionChanged(object sender, TabSelectionChangedEventArg ## See also -[How to convert events into commands in .NET MAUI TabView?](https://support.syncfusion.com/kb/article/16790/how-to-convert-events-into-commands-in-net-maui-tabview) \ No newline at end of file +[How to convert events into commands in .NET MAUI Tab View?](https://support.syncfusion.com/kb/article/16790/how-to-convert-events-into-commands-in-net-maui-tabview) \ No newline at end of file diff --git a/MAUI/TabView/Getting-Started.md b/MAUI/TabView/Getting-Started.md index e36ff5bea9..2547e38597 100644 --- a/MAUI/TabView/Getting-Started.md +++ b/MAUI/TabView/Getting-Started.md @@ -1,9 +1,9 @@ --- layout: post -title: Getting started with .NET MAUI Tab View (SfTabView) | Syncfusion® +title: Getting Started with .NET MAUI Tab View (SfTabView) | Syncfusion® description: Learn all about getting started with the Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements, and more. platform: MAUI -control: Tab View +control: SfTabView documentation: UG --- @@ -27,19 +27,19 @@ 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.3 or later). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New > Project** and select the **.NET MAUI App** template. 2. Name the project and choose a location. Then, click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI TabView NuGet Package +## Step 2: Install the Syncfusion® MAUI Tab View NuGet package 1. In **Solution Explorer**, right-click the project and select **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.TabView](https://www.nuget.org/packages/Syncfusion.Maui.TabView/) 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. @@ -73,9 +73,9 @@ namespace TabViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Tab View +## Step 4: Add a basic Tab View -1. To initialize the control, import the TabView namespace into your code. +1. To initialize the control, import the Tab View namespace into your code. 2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). @@ -125,21 +125,21 @@ Before proceeding, ensure the following are set up: 2. Set up a .NET MAUI environment with Visual Studio Code. 3. Ensure that the .NET MAUI extension is installed and configured as described [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Open the command palette by pressing `Ctrl+Shift+P` and type **.NET:New Project** and enter. 2. Choose the **.NET MAUI App** template. 3. Select the project location, type the project name and press **Enter**. 4. Then choose **Create project**. -## Step 2: Install the Syncfusion® MAUI TabView NuGet Package +## Step 2: Install the Syncfusion® MAUI Tab View 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.TabView` to install the Syncfusion® .NET MAUI TabView package. +3. Run the command `dotnet add package Syncfusion.Maui.TabView` to install the Syncfusion® .NET MAUI Tab View package. 4. To ensure all dependencies are installed, run `dotnet restore`. -## 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. @@ -173,9 +173,9 @@ namespace TabViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Tab View +## Step 4: Add a basic Tab View -1. To initialize the control, import the TabView namespace into your code. +1. To initialize the control, import the Tab View namespace into your code. 2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). @@ -226,19 +226,19 @@ Before proceeding, ensure the following are set up: 2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. 3. Make sure the MAUI workloads are installed and configured as described [here](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start). -## Step 1: Create a new .NET MAUI Project +## Step 1: Create a new .NET MAUI project 1. Go to **File > New Solution**, Select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® MAUI TabView NuGet Package +## Step 2: Install the Syncfusion® MAUI Tab View NuGet package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. 2. Search for [Syncfusion.Maui.TabView](https://www.nuget.org/packages/Syncfusion.Maui.TabView/) 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 +## 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. @@ -272,9 +272,9 @@ namespace TabViewMauiSample {% endhighlight %} -## Step 4: Add a Basic Tab View +## Step 4: Add a basic Tab View -1. To initialize the control, import the TabView namespace into your code. +1. To initialize the control, import the Tab View namespace into your code. 2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). @@ -316,7 +316,7 @@ namespace TabViewGettingStarted {% endtabcontent %} {% endtabcontents %} -## Populate Tab Items in .NET MAUI Tab View +## Populate tab items in .NET MAUI Tab View Tab items can be added to the control using the [Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_Items) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html). @@ -591,7 +591,7 @@ public partial class MainPage : ContentPage {% endtabs %} -### Header Item Template +### HeaderItemTemplate By defining the `HeaderItemTemplate` of the `SfTabView`, a custom user interface(UI) can be achieved to display the tab header data items. @@ -640,7 +640,7 @@ public partial class MainPage : ContentPage {% endtabs %} -### Content Item Template +### ContentItemTemplate By defining the `ContentItemTemplate` of the `SfTabView`, a custom user interface(UI) can be achieved to display the tab content data items. @@ -702,18 +702,18 @@ public partial class MainPage : ContentPage ![Item template in .NET MAUI Tab View.](images/net-maui-tab-view-item-template.png) -N> You can refer to our [.NET MAUI Tab View](https://www.syncfusion.com/maui-controls/maui-tab-view) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Tab View Example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/TabView) that shows you how to render the Tab View in .NET MAUI. +N> You can refer to our [.NET MAUI Tab View](https://www.syncfusion.com/maui-controls/maui-tab-view) feature tour page for its groundbreaking feature representations. You can also explore our [.NET MAUI Tab View example](https://github.com/syncfusion/maui-demos/tree/master/MAUI/TabView) that shows you how to render the .NET MAUI Tab View. ## See also -[How to load content page to tab page in .NET MAUI Tab view?](https://support.syncfusion.com/kb/article/11416/how-to-load-content-page-to-tab-page-in-net-maui-tab-view) +[How to load content page to tab page in .NET MAUI Tab View?](https://support.syncfusion.com/kb/article/11416/how-to-load-content-page-to-tab-page-in-net-maui-tab-view) -[How to Load Different Content Page as Tab items content in .NET MAUI TabView?](https://support.syncfusion.com/kb/article/13619/how-to-load-different-content-page-as-tab-items-content-in-net-maui-tabview) +[How to Load Different Content Page as tab items content in .NET MAUI Tab View?](https://support.syncfusion.com/kb/article/13619/how-to-load-different-content-page-as-tab-items-content-in-net-maui-tabview) [How to set the BindingContext for .NET MAUI TabItem using various pages?](https://support.syncfusion.com/kb/article/14410/how-to-set-the-bindingcontext-for-net-maui-tabitem-using-various-pages) -[How to integrate .NET MAUI TabView with Android native embedding?](https://support.syncfusion.com/kb/article/16758/how-to-integrate-net-maui-tabview-with-android-native-embedding) +[How to integrate .NET MAUI Tab View with Android native embedding?](https://support.syncfusion.com/kb/article/16758/how-to-integrate-net-maui-tabview-with-android-native-embedding) -[How to integrate .NET MAUI TabView with iOS native embedding?](https://support.syncfusion.com/kb/article/16787/how-to-integrate-net-maui-tabview-with-ios-native-embedding) +[How to integrate .NET MAUI Tab View with iOS native embedding?](https://support.syncfusion.com/kb/article/16787/how-to-integrate-net-maui-tabview-with-ios-native-embedding) -[How to customize .NET MAUI TabView header with navigation arrows?](https://support.syncfusion.com/kb/article/17139/how-to-customize-net-maui-tabview-header-with-navigation-arrows) \ No newline at end of file +[How to customize .NET MAUI Tab View header with navigation arrows?](https://support.syncfusion.com/kb/article/17139/how-to-customize-net-maui-tabview-header-with-navigation-arrows) \ No newline at end of file diff --git a/MAUI/TabView/Header-Display-Mode.md b/MAUI/TabView/Header-Display-Mode.md index 379238c24d..0c3702c001 100644 --- a/MAUI/TabView/Header-Display-Mode.md +++ b/MAUI/TabView/Header-Display-Mode.md @@ -1,6 +1,6 @@ --- layout: post -title: Header display Mode in .NET MAUI Tab View control | Syncfusion® +title: Header Display Mode in .NET MAUI Tab View control | Syncfusion® description: Learn all about header display mode support in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. platform: MAUI control: SfTabView @@ -15,7 +15,7 @@ By default, the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfus * Image * Text -![Image for HeaderDisplayMode](images/Header-Display-Mode.png) +![HeaderDisplayMode](images/Header-Display-Mode.png) The Tab View can be modified by setting the [HeaderDisplayMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderDisplayMode) property of the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.html). diff --git a/MAUI/TabView/How-To.md b/MAUI/TabView/How-To.md index bc756a35d9..8381314f41 100644 --- a/MAUI/TabView/How-To.md +++ b/MAUI/TabView/How-To.md @@ -9,7 +9,7 @@ documentation: UG # How to Select a Tab Item Programmatically? -## Programmatically Select the Tab Item +## Programmatically select the tab item You can use the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) property of SfTabView to programmatically select a tab item. Below is a code snippet demonstrating how to do this: @@ -26,7 +26,7 @@ You can use the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.M ![SelectedIndex in SfTabView](images/SelectedIndexTabView.png) -## Get the Selected Tab Item Using IsSelected +## Get the selected tab item using IsSelected property The `IsSelected` property indicates whether the tab item is active. This property can be used, as shown in the code snippet below, to check and perform actions on the selected tab item. diff --git a/MAUI/TabView/Migration.md b/MAUI/TabView/Migration.md index 9a7c6edf06..971ccf1ba0 100644 --- a/MAUI/TabView/Migration.md +++ b/MAUI/TabView/Migration.md @@ -1,7 +1,7 @@ --- layout: post title: Migrating from Xamarin SfTabView to .NET MAUI SfTabView | Syncfusion® -description: Learn all about migrating from Syncfusion® Xamarin TabView to Syncfusion® .NET MAUI TabView control and more. +description: Learn all about migrating from Syncfusion® Xamarin Tab View to Syncfusion® .NET MAUI Tab View control and more. platform: MAUI control: SfTabView documentation: UG diff --git a/MAUI/TabView/Nested-Tabs.md b/MAUI/TabView/Nested-Tabs.md index cfc46cf57e..0095714845 100644 --- a/MAUI/TabView/Nested-Tabs.md +++ b/MAUI/TabView/Nested-Tabs.md @@ -1,17 +1,17 @@ --- layout: post -title: NestedTab in .NET MAUI Tab View (SfTabView) control | Syncfusion® -description: Learn about the nested tab support in Syncfusion® .NET MAUI Tab View (SfTabView) control and code sample. +title: NestedTab in .NET MAUI Tab View (SfTabView) Control | Syncfusion® +description: Learn about the nested tab support in Syncfusion® .NET MAUI Tab View (SfTabView) control and more. platform: MAUI control: SfTabView documentation: UG --- -# Nested tab in .NET MAUI Tab View (SfTabView) +# Nested Tab in .NET MAUI Tab View (SfTabView) You can configure nested tab items in the Tab View using the [Items](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_Items) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html). This property holds the nested collection of [SfTabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html) by [TabItemsCollection](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabItemCollection.html). -To get start quickly with Nested Tab View in .NET MAUI TabView, you can check on this video: +To get start quickly with Nested Tab View in .NET MAUI Tab View, you can check on this video: {% youtube "https://www.youtube.com/watch?v=batfDt1S8Mc&ab_channel=Syncfusion%2CInc" %} @@ -193,7 +193,7 @@ public partial class MainPage : ContentPage N> View the [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/NestedTabViewSample) on GitHub. -## Enable virtualization +## EnableVirtualization Enabling virtualization improves the initial loading performance of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html). To activate this feature, set the `EnableVirtualization` property to `true`. diff --git a/MAUI/TabView/Overview.md b/MAUI/TabView/Overview.md index fcfd6135fd..28b39285eb 100644 --- a/MAUI/TabView/Overview.md +++ b/MAUI/TabView/Overview.md @@ -1,9 +1,9 @@ --- layout: post -title: About .NET MAUI Tab View (SfTabView) control | Syncfusion® +title: About .NET MAUI Tab View (SfTabView) Control | Syncfusion® description: Learn about the introduction of the Syncfusion® .NET MAUI Tab View (SfTabView) control, its elements, and more. platform: MAUI -control: Tab View +control: SfTabView documentation: UG --- @@ -23,10 +23,10 @@ The advanced .NET Multi-platform App UI (MAUI) Tab View provides a simple and in ## Usage -* The .NET MAUI TabView can be used to optimize screen space usage when the application requires complex and extensive layouts. +* The .NET MAUI Tab View can be used to optimize screen space usage when the application requires complex and extensive layouts. -* The .NET MAUI TabView contains a set of tab items that share the same space. +* The .NET MAUI Tab View contains a set of tab items that share the same space. * At any given time, only one .NET MAUI tab item will be visible and accessible to users. Users must tap the tab of the hidden tab item to make it visible on the screen. -![TabViewImage MAUI](images/TabView.png) \ No newline at end of file +![.NET MAUI Tab View](images/TabView.png) \ No newline at end of file diff --git a/MAUI/TabView/Selection-Indicator-Customization.md b/MAUI/TabView/Selection-Indicator-Customization.md index 858388e782..d3fd548683 100644 --- a/MAUI/TabView/Selection-Indicator-Customization.md +++ b/MAUI/TabView/Selection-Indicator-Customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize the indicator in .NET MAUI Tab View (SfTabView) | Syncfusion® +title: Customize the Indicator in .NET MAUI Tab View (SfTabView) | Syncfusion® description: Learn all about selection indicator customization support in the Syncfusion® .NET MAUI Tab View (SfTabView) control and more. platform: MAUI control: SfTabView @@ -9,7 +9,7 @@ documentation: UG # Customize the Selection Indicator in .NET MAUI Tab View (SfTabView) -## Placement Options +## Placement options The .NET MAUI Tab View provides three options for determining how the selection indicator aligns relative to the tab header item. These options are top, bottom, and fill. This can be configured by setting the [IndicatorPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorPlacement) property of SfTabView. @@ -29,7 +29,7 @@ The indicator will be placed at the top of the selected tab. {% endtabs %} -![Tab Image Position Top.](images/Selection-Indicator-placement-Top.png) +![Top](images/Selection-Indicator-placement-Top.png) ### Bottom @@ -47,7 +47,7 @@ The indicator will be placed at the bottom of the selected tab. {% endtabs %} -![Tab Image Position Bottom.](images/Selection-Indicator-placement-Bottom.png) +![Bottom](images/Selection-Indicator-placement-Bottom.png) ### Fill @@ -65,13 +65,13 @@ The indicator will fill the selected tab. {% endtabs %} -![Tab Image Position Fill.](images/Selection-Indicator-placement-Fill.png) +![Fill](images/Selection-Indicator-placement-Fill.png) -## Background Customization +## Background customization The background of the indicator can be customized using the [IndicatorBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorBackground) property of SfTabView. -### Solid Color +### Solid color The SolidColorBrush class defines the color property of [IndicatorBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorBackground), representing the selection indicator background's color. @@ -87,9 +87,9 @@ The SolidColorBrush class defines the color property of [IndicatorBackground](ht {% endtabs %} -![Selection Indicator Background.](images/Selection-Indicator-background.png) +![IndicatorBackground.](images/Selection-Indicator-background.png) -### Gradient Color +### Gradient color The background can be customized with a linear gradient and radial gradient as like below example. @@ -129,11 +129,11 @@ tabView.IndicatorBackground = graBrush; {% endhighlight %} {% endtabs %} -![Selection Indicator Gradient](images/Selection-Indicator-gradient-background.png) +![Gradient](images/Selection-Indicator-gradient-background.png) N> View the complete [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) on GitHub. -## Indicator Width Mode +## IndicatorWidthMode The [IndicatorWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorWidthMode) property allows customization of the width of the indicator. By default, the `IndicatorWidthMode` property is set to [Fit](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.IndicatorWidthMode.html#Syncfusion_Maui_TabView_IndicatorWidthMode_Fit), which adjusts the indicator width to fit the content of the header item. You can change the width size based on the header item by setting the `IndicatorWidthMode` property to [Stretch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.IndicatorWidthMode.html#Syncfusion_Maui_TabView_IndicatorWidthMode_Stretch). @@ -149,7 +149,7 @@ The [IndicatorWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Tab {% endtabs %} -![Selection Indicator Background.](images/IndicatorWidthMode_Fit.png) +![IndicatorWidthMode fit](images/IndicatorWidthMode_Fit.png) {% tabs %} @@ -163,9 +163,9 @@ The [IndicatorWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Tab {% endtabs %} -![Selection Indicator Background.](images/IndicatorWidthMode_Stretch.png) +![IndicatorWidthMode stretch](images/IndicatorWidthMode_Stretch.png) -## Indicator's Corner Radius +## IndicatorCornerRadius You can customize the corner radius of the selection indicator using the [IndicatorCornerRadius](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorCornerRadius) property in the Tab View. @@ -181,9 +181,9 @@ You can customize the corner radius of the selection indicator using the [Indica {% endtabs %} -![Selection Indicator Corner Radius.](images/IndicatorCornerRadius.png) +![IndicatorCornerRadius](images/IndicatorCornerRadius.png) -## Indicator's Stroke Thickness +## IndicatorStrokeThickness You can customize the stroke thickness of the selection indicator using the [IndicatorStrokeThickness](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorStrokeThickness) property in the Tab View. @@ -200,4 +200,4 @@ You can customize the stroke thickness of the selection indicator using the [Ind {% endtabs %} -![Selection Indicator Stroke Thickness](images\IndicatorStrokeThickness.png) \ No newline at end of file +![IndicatorStrokeThickness](images\IndicatorStrokeThickness.png) \ No newline at end of file diff --git a/MAUI/TabView/Swiping.md b/MAUI/TabView/Swiping.md index 8fe2c2da28..d2fb7c9a55 100644 --- a/MAUI/TabView/Swiping.md +++ b/MAUI/TabView/Swiping.md @@ -23,9 +23,8 @@ The `EnableSwiping` property of `SfTabView` allows users to switch between tab c {% endtabs %} -![TabView EnableSwiping](images/tabview-swiping.gif) +![EnableSwiping](images/tabview-swiping.gif) ### Limitations -* **Interference Between Child Controls and TabView Swiping:** When a child control within a TabView supports horizontal swiping or interaction (e.g., a horizontal ScrollView, a custom swipe-enabled control, or a carousel), it can interfere with the TabView's touch gesture. This may result in unintended behavior, such as the TabView swiping when the child control is meant to handle the gesture, or vice versa. The overlapping gestures can cause confusion and disrupt the expected user experience, leading to a less intuitive interface. - +* **Interference between child controls and Tab View swiping:** When a child control within a Tab View supports horizontal swiping or interaction (e.g., a horizontal ScrollView, a custom swipe-enabled control, or a carousel), it can interfere with the Tab View's touch gesture. This may result in unintended behavior, such as the Tab View swiping when the child control is meant to handle the gesture, or vice versa. The overlapping gestures can cause confusion and disrupt the expected user experience, leading to a less intuitive interface. diff --git a/MAUI/TabView/Tab-Bar-Customization.md b/MAUI/TabView/Tab-Bar-Customization.md index 084c095234..f1161015fa 100644 --- a/MAUI/TabView/Tab-Bar-Customization.md +++ b/MAUI/TabView/Tab-Bar-Customization.md @@ -9,7 +9,7 @@ documentation: UG # Customize the Tab Bar in .NET MAUI Tab View (SfTabView) -## Tab Width Options +## Tab width options The .NET MAUI Tab View provides two modes that determines how the width of the tab is calculated on the tab bar while it gets populated. The options are [Default](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_Default) and [SizeToContent](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html#Syncfusion_Maui_TabView_TabWidthMode_SizeToContent). These can be achieved using the [TabWidthMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.TabWidthMode.html) property. @@ -31,9 +31,9 @@ N> This mode is recommended when the tab count is not more than four. More tabs {% endtabs %} -![Tab Width Mode Default](images/Tab-Width-Mode-Default.png) +![TabWidthMode default](images/Tab-Width-Mode-Default.png) -### Based on the Text Size +### Based on the text size The width of a tab is set to fit the text or image that it contains by setting the `TabWidthMode` as `SizeToContent`. Scroll is enabled in this mode to access the items outside the visible area. @@ -49,9 +49,9 @@ The width of a tab is set to fit the text or image that it contains by setting t {% endtabs %} -![Tab Width Mode Size to Fit](images/Tab-Width-Mode-SizeToFit.png) +![TabWidthMode size to fit](images/Tab-Width-Mode-SizeToFit.png) -## Customize the Tab Bar Height +## Customize the TabBarHeight The height of the tab bar can be customized by setting the [TabBarHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarHeight) property. The default height is 48. @@ -69,7 +69,7 @@ N> It is recommended to set the `TabBarHeight` to 72 while displaying both the i {% endtabs %} -## Customize the Tab Header Text Alignment +## Customize the tab header text alignment The horizontal text alignment of the tab header can be customized by setting the [HeaderHorizontalTextAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_HeaderHorizontalTextAlignment) property. The default value is `Center`. This property accepts the following values: @@ -88,10 +88,10 @@ tabView.HeaderHorizontalTextAlignment = TextAlignment.Center; {% endhighlight %} {% endtabs %} -![Tab Header Text Alignment](images/HorizontalTextAlignmentCenter.png) +![Tab header text alignment](images/HorizontalTextAlignmentCenter.png) -## Tab Bar Placement Options +## TabBarPlacement options The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be achieved using the [TabBarPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarPlacement) property. @@ -111,7 +111,7 @@ The tab bar will be placed above the content region of the Tab View control. {% endtabs %} -![Tab Bar Placement Top](images/Tab-bar-Placement-Top.png) +![TabBarPlacement top](images/Tab-bar-Placement-Top.png) ### Bottom @@ -129,13 +129,13 @@ The tab bar will be placed below the content region of the Tab View control. {% endtabs %} -![Tab Bar Placement Bottom](images/Tab-bar-Placement-Bottom.png) +![TabBarPlacement bottom](images/Tab-bar-Placement-Bottom.png) -## Tab Bar Background Customization +## TabBarBackground customization The tab bar background can be customized using the [TabBarBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarBackground) property, which is of type `Brush`. -### Solid Color +### Solid color A solid color can be achieved by assigning the `SolidColorBrush` to the [TabBarBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarBackground), which represents the color of the tab bar background. @@ -151,9 +151,9 @@ A solid color can be achieved by assigning the `SolidColorBrush` to the [TabBarB {% endtabs %} -![Tab Bar Solid Color Bottom](images/TabBarSolidColor.png) +![Solid color](images/TabBarSolidColor.png) -### Gradient Color +### Gradient color The background can be customized with a linear gradient and radial gradient as like below example. @@ -194,6 +194,6 @@ tabView.TabBarBackground = graBrush; {% endhighlight %} {% endtabs %} -![Tab Bar Gradient Color Bottom](images/TabBarGradientColor.png) +![Gradient color](images/TabBarGradientColor.png) N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabBarCustomization) in GitHub. diff --git a/MAUI/TabView/Tab-Item-Customization.md b/MAUI/TabView/Tab-Item-Customization.md index 0827e6245d..74ea655426 100644 --- a/MAUI/TabView/Tab-Item-Customization.md +++ b/MAUI/TabView/Tab-Item-Customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Display Type in .NET MAUI Tab View (SfTabView) control | Syncfusion® +title: Display Type in .NET MAUI Tab View (SfTabView) Control | Syncfusion® description: Learn all about color and font customization in the Syncfusion® .NET MAUI Tab View (SfTabView) control. platform: MAUI control: SfTabView @@ -11,7 +11,7 @@ documentation: UG A tab item consists of various elements that can be customized in the .NET MAUI Tab View. -## Adding Image in Tab Item +## Adding image in tab item ### Header @@ -38,7 +38,7 @@ var tabItems = new TabItemCollection {% endtabs %} -![Tab Item Header](images/Tab-Width-Mode-Default.png) +![Header](images/Tab-Width-Mode-Default.png) ### ImageSource @@ -67,11 +67,11 @@ var tabItems = new TabItemCollection {% endtabs %} -![Tab Item ImageSource](images/Image-Position-Left.png) +![ImageSource](images/Image-Position-Left.png) ### Content -The assigned view will get displayed in the main area of the tab view. +The assigned view will get displayed in the main area of the Tab View. {% tabs %} @@ -104,9 +104,9 @@ The assigned view will get displayed in the main area of the tab view. {% endtabs %} -![Tab Item Content](images/TabItem_Content.png) +![Content](images/TabItem_Content.png) -## Image Position Options +## ImagePosition options The .NET MAUI Tab View provides four options determining how the image of the tab aligns relative to the text. The options are left, top, right and bottom. These can be achieved using the [ImagePosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImagePosition) property of [SfTabItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html). @@ -137,7 +137,7 @@ var tabItems = new TabItemCollection {% endtabs %} -![Image Position Top](images/Image-Position-Top.png) +![ImagePosition top](images/Image-Position-Top.png) ### Bottom @@ -164,7 +164,7 @@ var tabItems = new TabItemCollection {% endtabs %} -![Image Position Bottom](images/Image-Position-Bottom.png) +![ImagePosition bottom](images/Image-Position-Bottom.png) ### Left @@ -191,7 +191,7 @@ var tabItems = new TabItemCollection {% endtabs %} -![Image Position Left](images/Image-Position-Left.png) +![ImagePosition left](images/Image-Position-Left.png) ### Right @@ -218,9 +218,9 @@ var tabItems = new TabItemCollection {% endtabs %} -![Image Position Right](images/Image-Position-Right.png) +![ImagePosition right](images/Image-Position-Right.png) -## Image Text Spacing +## ImageTextSpacing The [ImageTextSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageTextSpacing) property in SfTabItem allows spacing between the image and the text of the tab item. @@ -245,9 +245,9 @@ var tabItems = new TabItemCollection {% endtabs %} -![Image Text Spacing](images/Image-Text-Spacing.png) +![ImageTextSpacing](images/Image-Text-Spacing.png) -## Text Color Customization +## TextColor customization The text color of the tab item displayed in the tab bar. @@ -272,9 +272,9 @@ var tabItems = new TabItemCollection {% endtabs %} -![Tab Image TextColor](images/TextColor.png) +![TextColor](images/TextColor.png) -## Font Customization +## Font customization This type of customization involves changes to some font elements. @@ -303,7 +303,7 @@ var tabItems = new TabItemCollection {% endtabs %} -![TabItem FontFamily](images/FontFamily.png) +![FontFamily](images/FontFamily.png) ### FontAttribute @@ -330,7 +330,7 @@ var tabItems = new TabItemCollection {% endtabs %} -![Tab Item FontAttribute](images/FontAttributes.png) +![FontAttribute](images/FontAttributes.png) ### FontSize @@ -357,13 +357,13 @@ var tabItems = new TabItemCollection {% endtabs %} -![Tab Item FontSize](images/FontSize.png) +![FontSize](images/FontSize.png) -## Badge Support +## Badge support In SfTabItem, badges notify users of new or unread messages, notifications, or the status of something. -### Badge Text +### BadgeText By using the [BadgeText](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_BadgeText) property in the SfTabItem, you can add text to badge view. @@ -388,7 +388,7 @@ var tabItems = new TabItemCollection {% endtabs %} -### Badge Settings +### BadgeSettings The [BadgeSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_BadgeSettings) property helps customize the basic look and feel of the badge view in the SfTabItem. @@ -443,11 +443,11 @@ tabView.Items = tabItems; {% endtabs %} -![Tabview BadgeSupport](images/TabItem_badge.png) +![BadgeSupport](images/TabItem_badge.png) N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree/main/TabViewCustomizationSample) in GitHub. -## Tab Header Padding +## TabHeaderPadding The [TabHeaderPadding](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabHeaderPadding) property in [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) allows for adding padding to the tab header. @@ -469,11 +469,11 @@ tabView.TabHeaderPadding = new Thickness(5, 10, 5, 10); {% endtabs %} -![Image Text Spacing](images/TabViewHeaderItem_Padding.png) +![TabHeaderPadding](images/TabViewHeaderItem_Padding.png) -## Scroll Buttons on Header +## Scroll buttons on header -Scroll buttons are used to navigate through the items in the header of the tab view by adjusting the [IsScrollButtonEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IsScrollButtonEnabled) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). This additionally indicates the presence of tabs beyond the currently visible area. +Scroll buttons are used to navigate through the items in the header of the Tab View by adjusting the [IsScrollButtonEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IsScrollButtonEnabled) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1). This additionally indicates the presence of tabs beyond the currently visible area. {% tabs %} @@ -490,9 +490,9 @@ tabView.IsScrollButtonEnabled = true; {% endtabs %} -![TabView Scroll Mode](images/TabViewScroll.gif) +![Scroll mode](images/TabViewScroll.gif) -### Scroll Button Customization +### Scroll button customization The [ScrollButtonBackground](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ScrollButtonBackground) and [ScrollButtonColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ScrollButtonColor) property of [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) allows customization of the background and foreground color of the scroll button. @@ -514,9 +514,9 @@ this.Content = stackLayout; {% endtabs %} -![ScrollButtonCustomization](images\ScrollButtonCustomization.png) +![Scroll button customization](images\ScrollButtonCustomization.png) -## Font Auto Scaling Enabled +## FontAutoScalingEnabled The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_FontAutoScalingEnabled) property automatically scales the tab header's font size based on the operating system's text size. The default value is `false`. @@ -535,7 +535,7 @@ tabView.FontAutoScalingEnabled = true; {% endtabs %} -## Content Transition Duration +## ContentTransitionDuration You can customize the animation duration when changing the [SelectedIndex](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_SelectedIndex) of the Tab View by setting the [ContentTransitionDuration](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_ContentTransitionDuration) property. @@ -556,9 +556,9 @@ tabView.ContentTransitionDuration = 1000; ![ContentTransitionDuration](images/ContentTransition.gif) -## Image Size +## ImageSize -You can customize the image size in the .NET MAUI TabView control by setting the [ImageSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSize) property. +You can customize the image size in the .NET MAUI Tab View control by setting the [ImageSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSize) property. {% tabs %} diff --git a/MAUI/TabView/Visual-State-Managers.md b/MAUI/TabView/Visual-State-Managers.md index da1da5a97b..805e058eed 100644 --- a/MAUI/TabView/Visual-State-Managers.md +++ b/MAUI/TabView/Visual-State-Managers.md @@ -280,4 +280,4 @@ N> View [sample](https://github.com/SyncfusionExamples/maui-tabview-samples/tree ## See also -[How to customize the text color of the header in .NET MAUI TabView?](https://support.syncfusion.com/kb/article/16788/how-to-customize-the-text-color-of-the-header-in-net-maui-tabview) \ No newline at end of file +[How to customize the text color of the header in .NET MAUI Tab View?](https://support.syncfusion.com/kb/article/16788/how-to-customize-the-text-color-of-the-header-in-net-maui-tabview) \ No newline at end of file From a26f77cf8cc3dbf93f7eb69fa58601e7a9b13bfd Mon Sep 17 00:00:00 2001 From: snehakPV Date: Thu, 22 May 2025 10:00:26 +0530 Subject: [PATCH 5/6] Updated the content --- MAUI/Effects-View/Customization.md | 2 +- MAUI/Effects-View/Effects/Combinations.md | 2 +- MAUI/Effects-View/Features.md | 2 +- MAUI/Effects-View/Getting-Started.md | 2 +- MAUI/Effects-View/Interaction.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/MAUI/Effects-View/Customization.md b/MAUI/Effects-View/Customization.md index 9e475c81be..e5e5407be0 100644 --- a/MAUI/Effects-View/Customization.md +++ b/MAUI/Effects-View/Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Customization in .NET MAUI Effects View Control | Syncfusion® -description: Learn here all about Customization support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +description: Learn about Customization support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI control: SfEffectsView documentation: UG diff --git a/MAUI/Effects-View/Effects/Combinations.md b/MAUI/Effects-View/Effects/Combinations.md index befd39e3da..11d2ea19c2 100644 --- a/MAUI/Effects-View/Effects/Combinations.md +++ b/MAUI/Effects-View/Effects/Combinations.md @@ -7,7 +7,7 @@ control: SfEffectsView documentation: UG --- -# Combination of effects +# Combination of Effects The [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html) control supports applying multiple [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html) in combination. Below are some valid combinations of [SfEffects](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html): diff --git a/MAUI/Effects-View/Features.md b/MAUI/Effects-View/Features.md index e8841fa3e0..d9d94e75bf 100644 --- a/MAUI/Effects-View/Features.md +++ b/MAUI/Effects-View/Features.md @@ -1,7 +1,7 @@ --- layout: post title: Features in .NET MAUI Effects View Control | Syncfusion® -description: Learn here all about Features support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +description: Learn about Features support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI control: SfEffectsView documentation: UG diff --git a/MAUI/Effects-View/Getting-Started.md b/MAUI/Effects-View/Getting-Started.md index a3909d987b..e066408b42 100644 --- a/MAUI/Effects-View/Getting-Started.md +++ b/MAUI/Effects-View/Getting-Started.md @@ -230,7 +230,7 @@ Before proceeding, ensure the following are set up: ## Step 1: Create a new .NET MAUI project -1. Go to **File > New Solution**, Select .NET (C#) and choose the **.NET MAUI App** template. +1. Go to **File > New Solution**, select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. diff --git a/MAUI/Effects-View/Interaction.md b/MAUI/Effects-View/Interaction.md index f32275e4b7..577bafe138 100644 --- a/MAUI/Effects-View/Interaction.md +++ b/MAUI/Effects-View/Interaction.md @@ -1,7 +1,7 @@ --- layout: post title: Interaction in .NET MAUI Effects View Control | Syncfusion® -description: Learn here all about interaction support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +description: Learn about interaction support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI control: SfEffectsView documentation: UG From 8ce546bf3a636f004b8a695a108d2a7efa504aa2 Mon Sep 17 00:00:00 2001 From: snehakPV Date: Thu, 22 May 2025 10:52:15 +0530 Subject: [PATCH 6/6] updated reviewed content --- MAUI/Effects-View/Effects/Highlight.md | 2 +- MAUI/Effects-View/Effects/Ripple.md | 4 ++-- MAUI/NavigationDrawer/Getting-Started.md | 2 +- MAUI/NavigationDrawer/Overview.md | 6 +++--- MAUI/NavigationDrawer/Toggling-Drawer.md | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/MAUI/Effects-View/Effects/Highlight.md b/MAUI/Effects-View/Effects/Highlight.md index bf78a6c66d..9b4d83a8a6 100644 --- a/MAUI/Effects-View/Effects/Highlight.md +++ b/MAUI/Effects-View/Effects/Highlight.md @@ -1,7 +1,7 @@ --- layout: post title: The .NET MAUI Highlight Effects | Effects View Control | Syncfusion® -description: Learn here all about highlight effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +description: Learn about highlight effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI control: SfEffectsView documentation: UG diff --git a/MAUI/Effects-View/Effects/Ripple.md b/MAUI/Effects-View/Effects/Ripple.md index ab2833a51f..4b15eb6058 100644 --- a/MAUI/Effects-View/Effects/Ripple.md +++ b/MAUI/Effects-View/Effects/Ripple.md @@ -1,7 +1,7 @@ --- layout: post title: The .NET MAUI Ripple Effects | Effects View Control | Syncfusion® -description: Learn here all about ripple effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. +description: Learn all about ripple effect support in Syncfusion® .NET MAUI Effects View (SfEffectsView) control and more. platform: MAUI control: SfEffectsView documentation: UG @@ -9,7 +9,7 @@ documentation: UG # Ripple Effect in .NET MAUI Effects View (SfEffectsView) -The [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) effect is an expandable circle that is initially placed at the tapped location and grows until the whole layout is filled. The effect is rendered based on the [InitialRippleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_InitialRippleFactor). +The [SfEffects.Ripple](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffects.html#Syncfusion_Maui_Core_SfEffects_Ripple) is an expandable circle that is initially placed at the tapped location and grows until the whole layout is filled. The effect is rendered based on the [InitialRippleFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html#Syncfusion_Maui_Core_SfEffectsView_InitialRippleFactor). {% tabs %} diff --git a/MAUI/NavigationDrawer/Getting-Started.md b/MAUI/NavigationDrawer/Getting-Started.md index 4886011179..f953ac72b6 100644 --- a/MAUI/NavigationDrawer/Getting-Started.md +++ b/MAUI/NavigationDrawer/Getting-Started.md @@ -228,7 +228,7 @@ Before proceeding, ensure the following are set up: ## Step 1: Create a new .NET MAUI project -1. Go to **File > New Solution**, Select .NET (C#) and choose the **.NET MAUI App** template. +1. Go to **File > New Solution**, select .NET (C#) and choose the **.NET MAUI App** template. 2. Enter the Project Name, Solution Name, and Location. 3. Select the .NET framework version and click **Create**. diff --git a/MAUI/NavigationDrawer/Overview.md b/MAUI/NavigationDrawer/Overview.md index ed187e9211..5dcbad7e17 100644 --- a/MAUI/NavigationDrawer/Overview.md +++ b/MAUI/NavigationDrawer/Overview.md @@ -15,8 +15,8 @@ The .NET MAUI Navigation Drawer is a simpler component for creating a navigation ![.NET MAUI Navigation Drawer.](Images/overview/net-maui-navigationdrawer.png) -## Key Features +## Key features -* **Pane Positions** – Supports positioning the pane in all four directions: Left, Right, Top, and Bottom. +* **Pane positions** – Supports positioning the pane in all four directions: Left, Right, Top, and Bottom. -* **Animated Transitions** – Offers animated transitions such as SlideOnTop, Push, and Reveal for opening and closing the pane. \ No newline at end of file +* **Animated transitions** – Offers animated transitions such as SlideOnTop, Push, and Reveal for opening and closing the pane. \ No newline at end of file diff --git a/MAUI/NavigationDrawer/Toggling-Drawer.md b/MAUI/NavigationDrawer/Toggling-Drawer.md index 3b8967a4c7..d678510d2d 100644 --- a/MAUI/NavigationDrawer/Toggling-Drawer.md +++ b/MAUI/NavigationDrawer/Toggling-Drawer.md @@ -11,9 +11,9 @@ documentation: UG The drawer in the SfNavigationDrawer can be toggled using the following methods: -* IsOpen Property -* ToggleDrawer Method -* Swipe Gesture +* IsOpen property +* ToggleDrawer method +* Swipe gesture ## Opening drawer programmatically