EXT-181101- UG changes for MAUI Visual Studio Code

Extension/NETMAUI-Extension/Visual-Studio-Code/code-snippet.md

@@ -0,0 +1,53 @@
+---
+layout: post
+title: Code Snippets - .NET MAUI Extension Visual Studio Code | Syncfusion
+description: Learn here all about how to use code snippet utility of Syncfusion .NET MAUI Extension for Visual Studio Code and much more.
+platform: MAUI
+component: Common
+documentation: ug
+---
+
+# Add Syncfusion .NET MAUI component in the .NET MAUI application
+
+The Syncfusion .NET MAUI code sample utility for Visual Studio Code provides sample for easily inserting Syncfusion .NET MAUI components with various features into the .NET MAUI Application's XAML code editor.
+
+N> The Syncfusion .NET MAUI code sample is available from Essential Studio 2024 Volume 1 (`v25.1.35`) onwards.
+
+## Add a Syncfusion .NET MAUI component
+
+The following instructions outline the process of using the Syncfusion .NET MAUI code snippet in your .NET MAUI application.
+
+1.	In Visual Studio Code, either open an existing .NET MAUI application or create a new .NET MAUI Application.
+
+2.	Open the XAML file you require and position the cursor where you want to add the Syncfusion component.
+
+3.	To access Syncfusion .NET MAUI components with various features, type the **sf** word in the specified format.
+
+```
+sf<Syncfusion component name>-<Syncfusion component feature>
+For Example, sf-datagrid-grouping
+```
+
+4.	Select the desired Syncfusion component and press the **Enter** or **Tab** key to add the Syncfusion .NET MAUI component to the XAML file. 
+
+      ![Code Snippet](images/MAUI_CodeSnippets.gif)
+
+5.	After adding the Syncfusion .NET MAUI component to the XAML file, We've included instructions in the **TODO** section for your reference. This will guide you in determining whether to add the the View Model file or if only add namespace and NuGet entries to run the Syncfusion components.
+
+     ![Comment](images/Comment.png)
+
+6.	You can also find a Syncfusion help link at the top of the added sample to learn more about the new Syncfusion .NET MAUI component feature.
+
+     ![Help](images/Help.png)
+
+## Configure .NET MAUI application with Syncfusion
+
+The Syncfusion .NET MAUI snippet inserts code into the XAML file. However, you need to configure the .NET MAUI project with Syncfusion by installing the Syncfusion .NET MAUI NuGet package and adding the appropriate namespace. To configure, follow these steps:
+
+1.	Open the .NET MAUI application file and manually add the necessary Syncfusion .NET MAUI individual NuGet package(s) as a package reference for the Syncfusion .NET MAUI components. We've included a commented code sample indicating the corresponding NuGet package entry for each component. Copy the NuGet package entry and paste it into your .NET MAUI project file. This NuGet package will be automatically restored during the build or save process of the project.
+
+     ![NuGet Package](images/NuGetEntry.gif)
+
+2.	To integrate Syncfusion components into your application, go to the XAML file and insert the necessary Syncfusion .NET MAUI namespace entries. We've included a commented code sample indicating the corresponding namespace entry for each component. Copy the namespace entry and paste it into your XAML file.
+
+    ![Namespace](images/NamespaceEntry.gif)

Extension/NETMAUI-Extension/Visual-Studio-Code/create-project.md

@@ -0,0 +1,49 @@
+---
+layout: post
+title: Create Projects using Project Templates via Extensions | Syncfusion
+description: Learn here about how to create syncfusion .NET MAUI application using Syncfusion .NET MAUI Extension for Visual Studio Code.
+platform: MAUI
+component: Common
+documentation: ug
+---
+
+# Creating a Syncfusion .NET MAUI application
+
+Syncfusion offers the .NET MAUI Project Template for building .NET MAUI applications using Syncfusion components in Visual Studio Code. This template includes all the necessary Syncfusion components, NuGet references, namespaces, and code snippets required for developing .NET MAUI applications with Syncfusion. The **.NET MAUI Project Template** comes with a project wizard to streamline the application creation process using Syncfusion components.
+
+N> Syncfusion Visual Studio Code project templates now support .NET MAUI project templates starting from `v25.1.35`.
+
+The following steps below will assist you to create your **Syncfusion .NET MAUI Application** through **Visual Studio Code:**
+
+1.	To create a Syncfusion .NET MAUI application in Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. Then, search for **Syncfusion** in the Visual Studio Code palette to access the templates provided by Syncfusion.
+
+    ![CreateProjectPalette](images/CreateProjectPalette.png)
+
+2.	Select **Syncfusion .NET MAUI Template Studio: Launch** and press **Enter**. This will launch the Template Studio wizard for configuring the Syncfusion .NET MAUI app. Enter the Project Name and Project Path as required.
+
+    ![CreateProject](images/TemplateStudioWizard.png)
+
+3.	To select a control, click on the **Next** button or the **Controls** tab. You can then add the following Syncfusion .NET MAUI components to the application. Choose the required Syncfusion .NET MAUI components.
+
+    ![CreateProject](images/MAUICreateProject.gif)
+
+    Select the required control(s) by clicking on the corresponding checkbox.
+
+    To unselect a control that has been added, click on the checkbox of the selected control.
+
+    N> **Note:** Select at least one control to enable the **Create** button.
+
+    **Project details section**
+
+    In the Project Details section, you can modify the Project Name, Project Path, and their configurations. You can also choose the desired .NET Core Version (.NET 7.0 or .NET 8.0).
+
+4.	Click the **Create** button to generate the Syncfusion .NET MAUI application. The created application includes the necessary Syncfusion NuGet packages and rendering code for the selected Syncfusion components.
+
+5.  You can run the application to see the Syncfusion components. Click **F5** or go to **Run>Start Debugging**.
+
+       ![Debug](images/Debug.png)
+
+6.	The Syncfusion .NET MAUI application is configured with the latest Syncfusion .NET MAUI NuGet packages version, namespaces, and component rendering code for Syncfusion components.
+
+7.	If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion license key to your application since Syncfusion introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx?_ga=2.11237684.1233358434.1587355730-230058891.1567654773) post for understanding the licensing changes introduced in Essential Studio.
+

Extension/NETMAUI-Extension/Visual-Studio-Code/download-and-installation.md

@@ -0,0 +1,75 @@
+---
+layout: post
+title: Download and Installation in .NET MAUI Extension | Syncfusion
+description: Learn here more about how to download and install in the Syncfusion .NET MAUI Extension for Visual Studio Code and much more.
+platform: MAUI
+component: Common
+documentation: ug
+---
+
+# Download and Installation
+Syncfusion publishes the Visual Studio Code extension on the [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions). You can install it directly from Visual Studio Code or download and install it from the Visual Studio Code marketplace.
+
+**Prerequisites**
+The following software prerequisites must be installed to install the Syncfusion .NET MAUI extension, as well as for creating and adding snippets in Syncfusion .NET MAUI applications.
+
+* [Visual Studio Code 1.87.1 or later](https://code.visualstudio.com/download)
+
+* [C# Extension ](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) 
+
+* [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit)
+
+## Install through the Visual Studio Code Extensions
+The following instructions outline the process of installing the Syncfusion .NET MAUI extensions from Visual Studio Code Extensions.
+
+1.	Open Visual Studio Code.
+
+2.	Navigate to **View > Extensions**, and the Manage Extensions option will appear on the left side of the window.
+
+3.	By entering the keyword **Syncfusion .NET MAUI** in the search box, you can find the Syncfusion .NET MAUI Visual Studio Code extension in the Visual Studio Code Marketplace.
+
+4.	Install the **.NET MAUI VSCode Extensions - Syncfusion** extension by clicking the Install button.
+
+5.	After installation, reload Visual Studio Code using the **Reload Window** command in the Visual Studio Code palette. You can access the command palette by pressing **Ctrl+Shift+P** and searching for Reload Window among the Visual Studio Code commands.
+
+    ![Reload-Window](images/Reload-Window.png)
+
+6.	You can now create a new Syncfusion .NET MAUI application using the Syncfusion .NET MAUI extensions from the Visual Studio Code Palette. Find the **Syncfusion .NET MAUI Template Studio: Launch** option among the Visual Studio Code commands to open the Syncfusion .NET MAUI Template Studio wizard.
+
+    ![CreateProjectPalette](images/CreateProjectPalette.png)
+
+## Install from the Visual Studio Code Marketplace
+
+The following instructions outline the process of downloading and installing Syncfusion .NET MAUI applications from the Visual Studio Code Marketplace.
+
+1.	Open [Syncfusion .NET MAUI Code Extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions) in Visual Studio Code Marketplace.
+
+2.	Select **Install** from the Visual Studio Code Marketplace. A popup window appears in your browser with information like **Open Visual Studio Code**. Clicking **Open Visual Studio Code** will launch the Syncfusion .NET MAUI Extension in Visual Studio Code.
+
+3.	Install the **.NET MAUI VSCode Extensions - Syncfusion** extension by clicking the Install button.
+
+4.	After installation, reload Visual Studio Code by executing the **Reload Window** command from the Visual Studio Code palette. Access the command palette by pressing **Ctrl+Shift+P** and locating the Reload Window command among the Visual Studio Code commands.
+
+    ![Reload-Window](images/Reload-Window.png)
+5.	You can now initiate the creation of a new Syncfusion .NET MAUI application using the Syncfusion .NET MAUI extensions from the Visual Studio Code Palette. Locate the **Syncfusion .NET MAUI Template Studio: Launch** option among the Visual Studio Code commands to open the Syncfusion .NET MAUI Template Studio wizard.
+
+    ![CreateProjectPalette](images/CreateProjectPalette.png)
+
+## Manually Installing an Extension in Visual Studio Code
+
+The following instructions detail the manual installation process of the Syncfusion .NET MAUI extensions in Visual Studio Code.
+
+1.	To install the extension manually, download the **SyncfusionInc..NET-MAUI-VSCode-Extensions.vsix** file from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions). Then, install it from a local file within VS Code.
+
+2.	In VS Code, navigate to the Extensions view by clicking on the Extensions icon located in the Activity Bar.
+
+    ![ExtensionIcon](images/ExtensionIcon.png)
+
+3.	Click on the three dots (ellipsis) located in the top-right corner, then select "Install from VSIX."
+
+    ![InstallVsix](images/InstallVsix.png)
+
+4.	Navigate to the location where you downloaded the SyncfusionInc..NET-MAUI-VSCode-Extensions.vsix file, then select and install it.
+
+    ![DownloadVsix](images/DownloadVsix.png)
+

Extension/NETMAUI-Extension/Visual-Studio-Code/overview.md

@@ -0,0 +1,18 @@
+---
+layout: post
+title: Syncfusion .NET MAUI Extension for Visual Studio Code | Syncfusion
+description: Learn here all about introduction on Syncfusion .NET MAUI extension for Visual Studio Code which made integration made ease.
+platform: MAUI
+component: Common
+documentation: ug
+---
+
+# Overview of .NET MAUI Extension for Visual Studio Code
+
+The [Syncfusion .NET MAUI](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions) Extension for Visual Studio Code simplifies the use of Syncfusion .NET MAUI components by configuring the required Syncfusion .NET MAUI NuGet packages. This extension streamlines development by providing developers with easy access to the powerful features and functionalities of Syncfusion .NET MAUI components, saving time and effort.
+
+The Syncfusion .NET MAUI Extension offers the following support in Visual Studio Code: 
+
+**Project Template:** Creates Syncfusion .NET MAUI applications with the necessary Syncfusion components and configurations for development.
+
+**Code Snippet:** Adds a Syncfusion .NET MAUI component with multiple features into the .NET MAUI Application's XAML code editor.

Extension/NETMAUI-Extension/Syncfusion-Notifications.md → Extension/NETMAUI-Extension/Visual-Studio/Syncfusion-Notifications.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Notifications | Syncfusion
+title: Notifications of .NET MAUI Extension | Syncfusion
 description: For displaying the notifications about trial and newer version update information for Syncfusion applications.
 platform: extension
 control: Syncfusion Extensions

Extension/NETMAUI-Extension/Toolbox-Control.md → Extension/NETMAUI-Extension/Visual-Studio/Toolbox-Control.md

@@ -2,7 +2,7 @@
 layout: post
 title: Toolbox Control | .NET MAUI | Syncfusion
 description: Syncfusion .NET MAUI Toolbox to add the Syncfusion .NET MAUI (.NET MAUI.Forms) controls in your project without coding in the Visual Studio designer.
-platform: Extension
+platform: extension
 control: Syncfusion Extensions
 documentation: ug
 ---

Extension/NETMAUI-Extension/download-and-installation.md → Extension/NETMAUI-Extension/Visual-Studio/download-and-installation.md

@@ -18,9 +18,9 @@ Syncfusion publishes the Visual Studio extension in the below Visual Studio mark
 
 The following software prerequisites must be installed to install the Syncfusion .NET MAUI extension, as well as for creating, adding snippet in Syncfusion .NET MAUI applications.
 
-* [Visual Studio 2022 17.3 or later](https://visualstudio.microsoft.com/downloads).
+* [Visual Studio 2022 17.3 or later](https://visualstudio.microsoft.com/downloads/).
 
-* [.NET Core 6.0 or later](https://dotnet.microsoft.com/download/dotnet-core).
+* [.NET Core 6.0 or later](https://dotnet.microsoft.com/en-us/download/dotnet).
 
 
 ## Install through the Visual Studio Manage Extensions

extension-toc.html

@@ -212,11 +212,25 @@
 	<li>
 		.NET MAUI Extension
 		<ul>
-			<li><a href="/extension/netmaui-extension/overview">Overview</a></li>
-			<li><a href="/extension/netmaui-extension/download-and-installation">Download and Installation</a></li>
-			<li><a href="/extension/netmaui-extension/template-studio">Template Studio</a></li>
-			<li><a href="/extension/netmaui-extension/Toolbox-Control">Toolbox Control</a></li>
-			<li><a href="/extension/netmaui-extension/Syncfusion-Notifications">Notifications</a></li>
+			<li>
+				Visual Studio
+				<ul>
+					<li><a href="/extension/netmaui-extension/visual-studio/overview">Overview</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio/download-and-installation">Download and Installation</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio/template-studio">Template Studio</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio/Toolbox-Control">Toolbox Control</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio/Syncfusion-Notifications">Notifications</a></li>
+				</ul>
+			</li>
+			<li>
+				Visual Studio Code
+				<ul>
+					<li><a href="/extension/netmaui-extension/visual-studio-code/overview">Overview</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio-code/download-and-installation">Download and Installation</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio-code/create-project">>Create Project</a></li>
+					<li><a href="/extension/netmaui-extension/visual-studio-code/code-snippet">Code Snippet</a></li>
+				</ul>
+			</li>
 		</ul>
 	</li>