.NET MAUI Scaffolding Pages and Screens for Visual Studio

The Telerik UI for .NET MAUI Visual Studio extension lets you scaffold an app page (screen) 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.

Get the Extension

To use the Telerik UI for .NET MAUI Scaffoldings, install the Progress Telerik UI for .NET MAUI Extension extension for Visual Studio. You can get the extension from:

The Visual Studio Marketplace.
The Extensions tab in Visual Studio—search for Progress Telerik UI for .NET MAUI Extension, select the extension, and then click Install.
The Telerik UI for .NET MAUI MSI installer. For more information, go to the Getting Started with the Telerik VS extensions topic.

Add The Scaffolding Page to Your App

To add the desired screen to your MAUI application:

Open the project in Visual Studio.
Right-click the name of the project.
From the popup menu select Telerik UI for .NET MAUI -> Add new Scaffolded Item.
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

Displaying a Scaffolded Screen in Your App

To show a newly scaffolded page in your MAUI app, specify the page's namespace.

In the example below, the screen is set directly to the ShellContent in the AppShell.xaml:

<Shell
    x:Class="TestScaffoldings.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestScaffoldings"
    xmlns:pages="clr-namespace:MyApp.Pages"
    Shell.FlyoutBehavior="Disabled"
    Title="TestScaffoldings">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate pages:TelerikProductsListPage}"
        Route="MainPage" />

</Shell>

This is the result on Android and WinUI:

.NET MAUI Scaffolding screen look

Products Page

The Products page represents a list of products. The main control used on this page is the Telerik UI for .NET MAUI CollectionView control. The scaffolding page allows you to configure the selection mode of the CollectionView and whether to add the predefined icons used in the template.