Telerik UI for .NET MAUI Productivity Tools for Visual Studio Code

Telerik UI for .NET MAUI Productivity Tools

Overview of Telerik UI for .NET MAUI Productivity Tools

The Progress® Telerik® UI for .NET MAUI Productivity Tools for Visual Studio Code increase developer productivity and simplify the process of creating .NET MAUI projects with Telerik UI components. The tools are available as a VS Code extension for Windows, Linux, and Mac, and include:

Project Templates—The wizard provides the following templates:
- Blank App—Creates a blank application built with Telerik UI for .NET MAUI.
- Blank Shell App—Creates a blank .NET MAUI Shell application. You can use this project as a .NET MAUI Shell example. In addition, you can use the features like Shell Navigation, .NET MAUI Shell flyout, and .NET MAUI Shell tabs.
Code Snippets—The pack contains a collection of Telerik UI for .NET MAUI code snippets for fast UI component reference and configuration.

Telerik UI for .NET MAUI Project Templates

The Telerik UI for .NET MAUI Template Wizard lets you create new projects that are pre-configured for Telerik UI for .NET MAUI components.

In VS Code, open the Command Palette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
Select Telerik UI for .NET MAUI Template Wizard: Launch and press Enter.

Create new project with Telerik .NET MAUI Visual Studio Code Template

For more information, see this documentation page.

Telerik UI for .NET MAUI Code Snippets

The Telerik UI for .NET MAUI Productivity Tools provide code snippets to simplify and accelerate the implementation of Telerik UI for .NET MAUI components in your project. They facilitate the development process by providing a quick way for adding the components directly in the source code, while also including predefined tab stops for the required options.

In the source code in the IDE, type tm (short for Telerik .NET MAUI) or directly type the name of the component (for example, datagrid or gr).
From the dropdown menu, choose the snippet template that you want to use.
Press Enter to insert the desired component in the source code.
If the component provides placeholders for specific properties, cycle through them and set their values by pressing the Tab key.

Telerik UI for .NET MAUI Snippets

To make the most out of snippets:

Telerik UI for .NET MAUI Snippets Catalog

The complete snippets catalog and more information about the Telerik UI for .NET MAUI components is available here.

Telerik UI for .NET MAUI Scaffolders

The Telerik UI for .NET MAUI Visual Studio Code extension lets you scaffold a project and increase your productivity. The scaffoldings allow you to quickly add predefined pages with controls to your application and define the parameters of the controls through an UI.

Add The Scaffolding Page to Your App

To add the desired screen to your MAUI application:

Open the project in Visual Studio Code.
Right-click the name of the .csproj file.
From the popup menu, select New Telerik UI for .NET MAUI Project Item Generator.
From the UI form, select the desired page and set the available parameters.

As a result, the VS code extension does the following:

Adds the page to the Pages folder of the application. If the folder does not exist, it will be created.
Adds a ViewModel for the created page to the ViewModels folder. If the folder does not exist, it will be created.

The next image shows the file structure created for the Products screen: .NET MAUI Scaffolding result

Help Resources

License

This code is distributed under the terms and conditions of the Progress Software Corporation End User License Agreement for Visual Studio Code Extensions.