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

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.

To use Telerik and Kendo UI components and tools without disruption, you need to apply a valid license key file (LKF) to both new and existing projects. License key files ensure that your applications remain fully supported, secure, and up to date with the latest product versions.

The Telerik UI for Maui extension can automatically download and manage your license key. Simply log in to your Telerik or Kendo UI account within Visual Studio to enable this feature. Alternatively, you can manually download and apply a license key file.

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.

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

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.

1. 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).
2. From the dropdown menu, choose the snippet template that you want to use.
3. Press Enter to insert the desired component in the source code.
4. If the component provides placeholders for specific properties, cycle through them and set their values by pressing the Tab key.

To make the most out of snippets:

• Learn more about snippets in VS Code.
• Check out the Snippets Viewer extension.

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:

1. Open the project in Visual Studio Code.

2. Right-click the name of the .csproj file.

3. From the popup menu, select New Telerik UI for .NET MAUI Project Item Generator.

4. 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:

Maui Theming

The Q1 2025 release of Telerik UI for MAUI extensions introduces powerful new options to streamline your development workflow. Now, you can select and apply a preview version of the built-in theme directly from the Create New Project Wizard, making it easier than ever to craft beautiful, modern applications—fast. These professionally designed themes seamlessly control the visual appearance of your UI components, including colors, borders, backgrounds, size, layout, positioning and font sizes. Whether you're building for mobile, tablet, or desktop, your app will maintain a polished, cohesive look across all devices. With multiple color variations to choose from, you can effortlessly align your app’s design with your brand. Focus on functionality while Telerik UI for MAUI perfects the aesthetics, ensuring a stunning and consistent user experience.

Help Resources

• Telerik UI for .NET MAUI Components
• Telerik UI for .NET MAUI Documentation
• Telerik UI for .NET MAUI Online Demos
• Telerik UI for .NET MAUI Release History
• Telerik UI for .NET MAUI Community Forums
• Suggest a Telerik UI for .NET MAUI Feature
• Contact the Telerik UI for .NET MAUI Support

License

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