New to Telerik UI for .NET MAUI? Start a free 30-day trial

First Steps with Telerik UI for .NET MAUI in Visual Studio

In this tutorial, you will enhance an existing .NET MAUI application by adding a Telerik UI for .NET MAUI control. You will achieve this by using Visual Studio for Windows and utilizing the Telerik NuGet source that will let you download and install Telerik controls.

Prerequisites

  • To download the Telerik UI for .NET MAUI packages, you need a Telerik account. If you don't have one, you can create one for free.
  • To create the app, you need Visual Studio 2022 17.8 or later with installed .NET MAUI workload.

Step 0: Start Your Free Trial

  • If you already have an active license for Telerik UI for .NET MAUI, skip this step and continue with Step 1.
  • If you don't have an active license, follow the steps below to activate your free trial:

    1. Download the Progress Trial Installer and start the installation.

    2. Make sure that Telerik UI for .NET MAUI is selected and continue with the setup.

    3. Log in with your Telerik account and complete the installation.

    After the successful installation of .NET MAUI, the Progress Trial Installer activates your 30 day free trial.

Step 1: Download the Extension for Visual Studio

To use the Telerik UI for .NET MAUI Create New Project wizard, install the Telerik UI for .NET MAUI Visual Studio Extension. You can get the extension from the Visual Studio Code Marketplace.

Step 2: Create a New Project

To start the wizard, use the Project menu.

  1. Open Visual Studio and choose the Create a new project option.
  2. Search for telerik maui:

    Create a new project dialog with maui in the search field and results

  3. Select the Telerik .NET MAUI Blank App which represents a blank project for creating a .NET MAUI application that includes the Telerik .NET MAUI suite setup.

Step 3: Configure the Project

Configure your Telerik UI for .NET MAUI project by setting your project name and its location.

![Telerik .NET MAUI App configurable wizard initial screen within the Create your new project dialog](../installation/vs-integration/images/vsextensions_configureapp.png)

Finally, Visual Studio opens the solution, which is pre-configured to use the Telerik UI for .NET MAUI controls and has the Telerik.UI.for.Maui NuGet package installed.

Step 4: Add the Telerik NuGet Server

Telerik maintains a NuGet feed with official UI for .NET MAUI releases and service packs. These packages are available for registered users with an active trial or commercial license. Adding the Telerik NuGet server as a source in Visual Studio lets you download and install Telerik packages containing controls and utilities.

To add the Telerik NuGet source to Visual Studio:

  1. In Visual Studio go to Tools > NuGet Package Manager > Package Manager Settings.

  2. Select Package Sources and then click the + button to add a new package source.

  3. Enter a Name for the new package source, for example, telerik.com.

  4. Add the https://nuget.telerik.com/v3/index.json URL as a Source. Click OK.

  5. Whenever Visual Studio displays a dialog to enter credentials for nuget.telerik.com, use your Telerik account email and password.

    Add the Telerik NuGet Feed in Visual Studio

Step 5: Install the Telerik UI for .NET MAUI Controls

  1. In Visual Studio and go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution....

  2. Install the Telerik UI for .NET MAUI package:

    1. Select the telerik.com Package source that you added earlier. As this is a private NuGet feed, you must authenticate with your Telerik account user name and password.

    2. Select the Browse tab and enter MAUI in the search box.

      • If using a trial license, select the Telerik.UI.for.Maui.Trial package.
      • If using a commercial license, select the Telerik.UI.for.Maui package.
    3. Select the checkbox for the target Project, and then click Install.

      Add Telerik UI for .NET MAUI package to the project

Step 6: Add the Telerik Namespace and Register the Controls

To use the controls in the Telerik UI for .NET MAUI library, add the Telerik namespace:

  1. In the MainPage.xaml file, locate the root element at the top. with the already available namespaces.
  2. Paste the Telerik namespace below the last already available namespace:

    xmlns:telerikCombo="telerik="http://schemas.telerik.com/2022/xaml/maui"
    

To visualize the Telerik controls, register them in the MauiProgram.cs file of your project:

  1. In the MauiProgram.cs file, add the following using statement:

    using Telerik.Maui.Controls.Compatibility;
    
  2. In the CreateMauiApp method, call the UseTelerik extension method:

    <!-- Code omitted for brevity -->
    .UseMauiApp<App>()
    .UseTelerik()
    <!-- Code omitted for brevity -->
    

Step 7: Add a Telerik UI Component

In this step, you will replace the Button control in Microsoft's template with a Telerik control. The Telerik UI for .NET MAUI TemplatedButton that you will use gives you full control over the Button's content.

To add the TemplatedButton control to the application:

  1. Delete the existing Button and its event handler:

    1. In the MainPage.xaml file, locate the Button with x:Name="CounterBtn" and delete it.
    2. In the MainPage.xaml.cs code-behind, locate the OnCounterClicked event handler and delete it.
  2. In the MainPage.xaml file, add the Telerik UI for .NET MAUI TemplatedButton and set its content to a string:

    <telerik:RadTemplatedButton x:Name="templatedButton"
        Content="My TemplatedButton Content" />
    

After adding the basic TemplatedButton and setting the initial content, you can hit F5 to confirm that the app is running. In the next steps, you will configure the control by adding some interactivity.

Step 8: Add Custom Content to the TemplatedButton

In this step, you will edit the code-behind file by adding logic that makes the TemplatedButton interactive: clicking the button will change its content and show a loading indicator for two seconds.

  1. In the MainPage.xaml file, set the new content of the TemplatedButton:

    • Change the content inside the button by removing the string and defining a Grid, which lets you organize the content in a structured layout.
    • In the Grid, add a BusyIndicator control and adjust its styling options.
    • In the Grid, add a label control for the loading indicator.

      <telerik:RadTemplatedButton x:Name="templatedButton">
          <telerik:RadTemplatedButton.Content>
              <Grid ColumnDefinitions="Auto, *" HorizontalOptions="Center">
                  <telerik:RadBusyIndicator x:Name="busy"
                                  AnimationContentHeightRequest="16"
                                  AnimationContentColor="#80CBC4"
                                  AnimationContentWidthRequest="16"
                                  AnimationType="Animation4"
                                  IsVisible="{Binding IsBusy,Source={x:Reference busy}}"
                                  Margin="0, 0, 10, 0" />
                  <Label x:Name="loadingLabel" 
              Grid.Column="1"
              TextColor="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadTemplatedButton}}, Path=TextColor}" 
              Text="Load Content" />
              </Grid>
          </telerik:RadTemplatedButton.Content>
      </telerik:RadTemplatedButton>
      
  2. In the MainPage.xaml.cs file, add a new member method within the MainPage class. This new method adds the logic that controls the content of the button:

    private async void OnTemplatedButtonClicked(object sender, EventArgs e)
    {
        this.busy.IsBusy = true;
        this.loadingLabel.Text = "Loading Data";
        await Task.Delay(TimeSpan.FromSeconds(2));
        this.busy.IsBusy = false;
        this.loadingLabel.Text = "Data is Loaded";
    }
    
  3. Finally, set the Clicked event and add some styles to the TemplatedButton. Use the various appearance options provided by the component, for example, TextColor, Background, BorderBrush, and so on:

    <telerik:RadTemplatedButton x:Name="templatedButton"
                                TextColor="Black"
                                Background="#FAFAFA"
                                BorderBrush="LightGray"
                                BorderThickness="1"
                                Clicked="OnTemplatedButtonClicked"
                                HorizontalOptions="Center">
        <telerik:RadTemplatedButton.Content>
            <Grid ColumnDefinitions="Auto, *" HorizontalOptions="Center">
                <telerik:RadBusyIndicator x:Name="busy"
                                            AnimationContentHeightRequest="16"
                                            AnimationContentColor="#80CBC4"
                                            AnimationContentWidthRequest="16"
                                            AnimationType="Animation4"
                                            IsVisible="{Binding IsBusy,Source={x:Reference busy}}"
                                            Margin="0, 0, 10, 0" />
                <Label x:Name="loadingLabel" 
                        Grid.Column="1"
                        TextColor="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadTemplatedButton}}, Path=TextColor}" 
                        Text="Load Content" />
            </Grid>
        </telerik:RadTemplatedButton.Content>
    </telerik:RadTemplatedButton>
    

To run the application, press F5. Congratulations, you added created your first app with Telerik UI for .NET MAUI controls!

Next Steps

See Also

In this article