title	page_title	description	slug	position	tags	previous_url
Scaffolding Pages and Screens	Telerik UI for .NET MAUI Scaffoldings - Visual Studio Scaffoldings	Learn how to add predefined screens in your application using via Telerik .NET MAUI Visual Studio Scaffoldings.	maui-vs-scaffoldings	10	maui, dotnet maui, item templates, scaffoldings, predefined pages, screens, visual studio	/installation/windows/scaffoldings

.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 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]({%slug automated-installer %}).

For more information, go to the [Productivity Extensions for Visual Studio]({% slug vs-integration-overview %}) 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 DataGrid page:

Displaying a Scaffolded Screen in Your App

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

Using a Blank App Template

Set the screen directly to the MainPage of the application isndie the App.xaml.cs file when using a Blank app template

MainPage = new MyApp.Pages.TelerikDataGridPage();

Using a Blank Shell App Template

Set the screen directly to the ShellContent inside the AppShell.xaml file when using a Blank Shell app.

<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:TelerikDataGridPage}"
        Route="MainPage" />

</Shell>

This is the result on Android and WinUI:

Available Scaffoldings

Products page
DataGrid page
Login screen
Register screen
Reset password screen

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]({%slug collectionview-overview%}) 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.