Building an Onboarding and Registration UI in .NET MAUI

See how to use LinearGradientBrush and RadialGradientBrush, structure grid layouts and create a dynamic form using the Telerik DataForm in .NET MAUI.

Have you ever seen apps with super fresh screens with gradients that make you think: “OMG, where do I get that image to use as a background in my apps?” 👀

Well, today you won’t just see a UI like that … you’ll learn how to create it from scratch. This UI is inspired by a design from Dribbble, and we’ll recreate it step by step.

Here’s where it gets interesting: we’ll build that super modern gradient using LinearGradientBrush in .NET MAUI, without relying on external images, achieving that clean look directly from code.

From there, we’ll put together the entire experience: an onboarding screen with a clean and modern design, along with a registration form using the Progress Telerik UI for .NET MAUI DataForm.

The best part is that you’ll understand every step of the process, from the background gradient to the structure of the form and how to use the components, so you can easily adapt it to your own projects.

So let’s get started, and you’ll see how simple and fast it’s to build a UI like this. 🚀

How Will the Explanation Work?

So you can understand everything 100%, I’ll explain how the process will work:

➖ Visual diagram: Before we start, you’ll see a diagram with a screenshot of the design we want to achieve. This design will be divided into screens, each identified with a name and a color. Each one will be explained individually.

➖ Code explanation per block: In addition to the written explanation, each screen includes a set of blocks with the exact code snippets you need to implement and achieve the final result.

➖ Step-by-step visual progress: Each explanation will have its corresponding screenshot, so you can see the progress as we build the UI.

⚠️ For this design, we took inspiration from an original Dribbble UI, but made some adaptations and adjustments to align it with the goals of this article.

🔧 Environment Setup

You’ll learn how to take advantage of some of the powerful Telerik UI for .NET MAUI components in this post. If you don’t have the .NET MAUI library installed yet, visit the quick start page, which explains step-by-step how to install Telerik UI for .NET MAUI, download the license key, configure the Telerik package source and install the Telerik MCP server (if needed).

Breaking Down the Design

To make this easier to follow, I’ve divided the design into clear blocks. We’ll build each part one at a time, in the order you see below.

1. Onboarding

Oh yeahh! We’ve reached the first screen! 😎 This is an onboarding screen, and I really like it because it’s perfect for practicing XAML while building a modern UI.

One of the highlights here is the gradient background. When we see something like this, it’s easy to think we need an image to achieve it, but that’s not the case. We’ll build it from scratch using LinearGradientBrush from .NET MAUI, giving you full control to customize and experiment with gradients directly from code, without relying on external assets.

On top of that, this screen helps us structure a real layout by combining key UI elements: a centered image, a title with a description, and simple actions like a button and a “Skip” option.

Adding the Gradient

To get started with the code, the first thing we’ll create is the gradient that will be used as the background for the entire page. We’ll assign it directly as the background of the ContentPage.

Using LinearGradientBrush, add the following code block right before defining the main layout. Keep in mind that you can tweak each variation of the gradient using GradientStop.

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
x:Class="TicketSampleApp.Pages.FormsUI.FormIntroPage" 
Title="FormIntroPage"> 
<ContentPage.Background> 
	    <LinearGradientBrush StartPoint="0,0" EndPoint="0.8,1"> 
	    <GradientStop Color="#FFCFE8" Offset="0.00" /> 
	    <GradientStop Color="#F7D5F3" Offset="0.28" /> 
	    <GradientStop Color="#ECE1FF" Offset="0.55" /> 
	    <GradientStop Color="#DDF0FF" Offset="0.82" /> 
	    <GradientStop Color="#F7FCFF" Offset="1.00" /> 
	    </LinearGradientBrush> 
    </ContentPage.Background>
 
<!-- Add your Grid here -->
 
</ContentPage>

✍️ If you want to learn more about LinearGradientBrush, I recommend checking out the MS Learn article.

Main Layout

Now let’s continue with one of the most important components in a .xaml file: the main layout. For this screen, we’ll add a Grid with two columns and five rows:

<Grid 
    Padding="24" 
    RowDefinitions="420,Auto,Auto,*,Auto" 
    ColumnDefinitions="*,Auto"> 
	    <!-- Add the remaining code here -->  
</Grid>

Keep in mind that this Grid will contain all the elements of your page, so it should be placed inside the ContentPage, exactly where the previous code block says: “Add your Grid here.”

The Halo

As you may notice, the main image has a kind of “halo” behind it, almost like a soft circle. In this case, we enhanced that effect using a RadialGradientBrush. 😎

This code block should be placed right at the beginning of the Grid, before adding the image and the rest of the elements.

<!-- Halo --> 
<Ellipse 
    Grid.Row="0" 
    Grid.ColumnSpan="2" 
    WidthRequest="340" 
    HeightRequest="340" 
    HorizontalOptions="Center" 
    VerticalOptions="Center" 
    Opacity="0.65" 
    Margin="0,-40,0,0"> 
	    <Ellipse.Fill> 
	    <RadialGradientBrush Center="0.5,0.32" Radius="0.75"> 
		    <GradientStop Color="#FFFFFF" Offset="0.0" /> 
		    <GradientStop Color="#FFFFFF" Offset="0.2" /> 
		    <GradientStop Color="#FFF6FB" Offset="0.4" /> 
		    <GradientStop Color="#F3E3F8" Offset="0.65" /> 
		    <GradientStop Color="Transparent" Offset="1.0" /> 
    </RadialGradientBrush> 
    </Ellipse.Fill> 
</Ellipse>

✍️ If you want to learn more about RadialGradientBrush, check out the MS Learn article.

Main Images, Labels and Button

Now we’ll continue by adding the remaining elements of the screen: the main image, labels and the button.

<!-- Image --> 
<Image 
    Grid.Row="0" 
    Grid.ColumnSpan="2" 
    Source="onboarding_cartoon" 
    HeightRequest="450" 
    Aspect="AspectFit" 
    HorizontalOptions="Center" 
    VerticalOptions="Center" />
 
<!-- Title --> 
<Label 
    Grid.Row="1" 
    Grid.ColumnSpan="2" 
    Text="Get Detailed Analytics" 
    FontSize="24" 
    FontAttributes="Bold" 
    TextColor="#111111" 
    Margin="0,20,0,0" />
 
<!-- Description --> 
<Label 
    Grid.Row="2" 
    Grid.ColumnSpan="2" 
    Text="Complete the quiz to get a detailed report&#10;of your performance and challenge&#10;yourself to achieve more." 
    FontSize="14" 
    FontAttributes="Bold" 
    TextColor="#333333" 
    LineHeight="1.3" 
    Margin="0,24,0,0" />
     
<!-- Skip --> 
<Label 
    Grid.Row="4" 
    Grid.Column="0"  
    Text="Skip" 
    FontAttributes="Bold" 
    FontSize="15" 
    VerticalOptions="Center" 
    HorizontalOptions="Start" /> 

<!-- Button --> 
<Button 
    Grid.Row="4" 
    Grid.Column="1" 
    Text="Next" 
    FontSize="17" 
    FontAttributes="Bold" 
    TextColor="White" 
    BackgroundColor="#111111" 
    CornerRadius="10" 
    Padding="35,14" 
    HorizontalOptions="End" />

Once the layout and components are in place, the result should look like this:

2. Sign Up

For our second screen, we’ll also add a gradient. As you can see, it’s not exactly the same as the one on the previous screen, so we’ll create a new one with different color variations, applying it in the same way we did before, directly in the ContentPage.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TicketSampleApp.Pages.FormsUI.SignUpPage"
xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
Title="SignUpPage"> 
    <ContentPage.Background> 
	    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
		    <GradientStop Color="#F8F7FF" Offset="0.00" /> 
		    <GradientStop Color="#FFFFFF" Offset="0.28" /> 
		    <GradientStop Color="#F9FBFF" Offset="0.50" /> 
		    <GradientStop Color="#EAF7FF" Offset="0.72" /> 
		    <GradientStop Color="#F8DDF2" Offset="1.00" /> 
	    </LinearGradientBrush> 
    </ContentPage.Background> 

<!-- Add your Grid here -->  

</ContentPage>

Main Layout of Sign Up

Just like in the previous page, we’ll use a Grid. In this case, it will have eight rows and two columns. Inside this Grid, we’ll add all the remaining elements.

<Grid 
    Padding="26" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" 
    ColumnDefinitions="*,*" 
    ColumnSpacing="12" 
    VerticalOptions="Center" 
    RowSpacing="18"> 

    <!-- Add the remaining code here --> 

</Grid>

Title & Description

<Label 
Grid.Row="0" 
Grid.ColumnSpan="2" 
Text="Sign Up" 
FontSize="24" 
FontAttributes="Bold" />
 
<Label 
Grid.Row="1" 
Grid.ColumnSpan="2" 
Text="Just a few quick things to get started" 
FontSize="14" />

Let’s Add the Form!

One of my favorite moments has arrived 😍 (because yes, I absolutely love this component). For our form, we’ll use the Telerik UI for .NET MAUI DataForm!

To use it, don’t forget to follow the instructions in the “🔧 Environment Setup” section explained earlier. Additionally, you’ll just need to add the following namespace to your XAML:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

Creating the Model

To display the fields in our form, we’ll create a model where we define everything we need, such as the email and password. This is also where we specify whether each field is required, its display name and the data type.

The data type is especially important, for example, for password fields. It masks the input, showing *** as you type.

Additionally, the Telerik DataForm uses these attributes to automatically generate and validate the UI, which means we don’t need to manually create each input field or handle basic validation logic.

Our model should look like this:

public class SignUp : NotifyPropertyChangedBase
{ 
    private string email; 
    private string password; 
    private string confirmPassword;
     
    [Required] 
    [Display(Name = "Email ID")] 
    public string Email 
    { 
	    get => email; 
	    set => UpdateValue(ref email, value); 
    }
     
    [Required] 
    [Display(Name = "New Password")] 
    [DataType(DataType.Password)]
     
    public string Password 
    { 
	    get => password;  
	    set => UpdateValue(ref password, value); 
    }
     
    [Required] 
    [Display(Name = "Confirm Password")] 
    [DataType(DataType.Password)]
     
    public string ConfirmPassword 
    { 
	    get => confirmPassword; 
	    set => UpdateValue(ref confirmPassword, value); 
    } 
}

Now, go to your XAML page and set the BindingContext from the code-behind. For this article, we’ll keep the example simple and assign a new instance of our SignUp model directly in the page constructor:

public SignUpPage() 
{ 
    InitializeComponent(); 
    this.BindingContext = new Models.SignUp(); 
}

This allows the DataForm to read the model properties and generate the corresponding fields based on the attributes we defined earlier.

Adding It in XAML

Finally, we can add it to our XAML. Simply include something like the following:

<telerik:RadDataForm 
    Grid.Row="2" 
    Grid.ColumnSpan="2" 
    x:Name="dataForm" 
    AutomationId="dataForm" />

At this point, the DataForm will automatically generate the form fields based on the model we defined earlier.

Terms & Conditions and Button

<CheckBox 
Grid.Row="3" 
Grid.Column="0" 
IsChecked="True" 
Color="#8A2BFF" 
HorizontalOptions="Start" 
VerticalOptions="Center" />
 
<Label 
Grid.Row="3" 
Grid.ColumnSpan="2" 
Text="I Agree With The Terms And Conditions" 
FontSize="12" 
VerticalOptions="Center" 
Margin="28,0,0,0" /> 

<Button 
Grid.Row="4" 
Grid.ColumnSpan="2" 
Text="Sign Up" 
FontSize="16" 
FontAttributes="Bold" 
TextColor="White" 
BackgroundColor="#111111" 
CornerRadius="6"  
HeightRequest="52" />

Social Networks

<HorizontalStackLayout 
Grid.Row="5" 
Grid.ColumnSpan="2" 
Spacing="12" 
HorizontalOptions="Center" 
VerticalOptions="Center"> 

    <BoxView 
    HeightRequest="1" 
    WidthRequest="95" 
    Color="#D8D8D8" 
    VerticalOptions="Center" />
     
    <Label 
    Text="Or with" 
    FontSize="12" 
    VerticalOptions="Center" />
     
    <BoxView 
    HeightRequest="1" 
    WidthRequest="95" 
    Color="#D8D8D8" 
    VerticalOptions="Center" /> 
    
</HorizontalStackLayout> 

<Button 
Grid.Row="6" 
Grid.Column="0" 
Text="Facebook" 
FontSize="12" 
TextColor="#111111" 
BackgroundColor="White" 
BorderColor="#DDDDDD" 
BorderWidth="1" 
CornerRadius="8" 
HeightRequest="48" 
ImageSource="facebook.png" 
ContentLayout="Left,10" /> 

<Button 
Grid.Row="6" 
Grid.Column="1" 
Text="Google" 
FontSize="12" 
TextColor="#111111" 
BackgroundColor="White" 
BorderColor="#DDDDDD" 
BorderWidth="1"  
CornerRadius="8" 
HeightRequest="48" 
ImageSource="google.png" 
ContentLayout="Left,10" />
 
<Label 
Grid.Row="7" 
Grid.Column="0" 
Text="Already have an account?" 
FontSize="12" 
TextColor="#777777" 
HorizontalOptions="End" /> 

<Label 
Grid.Row="7" 
Grid.Column="1" 
Text="Sign In" 
FontSize="12" 
FontAttributes="Bold" 
TextColor="#111111" 
TextDecorations="Underline" 
HorizontalOptions="Start" 
Margin="4,0,0,0" />

Once the layout and components are in place, the result should look like this:

Conclusion

I hope this article helps you understand how to recreate a modern UI from scratch using .NET MAUI. 😎 From building custom gradients with LinearGradientBrush and RadialGradientBrush, to structuring layouts with Grid, and creating a dynamic form using the Telerik DataForm, you now have a solid foundation to build clean and modern interfaces.

The best part is that these are concepts you can easily reuse and adapt to your own projects to create more polished and visually appealing apps. 💚

If you have any questions or would like me to dive deeper into a specific part, feel free to leave a comment. I’ll be happy to help!

See you in the next article! 🙋‍♀️🚀

Remember, you can try Telerik UI for .NET MAUI free for 30 days.

Try Now