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

* <a href="https://marketplace.visualstudio.com/items?itemName=TelerikInc.ProgressTelerikMAUIExtensions" target="_blank">Telerik UI for .NET MAUI Productivity Tools in the Visual Studio Marketplace</a>

* 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](https://www.telerik.com/maui-ui/documentation/installation/manual-installation-approaches/automated-installer).

For more information, go to the [Productivity Extensions for Visual Studio](https://www.telerik.com/maui-ui/documentation/installation/vs-integration/overview) topic.

## Add The Scaffolding Page to Your App

To add the desired screen to your MAUI application:

1. Open the project in Visual Studio.

2. Right-click the name of the project.

3. From the popup menu select **Telerik UI for .NET MAUI** -> **Add new Scaffolded Item**.

   ![.NET MAUI Scaffolding dialog](https://www.telerik.com/maui-ui/documentation/assets/8c87767d59892e9183afd920d578d843/scaffolding-vs-dialog.png)

4. From the UI form, select the desired page and set the available parameters.

   ![.NET MAUI Scaffolding options](https://www.telerik.com/maui-ui/documentation/assets/6f8f711341e09047e9ff79512cd64c8d/scaffolding-vs-options.png)

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:
![.NET MAUI Scaffolding result](https://www.telerik.com/maui-ui/documentation/assets/a81ccd5a51a45d4fd3ce2986c6779f35/scaffolding-vs-result.png)

## 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 inside the `App.xaml.cs` file when using a Blank app template.

```C#
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.

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

</Shell>
```

This is the result on Android and WinUI:

![.NET MAUI Scaffolding screen look](https://www.telerik.com/maui-ui/documentation/assets/f161664c25d575efb160d26c8db5c4a9/datagrid_page.png)

## Using Themes on a Scaffolded Page

The Scaffolding page templates use the [Telerik .NET MAUI controls](https://www.telerik.com/maui-ui).
To control the visual appearance of the controls in the pages when changing the theme on device or app level, apply [Telerik theming](https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview) to the project.
You can set various [theme swatches](https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview#swatch) in the application and change them at runtime based on the applied device theme.

For more details on the suggested implementation, see the [Changing the Theme at Runtime KB article](https://www.telerik.com/maui-ui/documentation/knowledge-base/change-telerik-theme-runtime).

## Available Scaffoldings

<TabStrip>
<TabStripTab title="CollectionView Page">

The CollectionView page represents a list of products. The main control used on this page is the Telerik UI for .NET MAUI [CollectionView](https://www.telerik.com/maui-ui/documentation/controls/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.

The image shows the default appearance of the page:

![.NET MAUI Products Page](https://www.telerik.com/maui-ui/documentation/assets/52fd3a49de99c3bed466dd42307c050f/products_page.png)

</TabStripTab>
<TabStripTab title="DataGrid Page">

The DataGrid page represents a data displayed in a table. The main control used on this page is the Telerik UI for .NET MAUI [DataGrid](https://www.telerik.com/maui-ui/documentation/controls/datagrid/overview) control. The scaffolding page allows you to configure the data source used in the DataGrid, the selection mode, whether editing, sorting, filtering and grouping the data in the control will be enabled.

The image shows the default appearance of the page:

![.NET MAUI DataGrid Page](https://www.telerik.com/maui-ui/documentation/assets/f161664c25d575efb160d26c8db5c4a9/datagrid_page.png)

</TabStripTab>
<TabStripTab title="Login Page">

The Login screen represents a login panel. The main controls used on this screen are the Telerik UI for .NET MAUI [Entry](https://www.telerik.com/maui-ui/documentation/controls/entry/overview) and [TemplatedButton](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/overview) controls. The scaffolding page allows you to add a social login panel to this screen.

The image shows the default appearance of the page:

![.NET MAUI Login Page](https://www.telerik.com/maui-ui/documentation/assets/7499bb4e73066a7b4c3d500baa7a88a6/login_screen.png)

</TabStripTab>
<TabStripTab title="Register Screen">

The Register page allows you to add a register page to your .NET MAUI application. The main controls used on this screen are the Telerik UI for .NET MAUI [Entry](https://www.telerik.com/maui-ui/documentation/controls/entry/overview) and [TemplatedButton](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/overview) controls.

The image shows the default appearance of the page:

![.NET MAUI Register Screen](https://www.telerik.com/maui-ui/documentation/assets/6d54cc2aea8d778133423ea6ef7ced45/register_screen.png)

</TabStripTab>
<TabStripTab title="Reset Password Screen">

The Reset Password page allows you to add a reset password page to your application. The main controls used on this screen are the Telerik UI for .NET MAUI [Entry](https://www.telerik.com/maui-ui/documentation/controls/entry/overview) and [TemplatedButton](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/overview) controls.

The image shows the default appearance of the page:

![.NET MAUI Reset Password Screen](https://www.telerik.com/maui-ui/documentation/assets/63b81ffaccaaca0040dafe80c9334c85/reset_screen.png)

</TabStripTab>
</TabStrip>

## See Also

* [Review Telerik UI for .NET MAUI Installation Methods](https://www.telerik.com/maui-ui/documentation/installation/manual-installation-approaches/installation-methods)
* [Check the Windows System Requirements for Telerik UI for .NET MAUI](https://www.telerik.com/maui-ui/documentation/installation/system-requirements)
* [Explore Telerik UI for .NET MAUI Visual Studio Productivity Extensions](https://www.telerik.com/maui-ui/documentation/installation/vs-integration/overview)
* [Browse Telerik UI for .NET MAUI Sample Applications](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/controls-showcase-app)