From f807eb60ed193e8b2b28077a73cbc24faf11297d Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 20:08:32 +0530 Subject: [PATCH 001/156] getting started followed common format --- MAUI/Cartesian-Charts/Getting-Started.md | 59 ++++++++++++++++++------ 1 file changed, 45 insertions(+), 14 deletions(-) diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index 1b1d318d64..496c5b51e1 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -16,12 +16,29 @@ To get start quickly with our .NET MAUI Cartesian Chart, you can check the below {% youtube "https://www.youtube.com/watch?v=o616GkzdPJk&t=7s" %} -## Creating an application with .NET MAUI chart +## Prerequisites -1. Create a new .NET MAUI application in Visual Studio. -2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfCartesianChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts and then install it. -3. To initialize the control, import the Chart namespace. -4. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1). +Before starting, ensure the following are set up: + +1. .NET 7 SDK or later is installed. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided. + +## Step 1: Create a New MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to File > New > Project, then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Charts NuGet Package + +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. +3. Ensure all dependencies are correctly installed, and restore your project. + +## Step 3: Add a Basic Cartesian Chart + +1. To initialize the control, import the Chart namespace into your code. +2. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1). {% tabs %} @@ -37,6 +54,12 @@ To get start quickly with our .NET MAUI Cartesian Chart, you can check the below {% endhighlight %} +{% endtabs %} + +You can also create the chart programmatically in the MainPage.xaml.cs file: + +{% tabs %} + {% highlight C# %} using Syncfusion.Maui.Charts; @@ -56,7 +79,7 @@ namespace ChartGettingStarted {% endtabs %} -## Register the handler +## Step 4: Register the handler 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. @@ -92,7 +115,9 @@ namespace ChartGettingStarted {% endhighlight %} -## Initialize view model +## Step 5: Define the View Model + +### Data Model Now, let us define a simple data model that represents a data point in the chart. @@ -110,6 +135,8 @@ public class Person {% endtabs %} +### View Model + Next, create a view model class and initialize a list of `Person` objects as follows. {% tabs %} @@ -137,7 +164,9 @@ public class ViewModel {% endtabs %} -Set the `ViewModel` instance as the `BindingContext` of your page to bind `ViewModel` properties to the chart. +### Binding the ViewModel + +Set the `ViewModel` instance as the `BindingContext` of your page to bind `ViewModel` properties to the chart in either XAML or C#. N> Add namespace of `ViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML. @@ -167,7 +196,7 @@ this.BindingContext = new ViewModel(); {% endtabs %} -## Initialize Chart axis +## Step 6: Initialize Chart axis [ChartAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html) is used to locate the data points inside the chart area. The [XAxes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1#Syncfusion_Maui_Charts_SfCartesianChart_XAxes) and [YAxes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_YAxes) collection of the chart is used to initialize the axis for the chart. @@ -202,7 +231,7 @@ Run the project and check if you get following output to make sure you have conf ![Initializing axis for .NET MAUI Chart](Getting-Started_Images/MAUI_chart_initialized.jpg) -## Populate Chart with data +## Step 7: Add Data Binding to the Chart As we are going to visualize the comparison of heights in the data model, add [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1) to [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) property of chart, and then bind the `Data` property of the above `ViewModel` to the `ColumnSeries.ItemsSource` as follows. @@ -273,7 +302,9 @@ chart.Series.Add(series); {% endtabs %} -## Add a title +## Step 8: Customize the Chart + +### Add a title The title of the chart provide quick information to the user about the data being plotted in the chart. The [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property is used to set title for the chart as follows. @@ -303,7 +334,7 @@ chart.Title = new Label {% endtabs %} -## Enable the data labels +### Enable the data labels The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable the data labels to improve the readability of the chart. The label visibility is set to `False` by default. @@ -331,7 +362,7 @@ chart.Series.Add(series); {% endtabs %} -## Enable a legend +### Enable a legend The legend provides information about the data point displayed in the chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -387,7 +418,7 @@ series.Label = "Height"; {% endtabs %} -## Enable tooltip +### Enable tooltip Tooltips are used to show information about the segment, when a user hovers over a segment. Enable tooltip by setting series [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property to true. From 5f5877bf35f5e920b8c23a1cf091e79291d13699 Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 20:14:22 +0530 Subject: [PATCH 002/156] deploy content --- MAUI/Cartesian-Charts/Getting-Started.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index 496c5b51e1..c2134b2a21 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -569,6 +569,9 @@ namespace ChartGettingStarted {% endtabs %} +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + The following chart is created as a result of the previous codes. ![Getting started for .NET MAUI Chart](Getting-Started_Images/MAUI_chart.jpg) From 8f44c07d1954fdd45254db92f9a6697baaa40a1c Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 20:25:11 +0530 Subject: [PATCH 003/156] separate tags updated --- MAUI/Cartesian-Charts/Getting-Started.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index c2134b2a21..27237e81ed 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -40,8 +40,6 @@ Before starting, ensure the following are set up: 1. To initialize the control, import the Chart namespace into your code. 2. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1). -{% tabs %} - {% highlight xaml %} Date: Mon, 16 Sep 2024 20:25:49 +0530 Subject: [PATCH 004/156] Updated DataGrid Getting-started.md file. --- MAUI/DataGrid/Getting-started.md | 164 ++++++++++++++++++++++++------- 1 file changed, 127 insertions(+), 37 deletions(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index fc074ff220..a52ce437e4 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -10,48 +10,33 @@ keywords : maui datagrid, maui grid, grid maui, maui gridview, grid in maui, .ne # Getting Started with .NET MAUI DataGrid (SfDataGrid) -This section provides a quick overview for working with the SfDataGrid for .NET MAUI. Walk through the entire process of creating a real world of this control. +This section provides a quick overview for working with the SfDataGrid for .NET MAUI. Follow the steps below to add a basic DataGrid to your project. -To get start quickly with .NET MAUI DataGrid, you can check on this video: - - +## Prerequisites -## Creating an application using the .NET MAUI DataGrid - 1. Create a new .NET MAUI application in Visual Studio. - 2. Syncfusion .NET MAUI components are available on [nuget.org](https://www.nuget.org/). To add SfDataGrid to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.DataGrid and then install it. - 3. Import the control namespace `Syncfusion.Maui.DataGrid` in XAML or C# code. - 4. Initialize the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) control. +Before proceeding, ensure the following are in place: +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). - {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} - - +To get start quickly with .NET MAUI DataGrid, you can check on this video: - - + -{% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" %} +### Step 1: Create a New MAUI Project -using Syncfusion.Maui.DataGrid; -. . . +1. Open Visual Studio or VS Code. +2. Go to `File` > `New` > `Project` and choose the `.NET MAUI App` template. +3. Name the project and choose a location, then click `Create`. -public partial class MainPage : ContentPage -{ - public MainPage() - { - InitializeComponent(); - } -} +### Step 2: Install the Syncfusion MAUI DataGrid NuGet Package -{% endhighlight %} -{% endtabs %} +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for `Syncfusion.Maui.DataGrid` and install the latest version. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Register the handler +### Step 3: Register the handler -To use this control inside an application, you must initialize the `SfDataGrid` handler. +To use this control inside an application, you must initialize the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) handler. {% tabs %} {% highlight c# tabtitle="MauiProgram.cs" hl_lines="4 20" %} @@ -83,6 +68,98 @@ namespace GettingStarted {% endhighlight %} {% endtabs %} +### Step 4: Add a Basic DataGrid + +#### XAML Implementation + +Open `MainPage.xaml` and add the `SfDataGrid` control within the `` tag: + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +N> Ensure the `xmlns:dataGrid` namespace reference is correctly defined. + +#### C# Implementation + +You can also configure the DataGrid programmatically in `MainPage.xaml.cs`: + +{% tabs %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.DataGrid; + +namespace YourAppNamespace +{ + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + + var dataGrid = new SfDataGrid + { + AutoGenerateColumns = true + }; + + // Set the data grid as the content of the page + this.Content = dataGrid; + } + } +} + +{% endhighlight %} +{% endtabs %} + +N> Maintain consistent instance names across both XAML and C#. For example, use `dataGrid` consistently in both XAML and C#. + +## Creating an application using the .NET MAUI DataGrid + 1. Create a new .NET MAUI application in Visual Studio. + 2. Syncfusion .NET MAUI components are available on [nuget.org](https://www.nuget.org/). To add SfDataGrid to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.DataGrid and then install it. + 3. Import the control namespace `Syncfusion.Maui.DataGrid` in XAML or C# code. + 4. Initialize the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) control. + + {% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.DataGrid; +. . . + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + SfDataGrid dataGrid = new SfDataGrid; + this.Content = dataGrid; + } +} + +{% endhighlight %} +{% endtabs %} ## Create DataModel for the SfDataGrid @@ -238,8 +315,10 @@ By default, the SfDataGrid automatically creates columns for all the properties The columns can be manually defined by setting the `SfDataGrid.AutoGenerateColumnsMode` property to 'None' and by adding the [DataGridColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html) objects to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.ColumnCollection.html) collection. This can be done from both XAML and code. The following code example illustrates this: +### XAML Implementation + {% tabs %} -{% highlight xaml %} +{% highlight xaml tabtitle="MainPage.xaml" %} {% endhighlight %} -{% highlight c# %} +{% endtabs %} + +### C# Implementation + +{% tabs %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} dataGrid.AutoGenerateColumnsMode = AutoGenerateColumnsMode.None; DataGridTextColumn orderIdColumn = new DataGridTextColumn (); @@ -288,7 +372,7 @@ In the SfDataGrid, sorting can be done on its data by setting the [SfDataGrid.So SortingMode="Single" /> {% endhighlight %} {% highlight c# %} -dataGrid.SortingMode=DataGridSortingMode.Single; +dataGrid.SortingMode = DataGridSortingMode.Single; {% endhighlight %} {% endtabs %} @@ -321,8 +405,10 @@ The SfDataGrid can be loaded with specific heights and widths inside different l The following code example illustrates how this can be done: +### XAML Implementation + {% tabs %} -{% highlight xaml %} +{% highlight xaml tabtitle="MainPage.xaml" %} {% endhighlight %} +{% endtabs %} -{% highlight c# %} +### C# Implementation + +{% tabs %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} public MainPage() { InitializeComponent(); From d7c5bf8d2e7de159871f2aa481002a9738127f91 Mon Sep 17 00:00:00 2001 From: Rasika Palanisamy Date: Mon, 16 Sep 2024 20:35:50 +0530 Subject: [PATCH 005/156] Removed unnecessary topic. --- MAUI/DataGrid/Getting-started.md | 39 ++------------------------------ 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index a52ce437e4..49b24959e6 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -10,7 +10,7 @@ keywords : maui datagrid, maui grid, grid maui, maui gridview, grid in maui, .ne # Getting Started with .NET MAUI DataGrid (SfDataGrid) -This section provides a quick overview for working with the SfDataGrid for .NET MAUI. Follow the steps below to add a basic DataGrid to your project. +This section provides a quick overview for working with the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) for .NET MAUI. Follow the steps below to add a basic DataGrid to your project. ## Prerequisites @@ -36,7 +36,7 @@ To get start quickly with .NET MAUI DataGrid, you can check on this video: ### Step 3: Register the handler -To use this control inside an application, you must initialize the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) handler. +To use this control inside an application, you must initialize the `SfDataGrid` handler. {% tabs %} {% highlight c# tabtitle="MauiProgram.cs" hl_lines="4 20" %} @@ -126,41 +126,6 @@ namespace YourAppNamespace N> Maintain consistent instance names across both XAML and C#. For example, use `dataGrid` consistently in both XAML and C#. -## Creating an application using the .NET MAUI DataGrid - 1. Create a new .NET MAUI application in Visual Studio. - 2. Syncfusion .NET MAUI components are available on [nuget.org](https://www.nuget.org/). To add SfDataGrid to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.DataGrid and then install it. - 3. Import the control namespace `Syncfusion.Maui.DataGrid` in XAML or C# code. - 4. Initialize the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) control. - - {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - - -{% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" %} - -using Syncfusion.Maui.DataGrid; -. . . - -public partial class MainPage : ContentPage -{ - public MainPage() - { - InitializeComponent(); - SfDataGrid dataGrid = new SfDataGrid; - this.Content = dataGrid; - } -} - -{% endhighlight %} -{% endtabs %} - ## Create DataModel for the SfDataGrid The SfDataGrid is a data-bound control. Hence, a data model should be created to bind it to the control. From b2c9eaf6af4c728371542011064d859e2777c2ef Mon Sep 17 00:00:00 2001 From: Rasika Palanisamy Date: Mon, 16 Sep 2024 20:45:43 +0530 Subject: [PATCH 006/156] Added link. --- MAUI/DataGrid/Getting-started.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index 49b24959e6..aea1f1c075 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -16,25 +16,25 @@ This section provides a quick overview for working with the [SfDataGrid](https:/ Before proceeding, ensure the following are in place: 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. -2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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). To get start quickly with .NET MAUI DataGrid, you can check on this video: -### Step 1: Create a New MAUI Project +## Step 1: Create a New MAUI Project 1. Open Visual Studio or VS Code. 2. Go to `File` > `New` > `Project` and choose the `.NET MAUI App` template. 3. Name the project and choose a location, then click `Create`. -### Step 2: Install the Syncfusion MAUI DataGrid NuGet Package +## Step 2: Install the Syncfusion MAUI DataGrid NuGet Package 1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. 2. Search for `Syncfusion.Maui.DataGrid` 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 To use this control inside an application, you must initialize the `SfDataGrid` handler. @@ -68,9 +68,9 @@ namespace GettingStarted {% endhighlight %} {% endtabs %} -### Step 4: Add a Basic DataGrid +## Step 4: Add a Basic DataGrid -#### XAML Implementation +### XAML Implementation Open `MainPage.xaml` and add the `SfDataGrid` control within the `` tag: @@ -93,7 +93,7 @@ Open `MainPage.xaml` and add the `SfDataGrid` control within the ` Ensure the `xmlns:dataGrid` namespace reference is correctly defined. -#### C# Implementation +### C# Implementation You can also configure the DataGrid programmatically in `MainPage.xaml.cs`: From 8a009cce60314a4b4c63c63ec5d646a6293ec990 Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Mon, 16 Sep 2024 20:46:02 +0530 Subject: [PATCH 007/156] Updated avatar view Getting-Started.md --- MAUI/Avatar-view/Getting-Started.md | 83 ++++++++++++++++++++--------- 1 file changed, 59 insertions(+), 24 deletions(-) diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index e6a962dc33..46c58e0979 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -7,19 +7,37 @@ control: SfAvatarView documentation: ug --- -# Getting Started With .NET MAUI Avatar View (SfAvatarView) +# Getting Started with .NET MAUI Avatar View ## Creating an application using the .NET MAUI Avatar View -This section explains the steps required to work with the [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) control for .NET MAUI. +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. -## Adding .NET MAUI Avatar View reference +## Prerequisites -The Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and then install it. +Before proceeding, ensure the following are in place: +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). -## Handler registration +To get start quickly with our .NET MAUI Avatar View, you can check the below video. - In the MauiProgram.cs file, register the handler for Syncfusion core. +{% youtube "https://www.youtube.com/watch?v=XrTvIgeeUm0" %} + +## Step 1: Create a New MAUI Project + +1. Open Visual Studio or VS Code. +2. Go to **File > New > Project** and choose the **.NET MAUI App** template. +3. Name the project and choose a location, then click **Create.** + +## 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. + +## Register the handler + +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; @@ -54,29 +72,47 @@ namespace AvatarViewSample {% endhighlight %} -## Adding a namespace +## Step - 4 Add a Basic Avatar View -Add the following namespace to add [.NET MAUI Avatar View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). +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). {% tabs %} {% highlight xaml %} - xmlns:sfavatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" - + + + + + + {% endhighlight %} {% highlight c# %} using Syncfusion.Maui.Core; + namespace AvatarViewGettingStarted + { + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + SfAvatarView avatarView = new SfAvatarView(); + } + } + } {% endhighlight %} {% endtabs %} -### Adding the .NET MAUI Avatar View control +## Step -5 Adding a 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. +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. {% tabs %} @@ -114,18 +150,17 @@ namespace AvatarViewGettingStarted Grid mainGrid = new Grid(); // Create an SfAvatarView control. - SfAvatarView avatarview = new SfAvatarView(); - avatarview.VerticalOptions = LayoutOptions.Center; - avatarview.HorizontalOptions = LayoutOptions.Center; - avatarview.BackgroundColor = Color.FromRgba("#ffb6c1"); - avatarview.ContentType = ContentType.Custom; - avatarview.ImageSource = "alex.png"; - avatarview.WidthRequest = 50; - avatarview.HeightRequest = 50; - avatarview.CornerRadius = 25; - avatarview.Stroke = Colors.Black; - avatarview.StrokeThickness = 1; - mainGrid.Children.Add(avatarview); + SfAvatarView avatarView = new SfAvatarView(); + avatarView.VerticalOptions = LayoutOptions.Center; + avatarView.HorizontalOptions = LayoutOptions.Center; + avatarView.ContentType = ContentType.Custom; + avatarView.ImageSource = "alex.png"; + avatarView.WidthRequest = 50; + avatarView.HeightRequest = 50; + avatarView.CornerRadius = 25; + avatarView.Stroke = Colors.Black; + avatarView.StrokeThickness = 1; + mainGrid.Children.Add(avatarView); this.Content = mainGrid; } } From 6e85161d2f27298e856d82ef307d42d72a0cf9ce Mon Sep 17 00:00:00 2001 From: SivakumarVairamuthu Date: Mon, 16 Sep 2024 20:49:53 +0530 Subject: [PATCH 008/156] Updated the Radial-Menu/Getting-Started.md and Switch/Getting-Started.md --- MAUI/Radial-Menu/Getting-Started.md | 24 +++++++++++++----- MAUI/Switch/Getting-Started.md | 38 ++++++++++++++++++++--------- 2 files changed, 45 insertions(+), 17 deletions(-) diff --git a/MAUI/Radial-Menu/Getting-Started.md b/MAUI/Radial-Menu/Getting-Started.md index f51d6d948b..406ab31d6e 100644 --- a/MAUI/Radial-Menu/Getting-Started.md +++ b/MAUI/Radial-Menu/Getting-Started.md @@ -9,17 +9,29 @@ documentation: ug # Getting Started with .NET MAUI RadialMenu Control (SfRadialMenu) -This section provides a quick overview of how to get started with the [.NET MAUI RadialMenu control (SfRadialMenu)](https://www.syncfusion.com/maui-controls/maui-radial-menu) for .NET MAUI and a walk-through to configure the .NET MAUI RadialMenu control in a real-time scenario. +This section guides you through setting up and configuring a [.NET MAUI RadialMenu control (SfRadialMenu)](https://www.syncfusion.com/maui-controls/maui-radial-menu) in your .NET MAUI application. Follow the steps below to add a basic [.NET MAUI RadialMenu control (SfRadialMenu)](https://www.syncfusion.com/maui-controls/maui-radial-menu) to your project. -## Creating an Application using the .NET MAUI RadialMenu Control +To get start quickly with our .NET MAUI Radio Button, you can check the below video. -1. Create a new .NET MAUI application in Visual Studio. +{% youtube "https://www.youtube.com/watch?v=VxufXFzSh0M" %} -2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add the [.NET MAUI RadialMenu]() to your project, open the NuGet package manager in Visual Studio, search for `Syncfusion.Maui.RadialMenu`, and then install it. +## Prerequisites +Before proceeding, ensure the following are in place: +1. Install .NET 7 SDK or later. -3. To initialize the control, import the control namespace `Syncfusion.Maui.RadialMenu` in XAML or C# code. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured -4. Initialize [SfRadialMenu](https://www.syncfusion.com/maui-controls/maui-radial-menu). +## Create a New MAUI Project + +1. Open Visual Studio or VS Code. +2. Go to File > New > Project and choose the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Install the Syncfusion MAUI RadialMenu 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. +Ensure the necessary dependencies are installed correctly, and the project is restored. ## Register the handler diff --git a/MAUI/Switch/Getting-Started.md b/MAUI/Switch/Getting-Started.md index 162071112d..2c85a2f2c7 100644 --- a/MAUI/Switch/Getting-Started.md +++ b/MAUI/Switch/Getting-Started.md @@ -10,15 +10,33 @@ keywords : .net maui switch, maui switch, .net maui switch contrl, maui switch c # Getting Started with .NET MAUI Switch (SfSwitch) -This section explains the steps to configure the .NET MAUI Switch control in a real-time scenario and provides a walk-through on some of the customization features available in the control. +This section guides you through setting up and configuring a [.NET MAUI Switch control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) in your .NET MAUI application. Follow the steps below to add a basic [.NET MAUI Switch control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) to your project. -## Adding a .NET MAUI Switch reference -The Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [.NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons), and install it. +{% youtube "https://www.youtube.com/watch?v=BJDUlLdsQyo" %} -## Handler registration +## Prerequisites -In the MauiProgram.cs file, register the handler for the Syncfusion core. +Before proceeding, ensure the following are in place: +1. Install .NET 7 SDK or later. + +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured + +## Create a New MAUI Project + +1. Open Visual Studio or VS Code. +2. Go to File > New > Project and choose the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## 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. +Ensure the necessary dependencies are installed correctly, and the project is restored. + +## Register the handler + +The [Syncfusion.Maui.Core](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.html) 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; @@ -77,14 +95,13 @@ Now, add the [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Butt {% highlight xaml %} - + {% endhighlight %} {% highlight C# %} SfSwitch sfSwitch = new SfSwitch(); -this.Content = sfSwitch; {% endhighlight %} @@ -92,9 +109,9 @@ this.Content = sfSwitch; ![SfSwitch](images/getting-started/SfSwitch.png) -## Performing an action based on state +## Performing an action based on switch 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, allowing you to perform actions based on the current state. The [StateChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchStateChangingEventArgs.html) event also provides the option to cancel the transition to a new state. +In the [.NET MAUI SfSwitch control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html), you can switch between "On" and "Off" states. 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. The following code example displays a message box when the .NET MAUI Switch is switched to the off state after the work is completed. @@ -102,7 +119,7 @@ The following code example displays a message box when the .NET MAUI Switch is s {% highlight xaml %} - + {% endhighlight %} @@ -110,7 +127,6 @@ The following code example displays a message box when the .NET MAUI Switch is s SfSwitch sfSwitch = new SfSwitch(); sfSwitch.StateChanged+= SfSwitch_StateChanged; -this.Content = sfSwitch; {% endhighlight %} From fe2a96825f1b28b24c14c3caa71ba9244738b27d Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Mon, 16 Sep 2024 20:56:32 +0530 Subject: [PATCH 009/156] updated alignments --- MAUI/Avatar-view/Getting-Started.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index 46c58e0979..7a6f8389bd 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -16,8 +16,8 @@ This section guides you through setting up and configuring a [AvatarView](https: ## Prerequisites Before proceeding, ensure the following are in place: -1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. -2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. +1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). To get start quickly with our .NET MAUI Avatar View, you can check the below video. @@ -25,15 +25,15 @@ To get start quickly with our .NET MAUI Avatar View, you can check the below vid ## Step 1: Create a New MAUI Project -1. Open Visual Studio or VS Code. -2. Go to **File > New > Project** and choose the **.NET MAUI App** template. -3. Name the project and choose a location, then click **Create.** +1. Open Visual Studio or VS Code. +1. Go to **File > New > Project** and choose the **.NET MAUI App** template. +1. Name the project and choose a location, then click **Create.** ## 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. +1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** +1. Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and install the latest version. +1. Ensure the necessary dependencies are installed correctly, and the project is restored. ## Register the handler @@ -75,7 +75,7 @@ namespace AvatarViewSample ## 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). +1. Initialize [SfAvatarView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfAvatarView.html?tabs=tabid-1). {% tabs %} From e41714d4a2f34d006e1b60de2f30608064a8a8e7 Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 20:57:51 +0530 Subject: [PATCH 010/156] addressed pr comments --- MAUI/Cartesian-Charts/Getting-Started.md | 14 +++-- MAUI/Circular-Charts/Getting-Started.md | 65 +++++++++++++++++++----- 2 files changed, 62 insertions(+), 17 deletions(-) diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index 27237e81ed..612b3faace 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -20,8 +20,8 @@ To get start quickly with our .NET MAUI Cartesian Chart, you can check the below Before starting, ensure the following are set up: -1. .NET 7 SDK or later is installed. -2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided. +1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. ## Step 1: Create a New MAUI Project @@ -40,6 +40,8 @@ Before starting, ensure the following are set up: 1. To initialize the control, import the Chart namespace into your code. 2. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1). +{% tabs %} + {% highlight xaml %} New > Project, then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Charts NuGet Package + +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. +3. Ensure all dependencies are correctly installed, and restore your project. + +## Step 3: Add a Basic Circular Chart + +1. To initialize the control, import the Chart namespace into your code. +2. Initialize [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html). {% tabs %} @@ -35,6 +52,12 @@ To get start quickly with our .NET MAUI Circular Chart, you can check the below {% endhighlight %} +{% endtabs %} + +You can also create the chart programmatically in the MainPage.xaml.cs file: + +{% tabs %} + {% highlight C# %} using Syncfusion.Maui.Charts; @@ -48,13 +71,14 @@ public partial class MainWindow : ContentPage SfCircularChart chart = new SfCircularChart(); } } + {% endhighlight %} -{% endtabs %} +{% endtabs %} -## Register the handler +## Step 4: Register the handler -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 nuget](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# %} @@ -87,7 +111,9 @@ namespace ChartGettingStarted {% endhighlight %} -## Initialize view model +## Step 5: Define the View Model + +### Data Model Now, let us define a simple data model that represents a data point in the chart. @@ -105,6 +131,8 @@ public class Sales {% endtabs %} +### View Model + Next, create a view model class and initialize a list of `Model` objects as follows. {% tabs %} @@ -132,6 +160,8 @@ public class ChartViewModel {% endtabs %} +### Binding the ViewModel + Create a `ViewModel` instance and set it as the chart's `BindingContext`. This enables property binding from `ViewModel` class. N> Add namespace of `ViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML. @@ -163,7 +193,7 @@ chart.BindingContext = viewModel; {% endtabs %} -## Populate chart with data +## Step 6: Add Data Binding to the Chart Adding [PieSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PieSeries.html) to the charts [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html#Syncfusion_Maui_Charts_SfCircularChart_Series) collection and binding `Data` to the series [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource) property from its BindingContext to create our own Product Sales Pie chart. @@ -199,7 +229,9 @@ chart.Series.Add(series); {% endtabs %} -## Add a title +## Step 7: Customize the Chart + +### Add a title The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set title using the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property of circular chart as follows. @@ -228,7 +260,7 @@ chart.Title = new Label {% endtabs %} -## Enable the data labels +### Enable the data labels The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable data labels to improve the readability of the circular chart. The label visibility is set to `False` by default. @@ -255,7 +287,7 @@ chart.Series.Add(series); {% endtabs %} -## Enable a legend +### Enable a legend The legend provides information about the data point displayed in the circular chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -282,7 +314,7 @@ chart.Legend = new ChartLegend(); {% endtabs %} -## Enable Tooltip +### Enable Tooltip Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting series [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property as true. @@ -366,6 +398,11 @@ public partial class MainPage : ContentPage {% endtabs %} +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + +The following chart is created as a result of the previous codes. + ![Pie chart in .NET MAUI Chart](Getting-Started_Images/MAUI_pie_chart.png) You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted_CircularChart_MAUI). From c546fc68ac19e4f0e69ae90056c7caa43a1943ca Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Mon, 16 Sep 2024 21:08:51 +0530 Subject: [PATCH 011/156] addressed feedback --- MAUI/Avatar-view/Getting-Started.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index 7a6f8389bd..aa47fc76f3 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -9,14 +9,12 @@ documentation: ug # Getting Started with .NET MAUI Avatar View -## Creating an application using the .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. ## Prerequisites -Before proceeding, ensure the following are in place: -1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. +Before proceeding, ensure the following are set up: +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. 1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). To get start quickly with our .NET MAUI Avatar View, you can check the below video. @@ -25,9 +23,9 @@ To get start quickly with our .NET MAUI Avatar View, you can check the below vid ## Step 1: Create a New MAUI Project -1. Open Visual Studio or VS Code. -1. Go to **File > New > Project** and choose the **.NET MAUI App** template. -1. Name the project and choose a location, then click **Create.** +1. Launch Visual Studio or VS Code. +1. Navigate to **File > New > Project,** then select the **.NET MAUI App** template. +1. Name the project and choose a location, then click Create. ## Step 2: Install the Syncfusion MAUI Core NuGet Package From 244b7f3e7943104334962327e6a443842601f844 Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 21:14:00 +0530 Subject: [PATCH 012/156] getting started updated --- MAUI/Cartesian-Charts/Getting-Started.md | 3 +- MAUI/Funnel-Charts/Getting-Started.md | 62 +++++++++++++++++++----- MAUI/Polar-Charts/Getting-Started.md | 62 ++++++++++++++++++------ MAUI/Pyramid-Charts/Getting-Started.md | 62 +++++++++++++++++++----- 4 files changed, 147 insertions(+), 42 deletions(-) diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index 612b3faace..bd9c334e84 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -38,7 +38,7 @@ Before starting, ensure the following are set up: ## Step 3: Add a Basic Cartesian Chart 1. To initialize the control, import the Chart namespace into your code. -2. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html?tabs=tabid-1). +2. Initialize [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html). {% tabs %} @@ -112,7 +112,6 @@ namespace ChartGettingStarted } } - {% endhighlight %} ## Step 5: Define the View Model diff --git a/MAUI/Funnel-Charts/Getting-Started.md b/MAUI/Funnel-Charts/Getting-Started.md index 225f2ac6af..936e816c27 100644 --- a/MAUI/Funnel-Charts/Getting-Started.md +++ b/MAUI/Funnel-Charts/Getting-Started.md @@ -15,12 +15,29 @@ To get start quickly with our .NET MAUI Funnel Chart, you can check the below vi {% youtube "https://www.youtube.com/watch?v=wJhqKHduXTI&t=2s" %} -## Creating an application using the .NET MAUI chart +## Prerequisites -1. Create a new .NET MAUI application in Visual Studio. -2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfFunnelChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts and then install it. -3. To initialize the control, import the Chart namespace. -4. Initialize [SfFunnelChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html). +Before starting, ensure the following are set up: + +1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. + +## Step 1: Create a New MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to File > New > Project, then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Charts NuGet Package + +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. +3. Ensure all dependencies are correctly installed, and restore your project. + +## Step 3: Add a Basic Funnel Chart + +1. To initialize the control, import the Chart namespace into your code. +2. Initialize [SfFunnelChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html). {% tabs %} @@ -35,6 +52,12 @@ To get start quickly with our .NET MAUI Funnel Chart, you can check the below vi {% endhighlight %} +{% endtabs %} + +You can also create the chart programmatically in the MainPage.xaml.cs file: + +{% tabs %} + {% highlight C# %} using Syncfusion.Maui.Charts; @@ -52,9 +75,9 @@ public partial class MainWindow : ContentPage {% endtabs %} -## Register the handler +## Step 4: Register the handler -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 nuget](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# %} @@ -87,7 +110,9 @@ namespace ChartGettingStarted {% endhighlight %} -## Initialize view model +## Step 5: Define the View Model + +### Data Model Now, let us define a simple data model that represents a data point in the chart. @@ -105,6 +130,8 @@ public class Admission {% endtabs %} +### View Model + Next, create a view model class and initialize a list of `Model` objects as follows. {% tabs %} @@ -132,6 +159,8 @@ public class ChartViewModel {% endtabs %} +### Binding the ViewModel + Create a `ViewModel` instance and set it as the chart's `BindingContext`. This enables property binding from `ViewModel` class. N> Add the namespace of `ViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML. @@ -163,7 +192,7 @@ chart.BindingContext = viewModel; {% endtabs %} -## Populate chart with data +## Step 6: Add Data Binding to the Chart Binding `Data` to the funnel chart [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_ItemsSource) property from its BindingContext to create our own funnel chart. @@ -193,7 +222,9 @@ this.Content = chart; {% endtabs %} -## Add a title +## Step 7: Customize the Chart + +### Add a title The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set the title using the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property of the funnel chart as follows. @@ -222,7 +253,7 @@ chart.Title = new Label {% endtabs %} -## Enable the data labels +### Enable the data labels The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_ShowDataLabels) property of the chart can be used to enable data labels to improve the readability of the funnel chart. The label visibility is set to `False` by default. @@ -246,7 +277,7 @@ chart.ShowDataLabels = true; {% endtabs %} -## Enable a legend +### Enable a legend The legend provides information about the data point displayed in the funnel chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -273,7 +304,7 @@ chart.Legend = new ChartLegend(); {% endtabs %} -## Enable Tooltip +### Enable Tooltip Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting the chart [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_EnableTooltip) property as true. @@ -351,6 +382,11 @@ public partial class MainPage : ContentPage {% endtabs %} +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + +The following chart is created as a result of the previous codes. + ![Funnel chart in .NET MAUI Chart](Getting-Started_Images/MAUI_funnel_chart.png) You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted_FunnelChart_MAUI). \ No newline at end of file diff --git a/MAUI/Polar-Charts/Getting-Started.md b/MAUI/Polar-Charts/Getting-Started.md index 6b58382599..e8b6a9f9c2 100644 --- a/MAUI/Polar-Charts/Getting-Started.md +++ b/MAUI/Polar-Charts/Getting-Started.md @@ -15,12 +15,29 @@ To get start quickly with our .NET MAUI Polar Chart, you can check the below vid {% youtube "https://www.youtube.com/watch?v=Ga9mytwCo_s&t=4s" %} -## Creating an application with .NET MAUI chart +## Prerequisites -1. Create a new .NET MAUI application in Visual Studio. -2. Syncfusion .NET MAUI components are available on [nuget.org](https://www.nuget.org/). To add SfPolarChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts, and then install it. -3. To initialize the control, import the Chart namespace. -4. Initialize the [SfPolarChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html). +Before starting, ensure the following are set up: + +1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. + +## Step 1: Create a New MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to File > New > Project, then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Charts NuGet Package + +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. +3. Ensure all dependencies are correctly installed, and restore your project. + +## Step 3: Add a Basic Cartesian Chart + +1. To initialize the control, import the Chart namespace into your code. +2. Initialize [SfPolarChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html). {% tabs %} @@ -36,6 +53,12 @@ To get start quickly with our .NET MAUI Polar Chart, you can check the below vid {% endhighlight %} +{% endtabs %} + +You can also create the chart programmatically in the MainPage.xaml.cs file: + +{% tabs %} + {% highlight C# %} using Syncfusion.Maui.Charts; @@ -55,9 +78,9 @@ namespace ChartGettingStarted {% endtabs %} -## Register the handler +## Step 4: Register the handler -The Syncfusion.Maui.Core NuGet package is a dependent package for all Syncfusion controls in .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core. +[Syncfusion.Maui.Core nuget](https://www.nuget.org/packages/Syncfusion.Maui.Core) is a dependent package for all Syncfusion controls in .NET MAUI. In the **MauiProgram.cs file**, register the handler for Syncfusion core. {% highlight C# %} @@ -91,7 +114,9 @@ namespace ChartGettingStarted {% endhighlight %} -## Initialize view model +## Step 5: Define the View Model + +### Data Model Now, let us define a simple data model that represents a data point on the chart. @@ -111,6 +136,8 @@ public class PlantData {% endtabs %} +### View Model + Next, create a view model class and initialize a list of `PlantData` objects as follows. {% tabs %} @@ -141,6 +168,8 @@ public class ViewModel {% endtabs %} +### Binding the ViewModel + Create a `ViewModel` instance and set it as the chart's `BindingContext`. This enables property binding from the `ViewModel` class. N> Add the namespace of the `ViewModel` class to your XAML page, if you prefer to set the `BindingContext` in XAML. @@ -171,7 +200,7 @@ this.BindingContext = new ViewModel(); {% endtabs %} -## Initialize Chart axis +## Step 6: Initialize Chart axis [ChartAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html) is used to locate the data points inside the chart area. The [PrimaryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html#Syncfusion_Maui_Charts_SfPolarChart_PrimaryAxis) and [SecondaryAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html#Syncfusion_Maui_Charts_SfPolarChart_SecondaryAxis) properties of the chart are used to initialize the axis for the chart. @@ -203,7 +232,7 @@ chart.SecondaryAxis = secondaryAxis; {% endtabs %} -## Populate Chart with data +## Step 7: Add Data Binding to the Chart To create a polar chart, you can add a [PolarLineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PolarLineSeries.html?tabs=tabid-1%2Ctabid-4) to the polar chart [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html#Syncfusion_Maui_Charts_SfPolarChart_Series) property of the chart, and then bind the `PlantData` property of the above `ViewModel` to the `PolarLineSeries.ItemsSource` as follows. @@ -273,7 +302,9 @@ chart.Series.Add(series3); {% endtabs %} -## Add a title +## Step 8: Customize the Chart + +### Add a title The title of the chart provides quick information to the user about the data being plotted in the chart. The [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property is used to set the title for the chart as follows. @@ -304,7 +335,7 @@ chart.Title = new Label {% endtabs %} -## Enable the data labels +### Enable the data labels The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ShowDataLabels) property of series can be used to enable the data labels to enhance the readability of the chart. The label visibility is set to `False` by default. @@ -332,7 +363,7 @@ chart.Series.Add(series1); {% endtabs %} -## Enable a legend +### Enable a legend The legend provides information about the data point displayed in the chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -403,7 +434,7 @@ series3.Label = "Flower"; {% endtabs %} -## Enable tooltip +### Enable tooltip Tooltips are used to display information about a segment when a user hovers over it. Enable the tooltip by setting the series [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property to true. @@ -548,6 +579,9 @@ namespace ChartGettingStarted {% endtabs %} +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + The following chart is created as a result of the previous codes. ![Getting started for .NET MAUI Chart](Getting-Started_Images/MAUI_polar_chart.png) diff --git a/MAUI/Pyramid-Charts/Getting-Started.md b/MAUI/Pyramid-Charts/Getting-Started.md index 3601022dc7..bd4ed88fd9 100644 --- a/MAUI/Pyramid-Charts/Getting-Started.md +++ b/MAUI/Pyramid-Charts/Getting-Started.md @@ -15,12 +15,29 @@ To get start quickly with our .NET MAUI Pyramid Chart, you can check the below v {% youtube "https://www.youtube.com/watch?v=wJhqKHduXTI&t=2s" %} -## Creating an application using the .NET MAUI chart(SfPyramidChart) +## Prerequisites -1. Create a new .NET MAUI application in Visual Studio. -2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfPyramidChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts and then install it. -3. To initialize the control, import the Chart namespace. -4. Initialize [SfPyramidChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPyramidChart.html). +Before starting, ensure the following are set up: + +1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. + +## Step 1: Create a New MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to File > New > Project, then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Charts NuGet Package + +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. +3. Ensure all dependencies are correctly installed, and restore your project. + +## Step 3: Add a Basic Cartesian Chart + +1. To initialize the control, import the Chart namespace into your code. +2. Initialize [SfPyramidChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPyramidChart.html). {% tabs %} @@ -35,6 +52,12 @@ To get start quickly with our .NET MAUI Pyramid Chart, you can check the below v {% endhighlight %} +{% endtabs %} + +You can also create the chart programmatically in the MainPage.xaml.cs file: + +{% tabs %} + {% highlight C# %} using Syncfusion.Maui.Charts; @@ -52,9 +75,9 @@ public partial class MainWindow : ContentPage {% endtabs %} -## Register the handler +## Step 4: Register the handler -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 nuget](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# %} @@ -87,7 +110,9 @@ namespace ChartGettingStarted {% endhighlight %} -## Initialize view model +## Step 5: Define the View Model + +### Data Model Now, let us define a simple data model that represents a data point in the chart. @@ -105,6 +130,8 @@ public class Stage {% endtabs %} +### View Model + Next, create a view model class and initialize a list of `Model` objects as follows. {% tabs %} @@ -131,6 +158,8 @@ public class ChartViewModel {% endtabs %} +### Binding the ViewModel + Create a `ViewModel` instance and set it as the chart's `BindingContext`. This enables property binding from `ViewModel` class. N> Add the namespace of `ViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML. @@ -162,7 +191,7 @@ chart.BindingContext = viewModel; {% endtabs %} -## Populate chart with data +## Step 6: Add Data Binding to the Chart Binding `Data` to the pyramid chart [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPyramidChart.html#Syncfusion_Maui_Charts_SfPyramidChart_ItemsSource) property from its BindingContext to create our own pyramid chart. @@ -192,7 +221,9 @@ this.Content = chart; {% endtabs %} -## Add a title +## Step 7: Customize the Chart + +### Add a title The title of the chart acts as the title to provide quick information to the user about the data being plotted in the chart. You can set the title using the [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Title) property of the pyramid chart as follows. @@ -221,7 +252,7 @@ chart.Title = new Label {% endtabs %} -## Enable the data labels +### Enable the data labels The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPyramidChart.html#Syncfusion_Maui_Charts_SfPyramidChart_ShowDataLabels) property of the chart can be used to enable data labels to improve the readability of the pyramid chart. The label visibility is set to `False` by default. @@ -245,7 +276,7 @@ chart.ShowDataLabels = true; {% endtabs %} -## Enable a legend +### Enable a legend The legend provides information about the data point displayed in the pyramid chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_Legend) property of the chart was used to enable it. @@ -272,7 +303,7 @@ chart.Legend = new ChartLegend(); {% endtabs %} -## Enable Tooltip +### Enable Tooltip Tooltips are used to show information about the segment, when mouse over on it. Enable tooltip by setting the chart [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPyramidChart.html#Syncfusion_Maui_Charts_SfPyramidChart_EnableTooltip) property as true. @@ -350,6 +381,11 @@ public partial class MainPage : ContentPage {% endtabs %} +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + +The following chart is created as a result of the previous codes. + ![Pyramid chart in .NET MAUI Chart](Getting-Started_Images/MAUI_pyramid_chart.png) You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted_PyramidChart_MAUI). \ No newline at end of file From 3aae9dc09c4ed5fe704319457b2ab48038d6574b Mon Sep 17 00:00:00 2001 From: Piruthiviraj M Date: Mon, 16 Sep 2024 21:15:30 +0530 Subject: [PATCH 013/156] MAUI ListView - Modified the Getting started UG layout. --- MAUI/ListView/getting-started.md | 57 +++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 15 deletions(-) diff --git a/MAUI/ListView/getting-started.md b/MAUI/ListView/getting-started.md index a64cbf609b..3d8384d496 100644 --- a/MAUI/ListView/getting-started.md +++ b/MAUI/ListView/getting-started.md @@ -9,18 +9,34 @@ documentation: ug # Getting Started with .NET MAUI ListView (SfListView) -This section provides a quick overview of how to get started with the .NET MAUI ListView (SfListView) for Maui. Walk-through the entire process of creating the real world SfListView. +This section guides you through setting up and configuring a ListView(SfListView) in your .NET MAUI application. Follow the steps below to add a basic ListView to your project. To get start quickly with .NET MAUI ListView, you can check on this video: -## Creating an application using the .NET MAUI ListView +## Prerequisites +Before proceeding, ensure the following are in place: - 1. Create a new .NET MAUI application in Visual Studio. - 2. Syncfusion .NET MAUI components are available on [nuget.org](https://www.nuget.org/). To add SfListView to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.ListView and then install it. - 3. Import the control namespace `Syncfusion.Maui.ListView` in XAML or C# code. - 4. Initialize the [SfListView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.html) control. + 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. + 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). + +## Step 1: Create a .NET MAUI project + + 1. Open Visual studio or VS Code. + 2. Go to File > New > Project and choose the .NET MAUI App template. + 3. Name the project and choose a location, then click Create. + + ## Step 2: Install the Syncfusion MAUI Charts NuGet Package + + 1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. + 2. Search for Syncfusion.Maui.ListView on [nuget.org](https://www.nuget.org/) and install the latest version. + 3. Ensure all dependencies are correctly installed, and restore your project. + + ## Step 3: Add a Basic ListView + + 1. To initialize the control, import the Chart namespace into your code. + 2. Initialize [SfListView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.html). {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} @@ -51,7 +67,7 @@ public partial class MainPage : ContentPage {% endhighlight %} {% endtabs %} -## Register the handler +## Step 4: Register the handler The `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. @@ -84,11 +100,11 @@ namespace GettingStarted {% endhighlight %} {% endtabs %} -## Creating data model for the listview +## Step 5: Define the view model -Create a data model to bind it to the control. +### Data Model -Create a simple data source in a new class file as shown in the following code example, and save it as BookInfo.cs file. +Create a simple data model as shown in the following code example, and save it as BookInfo.cs file. {% tabs %} {% highlight c# tabtitle="BookInfo.cs" %} @@ -131,7 +147,10 @@ public class BookInfo : INotifyPropertyChanged N> If you want your data model to respond to property changes, then implement [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-6.0) interface in your model class. -Create a model repository class with `BookInfo` collection property initialized with required number of data objects in a new class file as shown in the following code example, and save it as BookInfoRepository.cs file: + +### View Model + +Next, create a model repository class with `BookInfo` collection property initialized with required number of data objects in a new class file as shown in the following code example, and save it as BookInfoRepository.cs file: {% tabs %} {% highlight c# tabtitle="BookInfoRepository.cs" %} @@ -169,9 +188,11 @@ public class BookInfoRepository {% endhighlight %} {% endtabs %} -## Binding data to the listview +### Binding data to the listview + +Create a `ViewModel` instance and set it as the ListView's `BindingContext`. This enables property binding from `ViewModel` class. -To bind the data source of the SfListView, set the [SfListView.ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemsSource) property as follows. You can bind the data source of the `SfListView` either from XAML or code. +To populate the ListView, bind the item collection from its BindingContext to [SfListView.ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemsSource) property. The following code example binds the previously created collection to the `SfListView.ItemsSource` property: @@ -195,7 +216,7 @@ listView.ItemsSource = viewModel.BookInfo; {% endhighlight %} {% endtabs %} -## Defining an item template +### Defining an item template By defining the [SfListView.ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html#Syncfusion_Maui_ListView_SfListView_ItemTemplate) of the SfListView, a custom user interface(UI) can be achieved to display the data items. @@ -259,10 +280,16 @@ namespace GettingStarted {% endhighlight %} {% endtabs %} -You can also download the entire source code of this demo [here](https://github.com/SyncfusionExamples/gettingstarted-listview-.net-maui). +## Step 6: Running the Application + +Press **F5** to build and run the application. Once compiled, the ListView will be displayed with the data provided. + +Here is the result of the previous codes, ![.NET MAUI ListView with item template](Images/getting-started/net-maui-listview-with-item-template.jpg) +You can also download the entire source code of this demo [here](https://github.com/SyncfusionExamples/gettingstarted-listview-.net-maui). + ## Layouts SfListView supports different layouts such as linear and grid layouts. The linear layout arranges the items in a single column, whereas the grid layout arranges the items in a predefined number of columns defined by the [SpanCount](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.GridLayout.html#Syncfusion_Maui_ListView_GridLayout_SpanCount) property of [GridLayout](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.GridLayout.html). From 72afd457c99c35f84267ec1bc1837e6cebfb3267 Mon Sep 17 00:00:00 2001 From: Piruthiviraj M Date: Mon, 16 Sep 2024 21:20:10 +0530 Subject: [PATCH 014/156] modified title. --- MAUI/ListView/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/ListView/getting-started.md b/MAUI/ListView/getting-started.md index 3d8384d496..5d3727d43e 100644 --- a/MAUI/ListView/getting-started.md +++ b/MAUI/ListView/getting-started.md @@ -27,7 +27,7 @@ Before proceeding, ensure the following are in place: 2. Go to File > New > Project and choose the .NET MAUI App template. 3. Name the project and choose a location, then click Create. - ## Step 2: Install the Syncfusion MAUI Charts NuGet Package + ## Step 2: Install the Syncfusion MAUI ListView NuGet Package 1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. 2. Search for Syncfusion.Maui.ListView on [nuget.org](https://www.nuget.org/) and install the latest version. From 2ec2908611c9c551ed679cf04226c67feba260d4 Mon Sep 17 00:00:00 2001 From: Piruthiviraj M Date: Mon, 16 Sep 2024 21:22:16 +0530 Subject: [PATCH 015/156] updated VS Code link. --- MAUI/ListView/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/ListView/getting-started.md b/MAUI/ListView/getting-started.md index 5d3727d43e..0b12f000ac 100644 --- a/MAUI/ListView/getting-started.md +++ b/MAUI/ListView/getting-started.md @@ -19,7 +19,7 @@ To get start quickly with .NET MAUI ListView, you can check on this video: Before proceeding, ensure the following are in place: 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. - 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). + 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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 .NET MAUI project From 214ccc241efef7d7df81ed98a7c1b9e4a0b95e8d Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Mon, 16 Sep 2024 21:23:38 +0530 Subject: [PATCH 016/156] resolved compilation errors --- MAUI/Avatar-view/Getting-Started.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index aa47fc76f3..c005590c6c 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -15,7 +15,9 @@ This section guides you through setting up and configuring a [AvatarView](https: Before proceeding, ensure the following are set up: 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. -1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described [here](https://github.com/dotnet/maui/wiki/VS-Code-setup). +1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [here.]( +https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code +) To get start quickly with our .NET MAUI Avatar View, you can check the below video. @@ -35,7 +37,7 @@ To get start quickly with our .NET MAUI Avatar View, you can check the below vid ## Register the handler -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 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; From 4c0a8e308e364ca094d675c9b7307168865bf060 Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 21:24:24 +0530 Subject: [PATCH 017/156] review suggestion updated --- MAUI/Cartesian-Charts/Getting-Started.md | 2 +- MAUI/Circular-Charts/Getting-Started.md | 2 +- MAUI/Polar-Charts/Getting-Started.md | 4 +- MAUI/Pyramid-Charts/Getting-Started.md | 4 +- MAUI/SunburstChart/Getting-Started.md | 62 +++++++++++++++++++----- 5 files changed, 55 insertions(+), 19 deletions(-) diff --git a/MAUI/Cartesian-Charts/Getting-Started.md b/MAUI/Cartesian-Charts/Getting-Started.md index bd9c334e84..e6a362bfe5 100644 --- a/MAUI/Cartesian-Charts/Getting-Started.md +++ b/MAUI/Cartesian-Charts/Getting-Started.md @@ -21,7 +21,7 @@ To get start quickly with our .NET MAUI Cartesian Chart, you can check the below Before starting, ensure the following are set up: 1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. -2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [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 MAUI Project diff --git a/MAUI/Circular-Charts/Getting-Started.md b/MAUI/Circular-Charts/Getting-Started.md index 3f7e93bcfd..b802ceda5b 100644 --- a/MAUI/Circular-Charts/Getting-Started.md +++ b/MAUI/Circular-Charts/Getting-Started.md @@ -20,7 +20,7 @@ To get start quickly with our .NET MAUI Circular Chart, you can check the below Before starting, ensure the following are set up: 1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. -2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [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 MAUI Project diff --git a/MAUI/Polar-Charts/Getting-Started.md b/MAUI/Polar-Charts/Getting-Started.md index e8b6a9f9c2..c4eb931d8f 100644 --- a/MAUI/Polar-Charts/Getting-Started.md +++ b/MAUI/Polar-Charts/Getting-Started.md @@ -20,7 +20,7 @@ To get start quickly with our .NET MAUI Polar Chart, you can check the below vid Before starting, ensure the following are set up: 1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. -2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [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 MAUI Project @@ -34,7 +34,7 @@ Before starting, ensure the following are set up: 2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. 3. Ensure all dependencies are correctly installed, and restore your project. -## Step 3: Add a Basic Cartesian Chart +## Step 3: Add a Basic Polar Chart 1. To initialize the control, import the Chart namespace into your code. 2. Initialize [SfPolarChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html). diff --git a/MAUI/Pyramid-Charts/Getting-Started.md b/MAUI/Pyramid-Charts/Getting-Started.md index bd4ed88fd9..d613fc9ab1 100644 --- a/MAUI/Pyramid-Charts/Getting-Started.md +++ b/MAUI/Pyramid-Charts/Getting-Started.md @@ -20,7 +20,7 @@ To get start quickly with our .NET MAUI Pyramid Chart, you can check the below v Before starting, ensure the following are set up: 1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. -2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided here. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [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 MAUI Project @@ -34,7 +34,7 @@ Before starting, ensure the following are set up: 2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. 3. Ensure all dependencies are correctly installed, and restore your project. -## Step 3: Add a Basic Cartesian Chart +## Step 3: Add a Basic Pyramid Chart 1. To initialize the control, import the Chart namespace into your code. 2. Initialize [SfPyramidChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPyramidChart.html). diff --git a/MAUI/SunburstChart/Getting-Started.md b/MAUI/SunburstChart/Getting-Started.md index a609d5f80f..e74142aa1d 100644 --- a/MAUI/SunburstChart/Getting-Started.md +++ b/MAUI/SunburstChart/Getting-Started.md @@ -11,12 +11,29 @@ documentation: ug This section explains how to populate the sunburst chart with data, a title, data labels, a legend, and a tooltip, as well as the essential aspects of getting started with the sunburst chart. -## Creating an Application Using the .NET MAUI Sunburst Chart +## Creating an Application Using the .NET MAUI Sunburst Chart## Prerequisites -1. Create a new .NET MAUI application in Visual Studio. -2. The Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfSunburstChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.SunburstChart and then install it. -3. To initialize the control, import the Sunburst Chart namespace. -4. Initialize [SfSunburstChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html). +Before starting, ensure the following are set up: + +1. .NET 7 SDK (https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. A .NET MAUI development environment is ready with either Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [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 MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to File > New > Project, then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Charts NuGet Package + +1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. +2. Search for Syncfusion.Maui.Charts on [nuget.org](https://www.nuget.org/) and install the latest version. +3. Ensure all dependencies are correctly installed, and restore your project. + +## Step 3: Add a Basic Sunburst Chart + +1. To initialize the control, import the Chart namespace into your code. +2. Initialize [SfSunburstChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html). {% tabs %} @@ -31,6 +48,12 @@ This section explains how to populate the sunburst chart with data, a title, dat {% endhighlight %} +{% endtabs %} + +You can also create the chart programmatically in the MainPage.xaml.cs file: + +{% tabs %} + {% highlight C# %} using Syncfusion.Maui.SunburstChart; @@ -51,9 +74,9 @@ namespace SunburstGettingStarted {% endtabs %} -## Register the handler +## Step 4: Register the handler -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 nuget](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# %} @@ -86,7 +109,9 @@ namespace SunburstGettingStarted {% endhighlight %} -## Initialize View model +## Step 5: Define the View Model + +### Data Model Now, let us define a simple data model that represents a data point in the sunburst chart. @@ -106,6 +131,8 @@ public class SunburstModel {% endtabs %} +### View Model + Next, create a view model class and initialize a list of `SunburstModel` objects as follows. {% tabs %} @@ -153,6 +180,8 @@ public class SunburstViewModel {% endtabs %} +### Binding the ViewModel + Set the `SunburstViewModel` instance as the `BindingContext` of your page to bind the `SunburstViewModel` properties to the chart. N> Add the namespace of the `SunburstViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML. @@ -182,7 +211,7 @@ this.BindingContext = new ViewModel(); {% endtabs %} -## Populate sunburst chart with data +## Step 6: Add Data Binding to the Chart Bind `DataSource` to the Sunburst chart [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_ItemsSource) property from its BindingContext to create your Sunburst chart. Then, add the [SunburstHierarchicalLevel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SunburstHierarchicalLevel.html) to [Levels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_Levels) collection. Each hierarchy level is formed based on the property specified in the [GroupMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SunburstHierarchicalLevel.html#Syncfusion_Maui_SunburstChart_SunburstHierarchicalLevel_GroupMemberPath) property, and each arc segment size is calculated using the [ValueMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_ValueMemberPath) property. @@ -229,7 +258,9 @@ this.Content = sunburst; {% endtabs %} -## Add a title +## Step 7: Customize the Chart + +### Add a title The title of the sunburst chart provides quick information to the user about the data being plotted in the chart. The [Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_Title) property is used to set title for the sunburst chart as follows. {% tabs %} @@ -257,7 +288,7 @@ sunburst.Title = new Label {% endtabs %} -## Enable the data labels +### Enable the data labels The [ShowLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_ShowLabels) property of the chart can be used to enable data labels to improve the readability of the sunburst chart. The label visibility is set to `False` by default. @@ -281,7 +312,7 @@ sunburst.ShowLabels = true; {% endtabs %} -## Enable a legend +### Enable a legend The legend provides information about the data points displayed in the sunburst chart. The [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_Legend) property of the chart enables the [SunburstLegend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SunburstLegend.html). @@ -308,7 +339,7 @@ sunburst.Legend = new SunburstLegend(); {% endtabs %} -## Enable Tooltip +### Enable Tooltip Tooltips are used to display information about a segment when the mouse hovers over it. Enable the tooltips by setting the chart's [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_EnableTooltip) property to `True`. @@ -407,6 +438,11 @@ public partial class MainPage : ContentPage {% endtabs %} +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + +The following chart is created as a result of the previous codes. + ![Getting started sample in MAUI Sunburst Chart.](Getting_started_image/maui_getting_started_image.png) Find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted_SunburstChart_MAUI). \ No newline at end of file From a927c99e073a6a9d0686c5d0e8b6e600266db81c Mon Sep 17 00:00:00 2001 From: Rasika Palanisamy Date: Mon, 16 Sep 2024 21:27:12 +0530 Subject: [PATCH 018/156] Added sub topics. --- MAUI/DataGrid/Getting-started.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index aea1f1c075..0067fcc2c1 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -8,7 +8,7 @@ documentation: ug keywords : maui datagrid, maui grid, grid maui, maui gridview, grid in maui, .net maui datagrid, .net maui grid, .net grid maui --- -# Getting Started with .NET MAUI DataGrid (SfDataGrid) +# Getting Started with .NET MAUI DataGrid This section provides a quick overview for working with the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) for .NET MAUI. Follow the steps below to add a basic DataGrid to your project. @@ -126,13 +126,15 @@ namespace YourAppNamespace N> Maintain consistent instance names across both XAML and C#. For example, use `dataGrid` consistently in both XAML and C#. -## Create DataModel for the SfDataGrid +## Step 5: Define the View Model + +### Data Model The SfDataGrid is a data-bound control. Hence, a data model should be created to bind it to the control. Create a simple data source as shown in the following code example in a new class file, and save it as OrderInfo.cs file: - {% tabs %} +{% tabs %} {% highlight c# %} public class OrderInfo { @@ -186,6 +188,8 @@ public class OrderInfo N> If you want your data model to respond to property changes, implement the `INotifyPropertyChanged` interface in your model class. +### View Model + Create a model repository class with OrderInfo collection property initialized with the required number of data objects in a new class file as shown in the following code example and save it as OrderInfoRepository.cs file: {% tabs %} @@ -226,7 +230,7 @@ public class OrderInfoRepository {% endhighlight %} {% endtabs %} -## Binding data to the SfDataGrid +### Binding the ViewModel To bind the data source to the SfDataGrid, set the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_ItemsSource) property as follows. You can bind the data source of the SfDataGrid either from XAML or in code. @@ -268,7 +272,10 @@ dataGrid.ItemsSource = viewModel.OrderInfoCollection; {% endhighlight %} {% endtabs %} -Run the application to render the following output: +## Step 9: Running the Application +Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. + +Here is the result of the previous codes, ![Getting started with .NET MAUI DataGrid.](Images\getting-started\net-maui-datagrid-getting-started.png) From 0cb064ab89f9e05bea15e658dc370832690000c3 Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Mon, 16 Sep 2024 21:27:31 +0530 Subject: [PATCH 019/156] update link --- MAUI/Avatar-view/Getting-Started.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/MAUI/Avatar-view/Getting-Started.md b/MAUI/Avatar-view/Getting-Started.md index c005590c6c..7bd8f8ed56 100644 --- a/MAUI/Avatar-view/Getting-Started.md +++ b/MAUI/Avatar-view/Getting-Started.md @@ -15,9 +15,7 @@ This section guides you through setting up and configuring a [AvatarView](https: Before proceeding, ensure the following are set up: 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. -1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. If using VS Code, make sure the .NET MAUI workload is installed and configured as per the instructions provided [here.]( -https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code -) +1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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) To get start quickly with our .NET MAUI Avatar View, you can check the below video. From d35bf6ff79dfe63d18f9ea7a039ec486a66987d7 Mon Sep 17 00:00:00 2001 From: SivakumarVairamuthu Date: Mon, 16 Sep 2024 21:29:46 +0530 Subject: [PATCH 020/156] Updated the Radial-Menu/Getting-Started.md and Switch/Getting-Started.md. --- MAUI/Radial-Menu/Getting-Started.md | 24 +++++++++++++----------- MAUI/Switch/Getting-Started.md | 21 ++++++++++++--------- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/MAUI/Radial-Menu/Getting-Started.md b/MAUI/Radial-Menu/Getting-Started.md index 406ab31d6e..16baebd888 100644 --- a/MAUI/Radial-Menu/Getting-Started.md +++ b/MAUI/Radial-Menu/Getting-Started.md @@ -9,31 +9,33 @@ documentation: ug # Getting Started with .NET MAUI RadialMenu Control (SfRadialMenu) -This section guides you through setting up and configuring a [.NET MAUI RadialMenu control (SfRadialMenu)](https://www.syncfusion.com/maui-controls/maui-radial-menu) in your .NET MAUI application. Follow the steps below to add a basic [.NET MAUI RadialMenu control (SfRadialMenu)](https://www.syncfusion.com/maui-controls/maui-radial-menu) to your project. +This section guides you through setting up and configuring a [.NET MAUI RadialMenu control](https://www.syncfusion.com/maui-controls/maui-radial-menu) in your .NET MAUI application. Follow the steps below to add a basic [.NET MAUI RadialMenu control](https://www.syncfusion.com/maui-controls/maui-radial-menu) to your project. -To get start quickly with our .NET MAUI Radio Button, you can check the below video. -{% youtube "https://www.youtube.com/watch?v=VxufXFzSh0M" %} ## Prerequisites Before proceeding, ensure the following are in place: 1. Install .NET 7 SDK or later. -2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as per the instructions provided [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). + +To get start quickly with our [.NET MAUI RadialMenu control](https://www.syncfusion.com/maui-controls/maui-radial-menu), you can check the below video. + +{% youtube "https://www.youtube.com/watch?v=VxufXFzSh0M" %} -## Create a New MAUI Project +## Step 1: Create a New MAUI Project 1. Open Visual Studio or VS Code. 2. Go to File > New > Project and choose the .NET MAUI App template. 3. Name the project and choose a location, then click Create. -## Install the Syncfusion MAUI RadialMenu NuGet Package +## Step 2: Install the Syncfusion MAUI RadialMenu 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. -Ensure the necessary dependencies are installed correctly, and the project is restored. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Register the handler +## Step 3: Register the handler The [Syncfusion.Maui.Core](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.html) NuGet is a dependent package for all Syncfusion controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion core. @@ -63,7 +65,7 @@ The [Syncfusion.Maui.Core](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.C {% endhighlight %} {% endtabs %} -## Create a Simple .NET MAUI SfRadialMenu +## Step 4: Adding the namespace Step 1: Add the NuGet to the project as discussed in the above reference section. @@ -82,7 +84,7 @@ Step 2: Add the namespace as shown in the following code sample. {% endhighlight %} {% endtabs %} -Step 3: Set the control to content in `ContentPage`. +## Step 3: Create a Simple .NET MAUI RadialMenu {% tabs %} {% highlight xaml %} @@ -123,7 +125,7 @@ Step 3: Set the control to content in `ContentPage`. {% endhighlight %} {% endtabs %} -### Adding radial menu with items +## Step 5: Adding radial menu with items {% tabs %} diff --git a/MAUI/Switch/Getting-Started.md b/MAUI/Switch/Getting-Started.md index 2c85a2f2c7..a833a43e34 100644 --- a/MAUI/Switch/Getting-Started.md +++ b/MAUI/Switch/Getting-Started.md @@ -8,33 +8,36 @@ documentation: ug keywords : .net maui switch, maui switch, .net maui switch contrl, maui switch control. --- -# Getting Started with .NET MAUI Switch (SfSwitch) +# Getting Started with .NET MAUI Switch This section guides you through setting up and configuring a [.NET MAUI Switch control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) in your .NET MAUI application. Follow the steps below to add a basic [.NET MAUI Switch control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) to your project. -{% youtube "https://www.youtube.com/watch?v=BJDUlLdsQyo" %} ## Prerequisites Before proceeding, ensure the following are in place: 1. Install .NET 7 SDK or later. -2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as per the instructions provided [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code). + +To get start quickly with our [.NET MAUI Switch control](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html), you can check the below video. + +{% youtube "https://www.youtube.com/watch?v=BJDUlLdsQyo" %} -## Create a New MAUI Project +## Step 1: Create a New MAUI Project 1. Open Visual Studio or VS Code. 2. Go to File > New > Project and choose the .NET MAUI App template. 3. Name the project and choose a location, then click Create. -## 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. -Ensure the necessary dependencies are installed correctly, and the project is restored. +3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Register the handler +## Step 3: Register the handler The [Syncfusion.Maui.Core](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.html) NuGet is a dependent package for all Syncfusion controls of .NET MAUI. In the `MauiProgram.cs` file, register the handler for Syncfusion core. @@ -68,7 +71,7 @@ namespace SwitchSample {% endhighlight %} -## Adding the .NET MAUI Switch control +## Step 4: Adding the namespace Step 1: Add the NuGet to the project as discussed in the above reference section. @@ -87,7 +90,7 @@ Step 2: Add the namespace as shown in the following code sample, to initialize t {% endhighlight %} {% endtabs %} -## Initialize Switch +## Step 5: Adding the .NET MAUI Switch control Now, add the [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) control with a required optimal name using the included namespace. From 532dac0077f3b5a19c8677c860d818296f67d510 Mon Sep 17 00:00:00 2001 From: Rasika Palanisamy Date: Mon, 16 Sep 2024 21:32:30 +0530 Subject: [PATCH 021/156] Updated corrections. --- MAUI/DataGrid/Getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index 0067fcc2c1..f629b68dd0 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -272,7 +272,7 @@ dataGrid.ItemsSource = viewModel.OrderInfoCollection; {% endhighlight %} {% endtabs %} -## Step 9: Running the Application +## Step 6: Running the Application Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. Here is the result of the previous codes, From 6a53fd6f9eb90fed0bf5653d73a8115a0e73449b Mon Sep 17 00:00:00 2001 From: VimalaThirumalaiKumarSF3739 Date: Mon, 16 Sep 2024 21:32:51 +0530 Subject: [PATCH 022/156] roman number updated --- MAUI/Circular-Charts/Getting-Started.md | 2 +- MAUI/Funnel-Charts/Getting-Started.md | 2 +- MAUI/Polar-Charts/Getting-Started.md | 2 +- MAUI/Pyramid-Charts/Getting-Started.md | 2 +- MAUI/SunburstChart/Getting-Started.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/MAUI/Circular-Charts/Getting-Started.md b/MAUI/Circular-Charts/Getting-Started.md index b802ceda5b..aae61c7a0e 100644 --- a/MAUI/Circular-Charts/Getting-Started.md +++ b/MAUI/Circular-Charts/Getting-Started.md @@ -398,7 +398,7 @@ public partial class MainPage : ContentPage {% endtabs %} -## Step 9: Running the Application +## Step 8: Running the Application Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. The following chart is created as a result of the previous codes. diff --git a/MAUI/Funnel-Charts/Getting-Started.md b/MAUI/Funnel-Charts/Getting-Started.md index 936e816c27..a1d468fd0e 100644 --- a/MAUI/Funnel-Charts/Getting-Started.md +++ b/MAUI/Funnel-Charts/Getting-Started.md @@ -382,7 +382,7 @@ public partial class MainPage : ContentPage {% endtabs %} -## Step 9: Running the Application +## Step 8: Running the Application Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. The following chart is created as a result of the previous codes. diff --git a/MAUI/Polar-Charts/Getting-Started.md b/MAUI/Polar-Charts/Getting-Started.md index c4eb931d8f..140f392955 100644 --- a/MAUI/Polar-Charts/Getting-Started.md +++ b/MAUI/Polar-Charts/Getting-Started.md @@ -579,7 +579,7 @@ namespace ChartGettingStarted {% endtabs %} -## Step 9: Running the Application +## Step 8: Running the Application Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. The following chart is created as a result of the previous codes. diff --git a/MAUI/Pyramid-Charts/Getting-Started.md b/MAUI/Pyramid-Charts/Getting-Started.md index d613fc9ab1..79a5bf9c5c 100644 --- a/MAUI/Pyramid-Charts/Getting-Started.md +++ b/MAUI/Pyramid-Charts/Getting-Started.md @@ -381,7 +381,7 @@ public partial class MainPage : ContentPage {% endtabs %} -## Step 9: Running the Application +## Step 8: Running the Application Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. The following chart is created as a result of the previous codes. diff --git a/MAUI/SunburstChart/Getting-Started.md b/MAUI/SunburstChart/Getting-Started.md index e74142aa1d..367deec7f8 100644 --- a/MAUI/SunburstChart/Getting-Started.md +++ b/MAUI/SunburstChart/Getting-Started.md @@ -438,7 +438,7 @@ public partial class MainPage : ContentPage {% endtabs %} -## Step 9: Running the Application +## Step 8: Running the Application Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. The following chart is created as a result of the previous codes. From 26d012321af3d58d67d2a2064d6fb2cc313a0c79 Mon Sep 17 00:00:00 2001 From: Rasika Palanisamy Date: Mon, 16 Sep 2024 21:35:37 +0530 Subject: [PATCH 023/156] Updated corrections. --- MAUI/DataGrid/Getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index f629b68dd0..73f9b40025 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -273,7 +273,7 @@ dataGrid.ItemsSource = viewModel.OrderInfoCollection; {% endtabs %} ## Step 6: Running the Application -Press **F5** to build and run the application. Once compiled, the chart will be displayed with the data provided. +Press **F5** to build and run the application. Once compiled, the datagrid will be displayed with the data provided. Here is the result of the previous codes, From becda87864b27f317e4963b81a44057d65fc9168 Mon Sep 17 00:00:00 2001 From: SivakumarVairamuthu Date: Mon, 16 Sep 2024 21:42:54 +0530 Subject: [PATCH 024/156] Updated the Radio-Button/Getting-Started.md and CheckBox/Getting-Started.md --- MAUI/CheckBox/Getting-Started.md | 32 ++++++++++++++++------- MAUI/Radio-Button/Getting-Started.md | 38 ++++++++++++++++++++-------- 2 files changed, 51 insertions(+), 19 deletions(-) diff --git a/MAUI/CheckBox/Getting-Started.md b/MAUI/CheckBox/Getting-Started.md index 95d3acf74f..c8a7facc42 100644 --- a/MAUI/CheckBox/Getting-Started.md +++ b/MAUI/CheckBox/Getting-Started.md @@ -9,21 +9,32 @@ documentation: ug # Getting Started with .NET MAUI CheckBox -This section explains the steps required to work with the [.NET MAUI CheckBox](https://www.syncfusion.com/maui-controls/maui-checkbox) control. +This section guides you through setting up and configuring a [CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) in your .NET MAUI application. Follow the steps below to add a basic CheckBox to your project. -## Creating an application with .NET MAUI CheckBox +## Prerequisites -This section explains the steps required to work with the [CheckBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html) control for .NET MAUI. +Before proceeding, ensure the following are in place: + + 1. Install .NET 7 SDK or later. + 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described here. To get start quickly with our .NET MAUI CheckBox, you can check the below video. {% youtube "https://www.youtube.com/watch?v=dgekGX8eYMo" %} -## Adding a .NET MAUI CheckBox reference +## Step 1: Create a New MAUI Project + + 1. Launch Visual Studio or VS Code. + 2. Navigate to File > New > Project and select the .NET MAUI App template. + 3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Buttons NuGet Package -Syncfusion .NET MAUI controls are available on [Nuget.org](https://www.nuget.org/). To add the [.NET MAUI CheckBox](https://www.syncfusion.com/maui-controls/maui-checkbox) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Buttons](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.html), and install it. + 1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. + 2. Search for Syncfusion.Maui.Buttons and install the latest version. + 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Handler registration +## step 3: Register the Handler In the MauiProgram.cs file, register the handler for the Syncfusion core. @@ -58,7 +69,8 @@ namespace ButtonSample {% endhighlight %} -## Create a Simple .NET MAUI SfCheckBox + +## Step 4 - Add a Basic SfCheckBox Step 1: Add the NuGet to the project as discussed in the above reference section. @@ -118,9 +130,9 @@ Step 3: Set the control to content in `ContentPage`. {% endhighlight %} {% endtabs %} -## Setting caption +## Set the CheckBox caption -The check box caption can be defined using the [`Text`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.ToggleButton.html#Syncfusion_Maui_Buttons_ToggleButton_Text) property of [`SfCheckBox`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfCheckBox.html). 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 the check box. {% tabs %} {% highlight xaml %} @@ -221,6 +233,8 @@ 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) +## Using Multiple CheckBoxes + 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. {% tabs %} diff --git a/MAUI/Radio-Button/Getting-Started.md b/MAUI/Radio-Button/Getting-Started.md index 664c2303d6..ea197c8d9a 100644 --- a/MAUI/Radio-Button/Getting-Started.md +++ b/MAUI/Radio-Button/Getting-Started.md @@ -8,19 +8,34 @@ documentation: ug keywords : .net maui radio button, maui radio button, maui radio button group, maui radio button state. --- -# Creating an application with .NET MAUI Radio Button +# Getting Started with .NET MAUI RadioButton -This section explains the steps required to work with the [SfRadioButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfRadioButton.html) control for .NET MAUI. +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. + +## Prerequisites + +Before proceeding, ensure the following are in place: + + 1. Install .NET 7 SDK or later. + 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload is installed and configured as described here. To get start quickly with our .NET MAUI Radio Button, you can check the below video. {% youtube "https://www.youtube.com/watch?v=z5EwGpw0KTI" %} -## Adding a .NET MAUI Radio Button reference +## Step 1: Create a New MAUI Project + + 1. Open Visual Studio or VS Code. + 2. Go to File > New > Project and choose the .NET MAUI App template. + 3. Name the project and choose a location, then click Create. -Syncfusion .NET MAUI controls are available on [Nuget.org](https://www.nuget.org/). To add the [.NET MAUI Radio Button](https://www.syncfusion.com/maui-controls/maui-radio-button) to your project, open the NuGet Package Manager in Visual Studio, search for Syncfusion.Maui.Buttons, and install it. +## Step 2: Install the Syncfusion MAUI Buttons NuGet Package -## Handler registration + 1. In Solution Explorer, right-click the project and choose Manage NuGet Packages. + 2. Search for 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 In the MauiProgram.cs file, register the handler for the Syncfusion core. @@ -55,7 +70,7 @@ namespace ButtonSample {% endhighlight %} -## Create a Simple .NET MAUI SfRadioButton +## Step 4: Add a Basic SfRadioButton Step 1: Add the NuGet to the project as discussed in the above reference section. @@ -145,14 +160,17 @@ 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. -The .NET MAUI Radio Buttons are used when there is a list of two or more options or groups that are mutually exclusive, and the user must select exactly one choice, such as "Select Gender" or "Choose the best option!". + +## Grouping RadioButtons with RadioGroup + +You can group multiple radio buttons together by using RadioGroup. Only one button within a group can be selected at a time. {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} @@ -160,9 +178,9 @@ The .NET MAUI Radio Buttons are used when there is a list of two or more options SfRadioGroup radioGroup = new SfRadioGroup(); SfRadioButton male = new SfRadioButton(); - male.IsChecked = true; male.Text = "Male"; SfRadioButton female = new SfRadioButton(); + female.IsChecked = true; female.Text = "Female"; radioGroup.Children.Add(male); radioGroup.Children.Add(female); From 93a18d7fc2cba18df65b31a3990c663829002f35 Mon Sep 17 00:00:00 2001 From: Rasika Palanisamy Date: Mon, 16 Sep 2024 21:49:01 +0530 Subject: [PATCH 025/156] Updated review concerns. --- MAUI/DataGrid/Getting-started.md | 71 ++++++++------------------------ 1 file changed, 17 insertions(+), 54 deletions(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index 73f9b40025..617b2f3433 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -70,62 +70,38 @@ namespace GettingStarted ## Step 4: Add a Basic DataGrid -### XAML Implementation - -Open `MainPage.xaml` and add the `SfDataGrid` control within the `` tag: +1. Import the control namespace `Syncfusion.Maui.DataGrid` in XAML or C# code. +2. Initialize the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) control. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} - - - - - - + + + {% endhighlight %} -{% endtabs %} - -N> Ensure the `xmlns:dataGrid` namespace reference is correctly defined. - -### C# Implementation - -You can also configure the DataGrid programmatically in `MainPage.xaml.cs`: - -{% tabs %} {% highlight c# tabtitle="MainPage.xaml.cs" %} using Syncfusion.Maui.DataGrid; +. . . -namespace YourAppNamespace +public partial class MainPage : ContentPage { - public partial class MainPage : ContentPage + public MainPage() { - public MainPage() - { - InitializeComponent(); - - var dataGrid = new SfDataGrid - { - AutoGenerateColumns = true - }; - - // Set the data grid as the content of the page - this.Content = dataGrid; - } + InitializeComponent(); + SfDataGrid dataGrid = new SfDataGrid(); + this.Content = dataGrid; } } {% endhighlight %} {% endtabs %} -N> Maintain consistent instance names across both XAML and C#. For example, use `dataGrid` consistently in both XAML and C#. - ## Step 5: Define the View Model ### Data Model @@ -287,10 +263,8 @@ By default, the SfDataGrid automatically creates columns for all the properties The columns can be manually defined by setting the `SfDataGrid.AutoGenerateColumnsMode` property to 'None' and by adding the [DataGridColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html) objects to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.ColumnCollection.html) collection. This can be done from both XAML and code. The following code example illustrates this: -### XAML Implementation - {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} +{% highlight xaml %} {% endhighlight %} -{% endtabs %} - -### C# Implementation - -{% tabs %} -{% highlight c# tabtitle="MainPage.xaml.cs" %} +{% highlight c# %} dataGrid.AutoGenerateColumnsMode = AutoGenerateColumnsMode.None; DataGridTextColumn orderIdColumn = new DataGridTextColumn (); @@ -377,10 +346,8 @@ The SfDataGrid can be loaded with specific heights and widths inside different l The following code example illustrates how this can be done: -### XAML Implementation - {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} +{% highlight xaml %} {% endhighlight %} -{% endtabs %} -### C# Implementation - -{% tabs %} -{% highlight c# tabtitle="MainPage.xaml.cs" %} +{% highlight c# %} public MainPage() { InitializeComponent(); From ac95b5b03364dcf3a8e123c1ccd8c4c80704024f Mon Sep 17 00:00:00 2001 From: Arunachalam3641 Date: Mon, 16 Sep 2024 21:52:19 +0530 Subject: [PATCH 026/156] Updated NavigationDrawer's and TabView's Getting-Started.md --- MAUI/NavigationDrawer/Getting-Started.md | 91 ++++----- MAUI/TabView/Getting-Started.md | 230 +++++++++++++++-------- 2 files changed, 202 insertions(+), 119 deletions(-) diff --git a/MAUI/NavigationDrawer/Getting-Started.md b/MAUI/NavigationDrawer/Getting-Started.md index 32d12b5d17..f24113c51c 100644 --- a/MAUI/NavigationDrawer/Getting-Started.md +++ b/MAUI/NavigationDrawer/Getting-Started.md @@ -7,17 +7,32 @@ control: NavigationDrawer documentation: ug --- -# Getting Started with .NET MAUI Navigation Drawer (SfNavigationDrawer) +# Getting Started with .NET MAUI Navigation Drawer -This section explains how to add the [.NET MAUI NavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) control. This section covers only the basic features needed to get started with Syncfusion .NET MAUI NavigationDrawer. +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 Tab View to your project. -## Adding a .NET MAUI SfNavigationDrawer reference +## Prerequisites -Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [.NET MAUI NavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.NavigationDrawer](https://www.nuget.org/packages/Syncfusion.Maui.NavigationDrawer) and then install it. +Before proceeding, ensure the following are set up: -## Handler registration +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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). - In the MauiProgram.cs file, register the handler for Syncfusion core. +## Step 1: Create a New MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to **File > New > Project,** then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI NavigationDrawer 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 + +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; @@ -49,54 +64,46 @@ namespace NavigationDrawerSample {% endhighlight %} -## Create a Simple .NET MAUI NavigationDrawer - -The .NET MAUI NavigationDrawer control is configured entirely in C# code or by using XAML markup. The following steps explain how to create a [.NET MAUI NavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) (SfNavigationDrawer) and configure its elements: - -### Adding the .NET MAUI NavigationDrawer control - -Step 1: Add the NuGet to the project as discussed in the above reference section. - -Step 2: Add the namespace as shown in the following code sample: - -{% tabs %} - -{% highlight xaml %} - - xmlns:navigationdrawer="clr-namespace:Syncfusion.Maui.NavigationDrawer;assembly=Syncfusion.Maui.NavigationDrawer" - -{% endhighlight %} - -{% highlight c# %} - - using Syncfusion.Maui.NavigationDrawer; +## Step 4: Add a Basic NavigationDrawer -{% endhighlight %} - -{% endtabs %} +1. To initialize the control, import the NavigationDrawer namespace into your code. -Step 3: Set the control to content in `ContentPage.` +2. Initialize [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) {% tabs %} {% highlight xaml %} - - + + - - - + + + + {% endhighlight %} {% highlight c# %} - -SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); -Grid grid = new Grid(); -navigationDrawer.ContentView = grid; -this.Content = navigationDrawer; + + using Syncfusion.Maui.NavigationDrawer; + namespace NavigationDrawerGettingStarted + { + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(); + Grid grid = new Grid(); + navigationDrawer.ContentView = grid; + this.Content = navigationDrawer; + } + } + } {% endhighlight %} @@ -152,7 +159,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. 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. Add the image to the `Resources/Images` folder. 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. {% tabs %} diff --git a/MAUI/TabView/Getting-Started.md b/MAUI/TabView/Getting-Started.md index 82950be39f..6e79a6a085 100644 --- a/MAUI/TabView/Getting-Started.md +++ b/MAUI/TabView/Getting-Started.md @@ -7,21 +7,36 @@ control: Tab View documentation: ug --- -# Getting Started with .NET MAUI Tab View (SfTabView) +# Getting Started with .NET MAUI Tab View -This section explains the steps required to configure the [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) control and customize its elements. +This section guides you through setting up and configuring a [Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Tab View to your project. + +## Prerequisites + +Before proceeding, ensure the following are set up: + +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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). To get start quickly with our .NET MAUI Tab View, you can check the below video. {% youtube "https://www.youtube.com/watch?v=DYJmZ3eKfsc&ab_channel=Syncfusion%2CInc" %} -## Adding a .NET MAUI Tab View reference +## Step 1: Create a New MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to **File > New > Project,** then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI TabView NuGet Package -Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.TabView](https://www.nuget.org/packages/Syncfusion.Maui.TabView/) and then install it. +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. -## Handler registration +## 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. +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; @@ -53,31 +68,42 @@ namespace TabViewMauiSample {% endhighlight %} -## Create a simple .NET MAUI Tab View +## Step 4: Add a Basic Tab View -This section explains how to create a [.NET MAUI Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) and configure it. The control can be configured entirely in C# code or by the XAML markup. +1. To initialize the control, import the TabView namespace into your code. -### Creating the project - -Create a new .NET MAUI application in Visual Studio - -### Adding a .NET MAUI Tab View control - -Step 1: Add the NuGet to the project as discussed in the above reference section. - -Step 2: Add the namespace as shown in the following code sample. +2. Initialize [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) {% tabs %} {% highlight xaml %} -xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView" + + + + + + {% endhighlight %} {% highlight C# %} using Syncfusion.Maui.TabView; +namespace TabViewGettingStarted +{ + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + tabView = new SfTabView(); + this.Content = tabView; + } + } +} {% endhighlight %} @@ -114,7 +140,7 @@ namespace TabViewMauiSample public MainPage() { InitializeComponent(); - tabView = new SfTabView(); + SfTabView tabView = new SfTabView(); this.Content = tabView; } } @@ -148,9 +174,33 @@ Tab items can be added to the control using the [Items](https://help.syncfusion. - - - + + + + + James + Richard + Michael + Alex + Clara + + + + + + + + + + + + @@ -179,9 +229,36 @@ namespace TabViewMauiSample { InitializeComponent (); var tabView = new SfTabView(); - Grid allContactsGrid = new Grid { BackgroundColor = Color.Red }; - Grid favoritesGrid = new Grid { BackgroundColor = Color.Green }; - Grid contactsGrid = new Grid { BackgroundColor = Color.Blue }; + Grid allContactsGrid = new Grid { BackgroundColor = Colors.Red }; + var favorites = new ListView + { + RowHeight = 50, + ItemsSource = new string[] { "James", "Richard", "Michael", "Alex", "Clara" }, + ItemTemplate = new DataTemplate(() => + { + var grid = new Grid + { + Margin = new Thickness(10, 5) + }; + + var label = new Label + { + VerticalOptions = LayoutOptions.Start, + HorizontalOptions = LayoutOptions.Start, + TextColor = Color.FromArgb("#666666"), + FontSize = 16 + }; + label.SetBinding(Label.TextProperty, "."); + + grid.Children.Add(label); + + return new ViewCell + { + View = grid + }; + }) + }; + Grid contactsGrid = new Grid { BackgroundColor = Colors.Blue }; var tabItems = new TabItemCollection { new SfTabItem() @@ -192,7 +269,7 @@ namespace TabViewMauiSample new SfTabItem() { Header = "Favorites", - Content = favoritesGrid + Content = favorites }, new SfTabItem() { @@ -227,8 +304,8 @@ Create a model class using the TabItems collection property that is initialized {% highlight C# %} - public class Model: INotifyPropertyChanged - { +public class Model: INotifyPropertyChanged +{ public event PropertyChangedEventHandler PropertyChanged; @@ -260,8 +337,8 @@ Create a model class using the TabItems collection property that is initialized {% highlight C# %} - public class TabItemsSourceViewModel:INotifyPropertyChanged - { +public class TabItemsSourceViewModel:INotifyPropertyChanged +{ public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string propertyName) @@ -281,19 +358,19 @@ Create a model class using the TabItems collection property that is initialized OnPropertyChanged("TabItems"); } } - public TabItemsSourceViewModel() - { - TabItems = new ObservableCollection(); - TabItems.Add(new Model() { Name = "Alexandar" }); - TabItems.Add(new Model() { Name = "Gabriella" }); - TabItems.Add(new Model() { Name = "Clara"}); - TabItems.Add(new Model() { Name = "Tye" }); - TabItems.Add(new Model() { Name = "Nora" }); - TabItems.Add(new Model() { Name = "Sebastian" }); - - } + public TabItemsSourceViewModel() + { + TabItems = new ObservableCollection(); + TabItems.Add(new Model() { Name = "Alexandar" }); + TabItems.Add(new Model() { Name = "Gabriella" }); + TabItems.Add(new Model() { Name = "Clara"}); + TabItems.Add(new Model() { Name = "Tye" }); + TabItems.Add(new Model() { Name = "Nora" }); + TabItems.Add(new Model() { Name = "Sebastian" }); + + } - } +} {% endhighlight %} @@ -313,10 +390,10 @@ The following code example binds the collection to the `ItemsSource` property of BackgroundColor="{DynamicResource SecondaryColor}" > - - - - + + + + @@ -329,8 +406,8 @@ using Syncfusion.Maui.TabView; namespace ItemTemplateSample; - public partial class MainPage : ContentPage - { +public partial class MainPage : ContentPage +{ TabItemsSourceViewModel model; SfTabView tabView; public MainPage() @@ -342,8 +419,7 @@ namespace ItemTemplateSample; tabView.ItemsSource = model.TabItems; this.Content = tabView; } - - } +} {% endhighlight %} @@ -371,8 +447,8 @@ By defining the `HeaderItemTemplate` of the `SfTabView`, a custom user interface namespace ItemTemplateSample; - public partial class MainPage : ContentPage - { +public partial class MainPage : ContentPage +{ TabItemsSourceViewModel model; SfTabView tabView; @@ -392,7 +468,7 @@ namespace ItemTemplateSample; }); this.Content = tabView; } - } +} {% endhighlight %} @@ -423,36 +499,36 @@ By defining the `ContentItemTemplate` of the `SfTabView`, a custom user interfac {% highlight C# %} - namespace ItemTemplateSample; +namespace ItemTemplateSample; + +public partial class MainPage : ContentPage +{ - public partial class MainPage : ContentPage - { - TabItemsSourceViewModel model; SfTabView tabView; - public MainPage() - { - InitializeComponent(); - model = new TabItemsSourceViewModel(); - this.BindingContext = model; - tabView = new SfTabView(); - tabView.ItemsSource = model.TabItems; - tabView.HeaderItemTemplate = new DataTemplate(() => - { - var nameLabel = new Label { Padding = new Thickness("5,10,10,10")}; + public MainPage() + { + InitializeComponent(); + model = new TabItemsSourceViewModel(); + this.BindingContext = model; + tabView = new SfTabView(); + tabView.ItemsSource = model.TabItems; + tabView.HeaderItemTemplate = new DataTemplate(() => + { + var nameLabel = new Label { Padding = new Thickness("5,10,10,10")}; nameLabel.SetBinding(Label.TextProperty, "Name"); - - return nameLabel; - }); + + return nameLabel; + }); tabView.ContentItemTemplate = new DataTemplate(() => - { - var nameLabel = new Label { TextColor=Colors.Black }; - nameLabel.SetBinding(Label.TextProperty, "Name"); - return nameLabel; - }); - this.Content = tabView; + { + var nameLabel = new Label { TextColor=Colors.Black }; + nameLabel.SetBinding(Label.TextProperty, "Name"); + return nameLabel; + }); + this.Content = tabView; } - } +} {% endhighlight %} From 67d675aef04e276153415b98a25f2dec74f1fbe7 Mon Sep 17 00:00:00 2001 From: Arunachalam3641 Date: Mon, 16 Sep 2024 21:58:44 +0530 Subject: [PATCH 027/156] Added changes. --- MAUI/TabView/Getting-Started.md | 43 +-------------------------------- 1 file changed, 1 insertion(+), 42 deletions(-) diff --git a/MAUI/TabView/Getting-Started.md b/MAUI/TabView/Getting-Started.md index 6e79a6a085..5e728a895c 100644 --- a/MAUI/TabView/Getting-Started.md +++ b/MAUI/TabView/Getting-Started.md @@ -99,7 +99,7 @@ namespace TabViewGettingStarted public MainPage() { InitializeComponent(); - tabView = new SfTabView(); + SfTabView tabView = new SfTabView(); this.Content = tabView; } } @@ -109,47 +109,6 @@ namespace TabViewGettingStarted {% endtabs %} -Step 3: Set the control to content in `ContentPage`. - -{% tabs %} - -{% highlight xaml %} - - - - - - - - -{% endhighlight %} - -{% highlight c# %} - -using Syncfusion.Maui.TabView; - -namespace TabViewMauiSample -{ - public partial class MainPage : ContentPage - { - private SfTabView tabView; - public MainPage() - { - InitializeComponent(); - SfTabView tabView = new SfTabView(); - this.Content = tabView; - } - } -} - -{% endhighlight %} - -{% endtabs %} - ## 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). From 5733fc5243a10766b9a096659736debf5847a7af Mon Sep 17 00:00:00 2001 From: Ashok Kuvaraja <60499432+ashok-kuvaraja@users.noreply.github.com> Date: Mon, 16 Sep 2024 22:22:04 +0530 Subject: [PATCH 028/156] Addressed the review corrections. --- MAUI/DataGrid/Getting-started.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/MAUI/DataGrid/Getting-started.md b/MAUI/DataGrid/Getting-started.md index 617b2f3433..953483645f 100644 --- a/MAUI/DataGrid/Getting-started.md +++ b/MAUI/DataGrid/Getting-started.md @@ -12,16 +12,16 @@ keywords : maui datagrid, maui grid, grid maui, maui gridview, grid in maui, .ne This section provides a quick overview for working with the [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html) for .NET MAUI. Follow the steps below to add a basic DataGrid to your project. +To get start quickly with .NET MAUI DataGrid, you can check on this video: + + + ## Prerequisites Before proceeding, ensure the following are in place: 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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). -To get start quickly with .NET MAUI DataGrid, you can check on this video: - - - ## Step 1: Create a New MAUI Project 1. Open Visual Studio or VS Code. From b89991108657be4372e0d462af844edb2e79761e Mon Sep 17 00:00:00 2001 From: Piruthiviraj M Date: Mon, 16 Sep 2024 22:24:11 +0530 Subject: [PATCH 029/156] resolved the content errors. --- MAUI/ListView/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/ListView/getting-started.md b/MAUI/ListView/getting-started.md index 0b12f000ac..7245afcdd4 100644 --- a/MAUI/ListView/getting-started.md +++ b/MAUI/ListView/getting-started.md @@ -35,7 +35,7 @@ Before proceeding, ensure the following are in place: ## Step 3: Add a Basic ListView - 1. To initialize the control, import the Chart namespace into your code. + 1. To initialize the control, import the ListView namespace into your code. 2. Initialize [SfListView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.html). {% tabs %} From 2f4d54ea2271d778bc9e86f6731a70c545059c43 Mon Sep 17 00:00:00 2001 From: Navaneetha Kannan Date: Mon, 16 Sep 2024 22:27:50 +0530 Subject: [PATCH 030/156] Updated the Getting Started page of the MAUI PDF viewer control. --- MAUI/PDF-Viewer/Getting-Started.md | 119 ++++++++++++++---- .../maui-pdf-viewer-getting-started.png | Bin 31039 -> 26605 bytes 2 files changed, 93 insertions(+), 26 deletions(-) diff --git a/MAUI/PDF-Viewer/Getting-Started.md b/MAUI/PDF-Viewer/Getting-Started.md index b46a4ebebd..dd926b0f0c 100644 --- a/MAUI/PDF-Viewer/Getting-Started.md +++ b/MAUI/PDF-Viewer/Getting-Started.md @@ -7,21 +7,45 @@ control: SfPdfViewer documentation: ug --- -# Getting Started with .NET MAUI PDF Viewer (SfPdfViewer) +# Getting Started with .NET MAUI PDF Viewer -This section walks you through the process of viewing or displaying a PDF document in a.NET MAUI application using the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control. +This section guides you through setting up and configuring PDF viewer in your .NET MAUI application. Follow the steps below to add the PDF viewer to your project and load a PDF document. -To get started quickly with .NET MAUI SfPdfViewer, you can check on this video: +To get started quickly, you can also check out our video tutorial below. -## Creating an application using the .NET MAUI PDF Viewer +## Prerequisites -**Step 1:** Create a new .NET MAUI application in Visual Studio. +Before proceeding, ensure the following are in place: -**Step 2:** Add the `Syncfusion.Maui.PdfViewer` nuget package reference to your project from [nuget.org](https://www.nuget.org/). +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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 3:** In the `MauiProgram.cs` file, register the Syncfusion core handler. +## Step 1: Create a New MAUI Project + +### Visual Studio + +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**. + +### Visual Studio Code + +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 PDF Viewer NuGet Package + +1. In **Solution Explorer**, right click the project and choose **Manage NuGet Packages** for Visual Studio and **Add NuGet Package** for Visual Studio Code. +2. Search for `Syncfusion.Maui.PdfViewer` and install the latest version.` +3. Ensure the necessary dependencies are installed correctly, and the project is restored. + +## Step 3: Register the Syncfusion Core Handler + +`Syncfusion.Maui.Core` is a dependency for all MAUI Syncfusion controls. This package will be automatically installed as a depdendency when `Syncfusion.Maui.PdfViewer` NuGet is installed. Register the Syncfusion core handler in the `MauiProgram.cs` file. {% tabs %} {% highlight c# tabtitle="MauiProgram.cs" hl_lines="1 17" %} @@ -50,11 +74,47 @@ namespace PdfViewerExample {% endhighlight %} {% endtabs %} -**Step 4:** Add a new folder to the project named `Assets` and add the PDF document you need to display in the PDF viewer; here, a PDF file named “PDF_Succinctly.pdf” has been used. +## Step 4: Add PDF Viewer to the Project -N>You can also load files from local storage or URLs. +Open the `MainPage.xaml` file and follow the steps below. -**Step 5:** In this example, we will be following the MVVM binding. So, create a new view model class named `PdfViewerViewModel.cs` and add the below code snippet to it. +1. Import the control namespace `Syncfusion.Maui.PdfViewer`, and then add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control inside the `` tag as follows. +2. Name the PDF viewer control as `pdfViewer`. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Step 5: Load a PDF Document + +1. From the solution explorer of the project, add a new folder to the project named `Assets` and add the PDF document you need to load in the PDF viewer. Here, a PDF document named `PDF_Succinctly.pdf` is used.` +2. In Visual Studio, right click the added PDF document and set its `Build Action` as `Embedded Resource`. In VS Code, open the `.csproj` file and add the following code snippet to embed the PDF document as a resource. + +{% tabs %} +{% highlight xml tabtitle="PdfViewerExample.csproj" %} + + + + + +{% endhighlight %} +{% endtabs %} + +3. In this example, we will load the PDF document through MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. {% tabs %} {% highlight c# tabtitle="PdfViewerViewModel.cs" %} @@ -66,50 +126,55 @@ namespace PdfViewerExample { class PdfViewerViewModel : INotifyPropertyChanged { - private Stream? m_pdfDocumentStream; + private Stream pdfDocumentStream; /// - /// An event to detect the change in the value of a property. + /// Occurs when a property value changes. /// public event PropertyChangedEventHandler? PropertyChanged; /// - /// The PDF document stream that is loaded into the instance of the PDF viewer. + /// Gets or sets the stream of the currently loaded PDF document. /// public Stream PdfDocumentStream { get { - return m_pdfDocumentStream; + return pdfDocumentStream; } set { - m_pdfDocumentStream = value; - OnPropertyChanged("PdfDocumentStream"); + pdfDocumentStream = value; + OnPropertyChanged(nameof(PdfDocumentStream)); } } /// - /// Constructor of the view model class + /// Initializes a new instance of the class. /// public PdfViewerViewModel() { - //Accessing the PDF document that is added as embedded resource as stream. - m_pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf"); + // Load the embedded PDF document stream. + pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf"); } + /// + /// Raises the event for the specified property name. + /// + /// The name of the property that changed. public void OnPropertyChanged(string name) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); } } } + {% endhighlight %} {% endtabs %} -**Step 6:** In the `MainPage.xaml`, import the control namespace `Syncfusion.Maui.PdfViewer`, and then initialize the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control and bind the `PdfDocumentStream` created to the [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) property. The following code snippet explains the same. - -N>[DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) property supports both `Stream` and `byte[]` objects. +4. Open the `MainPage.xaml` file again and add the default namespace of the created .NET MAUI project and name it as `local`. Here the default namespace of the demo sample `PdfViewerExample` is used. +5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext` of the `ContentPage`. +6. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} @@ -118,7 +183,6 @@ N>[DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer @@ -126,8 +190,7 @@ N>[DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer - + @@ -138,7 +201,11 @@ N>[DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer N> 1. While changing or opening different documents on the same page, the previously loaded document will be unloaded automatically by the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html). N> 2. And, if you are using multiple pages in your application, then make sure to unload the document from the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) while leaving the page that has it to release the memory and resources consumed by the PDF document that is loaded. The unloading of documents can be done by calling the [UnloadDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_UnloadDocument) method. -**Step 7:** Finally, run the application to obtain the following output. +## Step 6: Running the Application + +1. Select the target framework, device or emulator. +2. Press `F5` to run the application. +3. The PDF document will be loaded in the PDF viewer control as shown in the following screenshot. ![Getting started with .NET MAUI PDF Viewer](Images\Getting-Started\maui-pdf-viewer-getting-started.png) diff --git a/MAUI/PDF-Viewer/Images/Getting-Started/maui-pdf-viewer-getting-started.png b/MAUI/PDF-Viewer/Images/Getting-Started/maui-pdf-viewer-getting-started.png index 7ac668f45b373a473c418544e542be4588d6b4b5..09e45a666ef397542c4fb3050ec2c3af70a311d1 100644 GIT binary patch literal 26605 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%0Ai*k$t%IA(9S)Gt`g)7P79wm1JiaV`-mt@=wS)ZS zafhQqCI{h_V#gozFCs2l%o~bP&wdVrkOJgEgd#wwwR>HK40<5E+9E>2D1jo2)G^ae zHw&`BF@BR0DXh`{#l~)xd)A?1%S0<_{L{R=;2_GsC`4Q&A&QPM(*Cec0P9`0*J}1$e%w0(Urp%RLk0RMo2)tZ1OKH z7_`R%>9v6b6&o>zZQIOt1DKEdRVxj7hL4!<1Bddcu8)p&{EGyU=t+}3Wn2E3;N3g^ zf))wYtLAC@UbZ)cp&@-E3aLjkqRDf}%C!K1bhX~K2q8OY#XEoOiM>2%GoI$6v<>fF zL&RKEG-^H54VP^cZtdU;S77oFsRNKDQV#onVhLoIrGL$`N&WGxXUZ8knjfpm{<@tB zoxYVgU+c|Pu1UD4?hwa0*qbzvQ;;Lkx0 ztl7LP=eP!Vtw7q-$i_Bo*2jY+szMaJspq`P7=H|FK+g14cQ;8VKcT`nGOa&7G;BhU z?&tHAkBDk3j_w4X8xMh@x zt?m}ax|e1J(&S5cend2F+kSrY-;cp=5e??RUU#vo{akf}(?HhUwL_Yv7>*}FCcr-2 zcy~Oj?{{NX)Mq_1uBsjz5Skn<4krDf%73Vu%Zz_bnEZ#VSsM`x@{Cw$w*HU$+%i2! z>OpsJvUv~ey?(piShP0c5SVX3sto7{0kGP2<<=p>=ZH%~gX9}?$W03;f_#`ya+yPa zw8BJl@L~pO`nLMvv;Dg_8cw5kZ_3npjgV}H-$>X(UcF^ftQHCit!j_-;|fS7JZxU9 zBTkhnV`rW$EXF4@Lk~l(!VN!Q za?TsFRxr205E`yXQGufEeO_|#cl7Sqw!@B_O`_JF&l*GvtMN}eG81EKMUvue*&Huc zx#M|ijQ90?rTKIN6vHN>V2D>rSJ1yps4{aP-52s?+gi3z%wIO18{lV z$OuVOX70$**U_-_?`{ux{|i z#Uu9IZE>2QqjsG3qGPU~@z4{HMQ3znKaXZkZKIac1%;@GZ^bGK&`7_q9;;UQGme4} zxhl<&;v~8(rDD4a`W_>ek}RrFr&4ak^6!b_RLGiXF%!<6;&aBW$u}JG?`z%qkq!sJ z@&OLg(UFMZ64zd;k=T5RAi|kvEkC=zY+S9P!T2e%CAbF8NPW&ei?w?D@%!94T}!>n zbMP}XBjO@gu*ltjy|>ngntppOYeAc?#v_^^UoBgqmSfvTkjDX#xuC-pXvaJ-H^_sD zq`yR0LCsv*7|h@t@ZB)$Y5A1$>B%JXUCZrM^M$Gy6D@JEGVVYuO9XAkioPM~XA6ST zWJ)ISVv_I4X1Z_1Cj=dfCe9Z?EEu}VK-@B2%F;)o<-$v}wn7Z?npR457bq}m@b*@S zFi^BElGZ)ba%Iv4YLUWKT778vD0xoqwe9lyPn5d0`kKO91 z;ns#^7H)KK^tV_MLPB)@*F{sId?Rn1F6RwLwdu939+Ns(A3ya%kgu<)^XkOTSEddnoT zg{CaB6_r*#d06X+Tl7+Gs3+#`L`3_EC>1Md?4RN*$liE%NOI_0>r|P)PIwYi~w~3``G9p2Ve!(hvvLEC^PoLWIvL#9BY@Dt%-hOf}2NTgSj?#a0QKgTKp=FOqM-OUa z3w6O$ZLaXorSq|h?NK#rcDTg9qa@0s<>}7M{aCOW(v*32f0mycxSQv-za7$|Aj-Gs zKO9Y7(Z^E=Q#yg!8QT3GwkjmlGS)x$&okT8(i`zqgoOGy1w#zXtk?lS}d z3Ke-7I^CDKp4)Ir3NwWz1_D7*KknZ7!QOJ#M~Z7Wo@V7Wni2EyCn^>v&P2aA-V0PW zH2;CmEpT%B8z1Kr#+{Jjo#Yap|uUNSK~eE9KPk(9KjdQ#zbo3Q&pGwSD^ z5Vqj1-p|!#xEORxzE7}B5gUztvF`a^EGF?|poa5WZ_Q@rD$$WP#C_P~kZcuVfAWGF zbFz2B;1##dwZWX5wP*pi$e;!9NCL~XXrt0g*r_uU@T!E+_-YE7Z&bysEr>ykpz8{T zd*YLtQC+YpTp(;(3?{zROpcF-i=kF)@UGtlce6kb3ri;g?8%LS60TGx-$IH*8320c4C{jPF^OL^blI*?5o94PT5eOT_6W48(-A|)@-c%y{uhroR7oyRs* zR(T+5v+X}!x9{j3J*^e>*8&^aAA!TB(BMcg#J~c;|8H>I!cnXPme(4iW=vRG)PuYq(OX>E63vU}yTx z{2_*ExC%4z-#I$7XoWc*TM(7m^czgRz+w+OEcA5`pBSt~6T~MIESfgQcV^LpSaO7@ zJi^#v+8`hIRjX>)3T>X50ZQW9E{1i>p0=dh3PhQ$Z^)9^Z^D-P4(_W?pVwf9)B8Jt zpqxalT$rMr5n$kz8?kMsFUuOhdJ>B{HF#24YbnU*nUv$xPYlzqe?w*bnMv^BCrq;q zRrDgYNBVX9XcDE4<9oq`y6RvfK-0#fhU0z;45k&@e(`IoJ7Ai+)OZsnfaq?zv(-W7HbE^xgDVI!;ZQ^qNsu{lljOt13 zTA=y?&R3@KiMqazh+QKl2CB8XcZN1el`AjHy2k1a-qBL4wz=Wz@chQ*4m4HDc#+t5 zAx5(?|6)Kv$nR|sN$YVp^ZJ9tHJLUpA|3LD;)a}IlJC$copVO2ic!;-9b=WX^U=b+ z3?AMwOW~K+aSOV?5Ek-nZ`2Rwx4R>Doo``-v*rxBd|~Boh<^X~4(b(a!)UyGd7${bw>K6w@f~;RFsFQwq^{mOZ_Y@rvdKaB zxu{`fKw^12I^b!;$Ns89SmN_q0OaW$dyb1-+_>`wN4P)(+jw{{Y4fV{hQ+pZQ|p3N z=pAALx1e&qX~T2f#n^U~rRjy+{g!sqc_n|f$(7m#b1N$!nwr56$@Nq-^j*2XZJ6+2 z?c*l=3`TV}YFQ;X10_AXz$R%~nGXv0YR6ls{uK(7mWUw>wt>~}Kuh%`&-_W|M!oRt zt&OXvbGiKIy|M$X^VMNzUx!z_B=c~S(m~w9Ot!!wtB()WuFE9IEa6p|66Q#yO=hO2DFI1)f4>fR3uzO4^K_^eAl#~C-2L7&XuuPj6*nu!pKN{0#Ap*JSO9su&~kO-}S_03$|V2 zSM9iQt#%S7UbOG8jlH%TjGsfQAzEoFtf;2TbB$WA;xd7P*=@#9)xtM?O? zEWDjGJgHLj*l+s;C^3EPNjHBvG49zX#PmzI^ zn@D~z!VzqItS>S$utymPa?LBU!gbLzj)nvOyrP5H3?hV|)YEHhKj((N^lY#h&;{s? z9^9hvdEM%S6B>8_ea@r}q5%#zW(U7$Gv8}2z7~Wf6B%VeIDRo3Pyg9Fac7?Xjn4f9 zhZ2!21%zgc{Uq-_f`SP>kMAkl`EW*)u(Hd_NR?~=e5Kmcq>(lHwADtdDZe|c_=U|m zPbx_%;oMzwq-%6EwbC0Ro`cg;@~5IAftZI_*lYU@?p!6v>YU(HexIMya>5ee*-19g zYVU^1FPMrL`aG{oxbqJzLutd)NrDA)}c+GsI6{^NxrRcTJJbYtM*c&K;@&U-i$n` zHs~*zxFcDw^Vj?98nA~RTa!^N5C5i-)i;&6ToavBtWMUw#{cNMHhh%)+Z&Krr5SOQ z<{b=9v+K*9KbW3wMs3w}YiKrPTeq} zxIMs=UgB)yFF}P%R^fBU8qZA$_A^A1kwZ4W9#%Ms^wCyC(jS`V zFWIjb$EvGGSAWj5QLi$eKj3l=Ot%X#6gH~J!AjV~%Fg4!(?P+XbP)zYF|E}HEv&iW zk63Q1?zBZMx6X&y@=6Dd;iWVJm;E3r79;mpTn>q-m`|+B zm-GVK!eJbfal+Y)ko*81>#^0p^$M_iFJtEbYn(s@6_y|nIQ5c^rwMiAOh!{ZVpZFA zpmyG>dJnMP^R)#n?s=~S_EMdK@ny;&pOq3B8G$0g|VGZQ69{4Vvl>%C2tvAfsP~0ejdt13Cky`%1f}KHvdy;#`(S9@Yas-=2M0|KM%ErKh&>(kdoG=Ddi+ zuRz|x4PAxAfeqdh5*>sZ7Vo5c!9_-5+%-j2*xg40oe`iSiN`W&Tl@LClk^>im~aqL zPJc042HouWRG!Y@{Tp?k6p^4hai^mhRMm=piWb_?48Qi%9#MRe?s3W z(JlH#=f;?)M?87S9ne`=1`P7~VhGdYV>Aw0&87v-9GdQ(<7G4!Lc^+1?_{XLtN|_8 zcJUAMq7G^K=BNb5p=4FjyQlP~ao<>5EH~kzpQHw_pJ!KTC{4M8EoO!b25Mw~g`uyb zenEe)@98~7K`+7LGKif5Y?v~ED=aFu#zu#l=jK%nXSFf0m~)W07YWw*|B!BpBbrJU z9k<*q@|NyBcum6&JNk;#PRUxy@TJItlWXisjR;@ z?#yQkxxTx@0^*jR`o*YTSOXegF;H#9RoAqaQqEl#2g}O=AX%RV&IhfvlUMv-?XmHd zio!yJ6$^J09a}v`oB5;#(lg%*c84q@v>mmiL-w?w4YNg^v!GNck1ueMcol3B9O!c&H{G`UV*h`o@XdEqTO&3?eo2ZG&_I}cx;UElg zNe81mI&p$$9-;&<5};c%E$hRvTtPK_w9C|s_QuZ%xS|l!ikb@fSwfp?`cUd9sZ7dI zh1!l{S%pw=9d27d* z%Vv)2J$f>U^{e(Apb-K2A)Ug4#iiQt{I-Y1kElX8TbZ%9ZK!7GWLV89jx4aD% zWYHObPZ=IKAHI()@(})s@DP5ICT~WN*`fMq-0xb)jCkbfmT8S8beI_+A~n9wE;e#Pu>lX za)`}O+H{?Jl)ruoROMmT%oPC z9tiba=XEqy%EtQVjoWgz>0K4W%fmx%rXnRyCTY}sG594-4&N{)SDI8d73Z~+ayfH! z;grEDM(s}?9Pz^|k8OAL@Jh2VYYE8$=YnQ^n^9p0r&{IN#=X11JBxIKrRM(bv%ebT zR7(|ZLKOeTOXFYSfS{! zI+JI!fdj@NA{BN7(?xBl{Rde6so~?!8+-A={jqrHLBSQW{NMdeeZ;Ngu~Oy#=na&h z)Va)89KYl1-BK1>gC|PTJ#2u@bb7vk#OG6vR zP~qkORo~0D95Xcfc6|QZTvqdLe4g&@t3Nvx@X-Z`%R4tP#gwO2sRUKvV$h*vMRUgl z4)sJ`npz!u*0g5_0;Lo0C;9vK1GKj1qb%N->%LxsQAShXHOxdSa(*MI9EF+WwIkDI z8A18jsqq?%wyTm}+HYT2Dn>TFu5|J3e$pOAI!Vy-CPAn+tFSoPh+H ziyVf`i!ivSn$+Pj=8anEo(#N?&lAWrqVSn)ED7dI{TQLYfO)D>OBI0l2L27JQ%9}I zidcB0!6wo7@~N|DTDL+wXuYcRm69Fl=iJ{r)i^x>qPlWFjDzKZiO&=7UHDEOQm1;u zHuTScOg>%Ob%321ehrWH3A=9T>%9v0{R#lG%Z$$Xd*|TS=NOPw2qeR~tF;ADYwEE~ z(GnrO#R`*q>{*f=TVVkmQDElQMZe9tux-f6$8B8b(bQeRy{(&4*v6xp zqQ<4N04Cu|7=Du~-=WP(_^xhSyUejCcdpInjR zC|MkIy~TRRV34T)b8h|qT2A4Cxp|jD+0@n_Dw9V~4UC6teR4ljL9@mu9HPw3jq#4B zqs)i-#GQND4;njN9$&Q1jT$&^ZoO-r$ky0{71WL&ztm?U0iH=7745#q_AeC7rb4DZ zdLPO&7mQ6Aj0rI1%nZHy)MKg&Ca=7D5OE+af300vZDFNj0Y*Wsq~$X!+h5+Lm}g}c z@VEsV$bH0H#SZUi<2R{kggtU t<%sYE{OfM|zta}<|H3@=#mN)O?|U(KSGVICWSik Date: Mon, 16 Sep 2024 22:32:13 +0530 Subject: [PATCH 031/156] Added the review changes. --- MAUI/Busy-Indicator/Getting-Started.md | 49 +++++++++++++++--------- MAUI/Effects-View/Getting-Started.md | 39 ++++++++++++------- MAUI/NavigationDrawer/Getting-Started.md | 18 +++++---- MAUI/TabView/Getting-Started.md | 8 ++-- 4 files changed, 72 insertions(+), 42 deletions(-) diff --git a/MAUI/Busy-Indicator/Getting-Started.md b/MAUI/Busy-Indicator/Getting-Started.md index 9e833b8787..ca535ca33c 100644 --- a/MAUI/Busy-Indicator/Getting-Started.md +++ b/MAUI/Busy-Indicator/Getting-Started.md @@ -8,23 +8,39 @@ 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 (SfBusyIndicator) +# Getting Started with .NET MAUI Busy Indicator -## Getting started with .NET MAUI Busy Indicator +This section guides you through setting up and configuring a +[.NET MAUI 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 +[.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) +to your project. -This section explains the steps to configure the [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) control in a real-time scenario and provides a walk-through on some of the customization features available in the control. - -To get start quickly with our .NET MAUI Busy Indicator, you can check the below video. +To get start quickly with our .NET MAUI BusyIndicator, you can check the below video. {% youtube "https://www.youtube.com/watch?v=EY1y5PUBkCw" %} -## Adding a .NET MAUI Busy Indicator reference +## Prerequisites +Before proceeding, ensure the following are set up: + +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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 MAUI Project + +1. Launch Visual Studio or VS Code. +2. Navigate to **File > New > Project,** then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. + +## Step 2: Install the Syncfusion MAUI Core NuGet Package -Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and then install it. +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. -## Handler registration +## Step 3: Handler registration - In the MauiProgram.cs file, register the handler for Syncfusion core. +In the MauiProgram.cs file, register the handler for Syncfusion core. {% highlight c# hl_lines="6 17" %} using Microsoft.Maui; @@ -56,15 +72,13 @@ namespace BusyIndicatorSample {% endhighlight %} -## Create a Simple .NET MAUI Busy Indicator +## Step 4: Create a Simple .NET MAUI Busy Indicator The [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) control is configured entirely in C# code or by using XAML markup. The following steps explain how to create a [.NET MAUI Busy Indicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1) (SfBusyIndicator) and configure its elements. ### Adding the .NET MAUI Busy Indicator control -Step 1: Add the NuGet to the project as discussed in the above reference section. - -Step 2: Add the namespace as shown in the following code sample, to initialize the .NET MAUI Busy Indicator. +Add the namespace as shown in the following code sample. {% tabs %} @@ -80,14 +94,13 @@ Step 2: Add the namespace as shown in the following code sample, to initialize t {% endhighlight %} -{% endtabs %} - -Step 3: Set the .NET MAUI Busy Indicator control as the content in the `ContentPage.` +{% endtabs %}` {% tabs %} -{% highlight xaml %} +Open the `MainPage.xaml` file, and define the `SfBusyIndicator` control with a standardized instance name as follows: +{% highlight xaml %} New > Project,** then select the .NET MAUI App template. +3. Name the project and choose a location, then click Create. -Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [SfEffectsView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsView.html?tabs=tabid-1) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and then install it. +## Step 2: Install the Syncfusion MAUI Core NuGet Package -## Handler registration +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: Handler registration In the MauiProgram.cs file, register the handler for Syncfusion core. @@ -52,15 +68,13 @@ namespace EffectsViewMauiSample {% endhighlight %} -## Create a simple Effects View +## Step 4: Create a simple Effects View This section explains how to create a Effects View and configure it. The control can be configured entirely in C# code or by the XAML markup. ### Adding a SfEffectsView control -Step 1: Add the NuGet to the project as discussed in the above reference section. - -Step 2: Add the namespace as shown in the following code sample. +Add the namespace as shown in the following code sample. {% tabs %} @@ -78,7 +92,7 @@ Step 2: Add the namespace as shown in the following code sample. {% endtabs %} -Step 3: Set the control to content in `ContentPage`. +Open the `MainPage.xaml` file and define the `SfEffectsView` control using consistent instance names: {% tabs %} @@ -88,7 +102,6 @@ Step 3: Set the control to content in `ContentPage`. - {% endhighlight %} {% highlight c# %} diff --git a/MAUI/NavigationDrawer/Getting-Started.md b/MAUI/NavigationDrawer/Getting-Started.md index f24113c51c..2a6c24779a 100644 --- a/MAUI/NavigationDrawer/Getting-Started.md +++ b/MAUI/NavigationDrawer/Getting-Started.md @@ -9,7 +9,11 @@ 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 Tab View to your project. +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. + +To get start quickly with our .NET MAUI NavigationDrawer, you can check the below video. + +{% youtube "https://www.youtube.com/watch?v=fhVe129Hc6o" %} ## Prerequisites @@ -76,12 +80,12 @@ namespace NavigationDrawerSample - - + xmlns:navigationDrawer="clr-namespace:Syncfusion.Maui.NavigationDrawer;assembly=Syncfusion.Maui.NavigationDrawer"> + + - - + + @@ -159,7 +163,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. Add the image to the `Resources/Images` folder. 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. 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. {% tabs %} diff --git a/MAUI/TabView/Getting-Started.md b/MAUI/TabView/Getting-Started.md index 5e728a895c..99bd9b1825 100644 --- a/MAUI/TabView/Getting-Started.md +++ b/MAUI/TabView/Getting-Started.md @@ -11,6 +11,10 @@ documentation: ug This section guides you through setting up and configuring a [Tab View](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) in your .NET MAUI application. Follow the steps below to add a basic Tab View to your project. +To get start quickly with our .NET MAUI Tab View, you can check the below video. + +{% youtube "https://www.youtube.com/watch?v=DYJmZ3eKfsc&ab_channel=Syncfusion%2CInc" %} + ## Prerequisites Before proceeding, ensure the following are set up: @@ -18,10 +22,6 @@ Before proceeding, ensure the following are set up: 1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. 2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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). -To get start quickly with our .NET MAUI Tab View, you can check the below video. - -{% youtube "https://www.youtube.com/watch?v=DYJmZ3eKfsc&ab_channel=Syncfusion%2CInc" %} - ## Step 1: Create a New MAUI Project 1. Launch Visual Studio or VS Code. From 56af160687bf5be39eeb32d1f6d97ed3dd5706d7 Mon Sep 17 00:00:00 2001 From: Piruthiviraj M Date: Mon, 16 Sep 2024 22:36:11 +0530 Subject: [PATCH 032/156] Resolved CI errors. --- MAUI/ListView/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/ListView/getting-started.md b/MAUI/ListView/getting-started.md index 7245afcdd4..ab914220c1 100644 --- a/MAUI/ListView/getting-started.md +++ b/MAUI/ListView/getting-started.md @@ -23,7 +23,7 @@ Before proceeding, ensure the following are in place: ## Step 1: Create a .NET MAUI project - 1. Open Visual studio or VS Code. + 1. Open Visual Studio or VS Code. 2. Go to File > New > Project and choose the .NET MAUI App template. 3. Name the project and choose a location, then click Create. From b78d4ef2ab6eddcaeef73c427ad682068028b37f Mon Sep 17 00:00:00 2001 From: Naveenkumar S Date: Mon, 16 Sep 2024 22:38:39 +0530 Subject: [PATCH 033/156] updated badge view getting started --- MAUI/Badge-View/Getting-Started.md | 133 +++++++++++++++-------------- 1 file changed, 71 insertions(+), 62 deletions(-) diff --git a/MAUI/Badge-View/Getting-Started.md b/MAUI/Badge-View/Getting-Started.md index 751bd1773a..05e0a485ae 100644 --- a/MAUI/Badge-View/Getting-Started.md +++ b/MAUI/Badge-View/Getting-Started.md @@ -7,21 +7,35 @@ control: Badge View documentation: ug --- -# Getting Started with .NET MAUI Badge View (SfBadgeView) +# Getting Started with .NET MAUI Badge View -This section explains the steps required to configure the .NET MAUI Badge View control for .NET MAUI Badge Notifications and customize its elements. +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. To get start quickly with our .NET MAUI Badge View, you can check the below video. {% youtube "https://www.youtube.com/watch?v=wlh2eMPYZY0" %} -## Adding a SfBadgeView reference +## Prerequisites -The Syncfusion .NET MAUI controls are available in [Nuget.org](https://www.nuget.org/). To add [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1) to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and then install it. +Before proceeding, ensure the following are set up: +1. Install [.NET 7 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later is installed. +1. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or VS Code. For VS Code users, ensure that the .NET MAUI workload 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) -## Handler registration +## Step 1: Create a New MAUI Project - In the MauiProgram.cs file, register the handler for Syncfusion core. +1. Launch Visual Studio or VS Code. +1. Navigate to **File > New > Project,** then select the **.NET MAUI App** template. +1. Name the project and choose a location, then 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. Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) and install the latest version. +1. Ensure the necessary dependencies are installed correctly, and the project is restored. + +## Step 3: Register the handler + +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; @@ -55,52 +69,47 @@ namespace BadgeViewMauiSample {% endhighlight %} -## Adding a namespace +## Step - 4: Add a Basic Badge View -Add the following namespace to add .NET MAUI Badge Notifications. +1. To initialize the control, import the Core namespace into your code. +1. Initialize [SfBadgeView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBadgeView.html?tabs=tabid-1). {% tabs %} {% highlight xaml %} - xmlns:badge="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" + + + + + {% endhighlight %} -{% highlight C# %} - - using Syncfusion.Maui.Core; - -{% endhighlight %} - -{% endtabs %} - -## Initializing a badge view - -Create an instance for the Badge View control, and add it as content. - -{% tabs %} - -{% highlight xaml %} - - - - {% endhighlight %} -{% highlight c# %} - -//Initializing the badge view. +{% highlight C# %} -SfBadgeView sfBadgeView = new SfBadgeView(); + using Syncfusion.Maui.Core; + namespace BadgeViewGettingStarted + { + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + SfBadgeView badgeView = new SfBadgeView(); + } + } + } -this.Content = sfBadgeView; - {% endhighlight %} {% endtabs %} -## Adding a badge notification text +## Step -5: 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. @@ -108,54 +117,54 @@ Add text to Badge View using the [BadgeText](https://help.syncfusion.com/cr/maui {% highlight xaml %} - - - + + + {% endhighlight %} {% highlight c# %} -SfBadgeView sfBadgeView = new SfBadgeView(); +SfBadgeView badgeView = new SfBadgeView(); //Adding text to the badge view. -sfBadgeView.BadgeText = "20"; +badgeView.BadgeText = "20"; -this.Content = sfBadgeView; +this.Content = badgeView; {% endhighlight %} {% endtabs %} -## Adding a content +## Step - 6: 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. +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. {% tabs %} {% highlight xaml %} - - + +