You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Extension/NETMAUI-Extension/Visual-Studio-Code/Essential-UI-Kit.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Essential<sup>®</sup> UI Kit for .NET MAUI
11
11
12
-
The Essential<sup>®</sup> UI Kit for .NET MAUI provides prebuilt XAML templates, allowing you to easily create user interfaces for cross-platform applications. It follows a well-structured separation of View, ViewModel, and Model classes, simplifying the integration of business logic and modifications to existing views.
12
+
The Essential<sup>®</sup> UI Kit for .NET MAUI provides pre-built XAML templates, making it easy to create user interfaces for cross-platform applications. It follows a well-structured separation of View, ViewModel, and Model classes, simplifying the integration of business logic and the modification of existing views.
13
13
14
-
N> Before using the **Essential<sup>®</sup> UI Kit for .NET MAUI - Syncfusion<sup>®</sup>**, ensure that the extension is installed in Visual Studio Code. To check, go to **View > Extensions** in the Extension Manager. If the extension is not installed, follow the steps in the [download and installation](https://help.syncfusion.com/extension/netmaui-extension/visual-studio-code/download-and-installation#essential-ui-kit) help guide to install it.
14
+
N> Before using the **Essential<sup>®</sup> UI Kit for .NET MAUI - Syncfusion<sup>®</sup>**, ensure that the extension is installed in Visual Studio Code. To check, go to **View > Extensions** in the Extension Manager. If the extension is not installed, follow the steps in the [download and installation](https://help.syncfusion.com/maui/visual-studio-code-integration/download-and-installation#essential-ui-kit) help guide to install it.
description: Learn here all about how to use code snippet utility of Syncfusion® .NET MAUI Extension for Visual Studio Code and much more.
5
5
platform: MAUI
6
6
component: Common
7
7
documentation: ug
8
8
---
9
9
10
-
# Add Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI component in the .NET MAUI application
10
+
# Add Syncfusion<sup>®</sup> .NET MAUI component in the .NET MAUI application
11
11
12
-
The Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI code sample utility for Visual Studio Code provides sample for easily inserting Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI components with various features into the .NET MAUI Application's XAML code editor.
12
+
The Syncfusion<sup>®</sup> .NET MAUI Code Sample Utility for Visual Studio Code provides ready-to-use samples for easily inserting Syncfusion<sup>®</sup> .NET MAUI components with various features into the XAML editor of your .NET MAUI application.
13
13
14
-
N> The Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI code sample is available from Essential Studio<supstyle="font-size:70%">®</sup> 2024 Volume 1 (`v25.1.35`) onwards.
14
+
N> The Syncfusion<sup>®</sup> .NET MAUI code sample is available from Essential Studio<sup>®</sup> 2024 Volume 1 (`v25.1.35`) onwards.
15
15
16
-
## Add a Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI component
16
+
## Add a Syncfusion<sup>®</sup> .NET MAUI component
17
17
18
-
The following instructions outline the process of using the Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI code snippet in your .NET MAUI application.
18
+
The following instructions outline the process of using the Syncfusion<sup>®</sup> .NET MAUI code snippet in your .NET MAUI application.
19
19
20
20
1. In Visual Studio Code, either open an existing .NET MAUI application or create a new .NET MAUI Application.
21
21
22
-
2. Open the XAML file you require and position the cursor where you want to add the Syncfusion<supstyle="font-size:70%">®</sup> component.
22
+
2. Open the XAML file you require and position the cursor where you want to add the Syncfusion<sup>®</sup> component.
23
23
24
-
3. To access Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI components with various features, type the **sf** word in the specified format.
24
+
3. To access Syncfusion<sup>®</sup> .NET MAUI components with various features, type the **sf** word in the specified format.
4. Select the desired Syncfusion<supstyle="font-size:70%">®</sup> component and press the **Enter** or **Tab** key to add the Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI component to the XAML file.
31
+
4. Select the desired Syncfusion<sup>®</sup> component and press the **Enter** or **Tab** key to add the Syncfusion<sup>®</sup> .NET MAUI component to the XAML file.
32
32
33
33
34
34
35
-
5. After adding the Syncfusion<supstyle="font-size:70%">®</sup> .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<supstyle="font-size:70%">®</sup> components.
35
+
5. After adding the Syncfusion<sup>®</sup> .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<sup>®</sup> components.
36
36
37
37
38
38
39
-
6. You can also find a Syncfusion<supstyle="font-size:70%">®</sup> help link at the top of the added sample to learn more about the new Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI component feature.
39
+
6. You can also find a Syncfusion<sup>®</sup> help link at the top of the added sample to learn more about the new Syncfusion<sup>®</sup> .NET MAUI component feature.
40
40
41
41
42
42
43
-
## Configure .NET MAUI application with Syncfusion<supstyle="font-size:70%">®</sup>
43
+
## Configure .NET MAUI application with Syncfusion<sup>®</sup>
44
44
45
-
The Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI snippet inserts code into the XAML file. However, you need to configure the .NET MAUI project with Syncfusion<supstyle="font-size:70%">®</sup> by installing the Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI NuGet package and adding the appropriate namespace. To configure, follow these steps:
45
+
The Syncfusion<sup>®</sup> .NET MAUI snippet inserts code into the XAML file. However, you need to configure the .NET MAUI project with Syncfusion<sup>®</sup> by installing the Syncfusion<sup>®</sup> .NET MAUI NuGet package and adding the appropriate namespace. To configure, follow these steps:
46
46
47
-
1. Open the .NET MAUI application file and manually add the necessary Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI individual NuGet package(s) as a package reference for the Syncfusion<supstyle="font-size:70%">®</sup> .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.
47
+
1. Open your .NET MAUI project file and manually add the required Syncfusion<sup>®</sup> .NET MAUI NuGet package(s) as package references for the components you want to use. We've provided commented code samples showing the corresponding NuGet entries for each component. Simply copy the relevant entry and paste it into your project file. The package will be automatically restored during the build or save process.
48
48
49
49
50
50
51
-
2. To integrate Syncfusion<supstyle="font-size:70%">®</sup> components into your application, go to the XAML file and insert the necessary Syncfusion<supstyle="font-size:70%">®</sup> .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.
51
+
2. To integrate Syncfusion<sup>®</sup> components into your application, open the XAML file and add the required Syncfusion<sup>®</sup> .NET MAUI namespace entries. We've provided commented code samples showing the appropriate namespace for each component. Simply copy the relevant entry and paste it into your XAML file.
title: Create Projects using Project Templates via Extensions | Syncfusion
4
-
description: Learn here about how to create Syncfusion .NET MAUI application using Syncfusion .NET MAUI Extension for Visual Studio Code.
3
+
title: Create Projects using Project Templates via Extensions | Syncfusion®
4
+
description: Learn here about how to create syncfusion® .NET MAUI application using Syncfusion® .NET MAUI Extension for Visual Studio Code.
5
5
platform: MAUI
6
6
component: Common
7
7
documentation: ug
8
8
---
9
9
10
-
# Creating a Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI application
10
+
# Creating a Syncfusion<sup>®</sup> .NET MAUI application
11
11
12
-
Syncfusion<supstyle="font-size:70%">®</sup> offers the .NET MAUI Project Template for building .NET MAUI applications using Syncfusion<supstyle="font-size:70%">®</sup> components in Visual Studio Code. This template includes all the necessary Syncfusion<supstyle="font-size:70%">®</sup> components, NuGet references, namespaces, and code snippets required for developing .NET MAUI applications with Syncfusion<supstyle="font-size:70%">®</sup>. The **.NET MAUI Project Template** comes with a project wizard to streamline the application creation process using Syncfusion<supstyle="font-size:70%">®</sup> components.
12
+
Syncfusion<sup>®</sup> provides a .NET MAUI Project Template for building applications with Syncfusion<sup>®</sup> components in Visual Studio Code. This template includes all the necessary components, NuGet references, namespaces, and code snippets needed for development. It also features a project wizard that streamlines the process of creating .NET MAUI applications using Syncfusion<sup>®</sup> components.
13
13
14
-
N> Syncfusion<supstyle="font-size:70%">®</sup> Visual Studio Code project templates now support .NET MAUI project templates starting from `v25.1.35`.
14
+
N> Syncfusion<sup>®</sup> Visual Studio Code project templates now support .NET MAUI project templates starting from `v25.1.35`.
15
15
16
-
The following steps below will assist you to create your **Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI Application** through **Visual Studio Code:**
16
+
The following steps below will assist you to create your **Syncfusion<sup>®</sup> .NET MAUI Application** through **Visual Studio Code:**
17
17
18
-
1. To create a Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI application in Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. Then, search for **Syncfusion<supstyle="font-size:70%">®</sup>** in the Visual Studio Code palette to access the templates provided by Syncfusion<supstyle="font-size:70%">®</sup>.
18
+
1. To create a Syncfusion<sup>®</sup> .NET MAUI application in Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. Then, search for **Syncfusion<sup>®</sup>** in the Visual Studio Code palette to access the templates provided by Syncfusion<sup>®</sup>.
2. Select **Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI Template Studio: Launch** and press **Enter**. This will launch the Template Studio wizard for configuring the Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI application. Enter a unique **Project Name** to identify your application, and then specify the **Project Location**, which is the directory where your project files will be saved. Ensure that the chosen location meets your project's needs.
22
+
2. Select **Syncfusion<sup>®</sup> .NET MAUI Template Studio: Launch** and press **Enter**. This will open the Template Studio wizard for configuring your Syncfusion<sup>®</sup> .NET MAUI application. Enter a unique **Project Name** to identify your app, then specify the **Project Location**—the directory where your project files will be saved. Make sure the selected location meets your project requirements.
23
23
24
24
25
25
26
-
3. To select a component, click the **Next** button or the **Components** tab. From there, you can add the desired Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI components to your application. Simply choose the necessary Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI components for your project.
26
+
3. To select a component, click the **Next** button or the **Components** tab. From there, you can add the desired Syncfusion<sup>®</sup> .NET MAUI components to your application. Simply choose the necessary Syncfusion<sup>®</sup> .NET MAUI components for your project.
@@ -45,19 +45,19 @@ The following steps below will assist you to create your **Syncfusion<sup style=
45
45
46
46
**Project Summary section**
47
47
48
-
In the **Project Summary** section, you can customize the **Project Name** to uniquely identify your application and specify the **Project Location**, which is the directory where your project files will be saved. You can also adjust the **Configuration Settings** by removing one or more controls from the **Components Selected** list. Additionally, choose your preferred **Core Version** (.NET 7.0 or .NET 8.0) and **Theme** (Material Light or Material Dark).
48
+
In the **Project Summary** section, you can customize the **Project Name** to uniquely identify your application and specify the **Project Location**, which is the directory where your project files will be saved. You can also adjust the **Configuration Settings** by removing one or more controls from the **Components Selected** list. Additionally, choose your preferred **Core Version** (.NET 8.0 or .NET 9.0) and **Theme** (Material Light or Material Dark).
49
49
50
50
51
51
52
-
5. Click the **Create** button to generate the Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI application. The created application includes the necessary Syncfusion<supstyle="font-size:70%">®</sup> NuGet packages and rendering code for the selected Syncfusion<supstyle="font-size:70%">®</sup>components.
52
+
5. Click the **Create** button to generate the Syncfusion<sup>®</sup> .NET MAUI application. The created application includes the necessary Syncfusion<sup>®</sup> NuGet packages and rendering code for the selected Syncfusion<sup>®</sup>components.
53
53
54
-
6. To view the Syncfusion<supstyle="font-size:70%">®</sup> components in your application, run it by pressing **F5** or selecting **Run > Start Debugging**. Then, search for **.NET MAUI** and select it to launch the application.
54
+
6. To view the Syncfusion<sup>®</sup> components in your application, run it by pressing **F5** or selecting **Run > Start Debugging**. Then, search for **.NET MAUI** and select it to launch the application.
55
55
56
56
57
57
58
58
N> **Note:** If the .NET MAUI extension is a preview version, the debugger will be listed as **.NET MAUI**. However, if the .NET MAUI extension is stable, this configuration will be replaced with **C#**.
59
59
60
-
7. The Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI application is configured with the latest Syncfusion<supstyle="font-size:70%">®</sup> .NET MAUI NuGet packages version, namespaces, and component rendering code for Syncfusion<supstyle="font-size:70%">®</sup> components.
60
+
7. The Syncfusion<sup>®</sup> .NET MAUI application is configured with the latest NuGet package versions, namespaces, and component rendering code for Syncfusion<sup>®</sup> components.
61
61
62
-
8. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion<supstyle="font-size:70%">®</sup> license key to your application since Syncfusion<supstyle="font-size:70%">®</sup> introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio<supstyle="font-size:70%">®</sup> 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<supstyle="font-size:70%">®</sup> 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<supstyle="font-size:70%">®</sup>.
62
+
8. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion<sup>®</sup> license key to your application since Syncfusion<sup>®</sup> introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio<sup>®</sup> 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<sup>®</sup>.
0 commit comments