Replicating Project Pad UI in .NET MAUI

Recreate this modern UI from scratch using .NET MAUI to experiment with common features like BindableLayout and next-level components like Telerik UI for .NET MAUI CollectionView.

Every UI we build is an opportunity to develop new skills, explore new components and discover better ways to achieve a clean and successful result.

In UI development, there are often multiple ways to build the same interface. That’s why it’s important to choose an approach that keeps our code readable, flexible and efficient. A common example is when we have repeated visual elements: we could create each one manually, or we could use a list-based approach that allows the UI to adapt dynamically based on the data.

In this article, we’ll replicate a UI inspired by the Project Pad Dribbble design. Along the way, we’ll explore Progress Telerik UI for .NET MAUI CollectionView component, work with bindable layouts, learn how to create rounded buttons in a simple way and much more!

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 blocks, 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. Intro Block

This block occupies the first full screen of our UI. Let’s start by creating our main layout, which will be a Grid with three rows and two columns. Inside this layout, we’ll add all the elements corresponding to this first section.

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

Inside this Grid, we’ll add the following elements:

➖ The main image.

➖ The Project Pad logo with its name. For this, I added another Grid to better arrange the name and logo as shown in the UI.

➖ A rounded button at the bottom:

<Image 
	Grid.Row="0" 
	Grid.ColumnSpan="2" 
	Source="bgcolor.png" 
	Aspect="AspectFill" 
	HeightRequest="350" />
	 
<Grid 
Grid.Row="1" 
	Grid.ColumnSpan="2" 
	RowDefinitions="Auto,Auto" 
	ColumnDefinitions="Auto,Auto" 
	RowSpacing="0" 
	ColumnSpacing="6" 
	HorizontalOptions="Center" 
	VerticalOptions="Center"> 
		<Label 
		Grid.Row="0" 
		Grid.ColumnSpan="2" 
		Text="Project" 
		FontSize="40" 
		FontAttributes="Bold" 
		TextColor="#2B2B2B" 
		HorizontalOptions="Center" /> 
		<Label 
			Grid.Row="1" 
			Grid.Column="0" 
			Text="Pad" 
			FontSize="40" 
			TextColor="#777777" 
			HorizontalOptions="End" 
			VerticalOptions="Center" />
			
		<Image 
			Grid.Row="1" 
			Grid.Column="1" 
			Source="logopad.png" 
			WidthRequest="60" 
			HeightRequest="35" 
			Aspect="AspectFit" 
			VerticalOptions="Center" /> 
</Grid>
 
<Button 
	Grid.Row="2" 
	Grid.ColumnSpan="2" 
	ImageSource="roundedarrow.png" 
	BackgroundColor="White" 
	CornerRadius="34" 
	WidthRequest="68" 
	HeightRequest="68" 
	HorizontalOptions="Center" 
	VerticalOptions="Center" 
	Margin="0,40">
 
<Button.Shadow> 
	<Shadow 
	Brush="#C9DDE8" 
	Offset="0,8" 
	Radius="22" 
	Opacity="0.45" /> 
	</Button.Shadow> 
</Button>

✍️ Note that rounding the button was very easy. I simply set the HeightRequest and WidthRequest properties to the same value, and then set the CornerRadius to half of that value.

And you’ll get a result like this:

2. Header Block

This second block starts another screen, which contains additional sections that we’ll work on later. For now, we’ll create the main layout and add the elements for this block, keeping in mind that all the remaining sections will be placed inside this layout.

To make the structure easier to follow, I added placeholder comments indicating where each block should go: the Header block, the Categories block and the Footer block.

<Grid 
	RowDefinitions="Auto,Auto,Auto,Auto,*,Auto" 
	ColumnDefinitions="*,Auto" 
	Padding="30" 
	RowSpacing="28"> 

	<!- Add the Header block code here -- >
	
	<!- Add the Categories block code here -- >
	
	<!- Add the Footer block code here -- >
 
</Grid>

Adding the Title, Description and Divider Line

<Label 
	Grid.Row="0" 
	Grid.ColumnSpan="2" 
	Text="Website&#10;Redesign work" 
	FontSize="28" 
	FontAttributes="Bold" 
	LineHeight="1.1" />
 
<Label 
	Grid.Row="1" 
	Grid.ColumnSpan="2" 
	Text="Redesign the website and create a&#10;style guide for the client." 
	FontSize="18" 
	TextColor="#9A9A9A" 
	LineHeight="1.35" />
	 
<BoxView 
	Grid.Row="2" 
	Grid.ColumnSpan="2" 
	HeightRequest="1" 
	Color="#E1EDF4" />

Creating the Avatars and Star Rounded Button

➖ Avatars

For the avatars, I wanted to introduce you to a concept that can make your life much easier: the BindableLayout. It allowed me to repeat the circular buttons effortlessly and achieve a clean overlapping effect.

For this BindableLayout, I created a simple model with the color of each avatar and its initial:

public class Avatar
{
	public string Initial { get; set; }
	public Color BackgroundColor { get; set; }
}

Then, I populated the data in the ViewModel:

public ObservableCollection<Models.Avatar> Avatars { get; set; }
 
public PadViewModel()  
{ 
	avatars = new ObservableCollection<Models.Avatar> 
	{ 
		new Models.Avatar { Initial = "N", BackgroundColor = Color.FromArgb("#B7FF62") }, 
		new Models.Avatar { Initial = "S", BackgroundColor = Color.FromArgb("#8DE7FF") }, 
		new Models.Avatar { Initial = "V", BackgroundColor = Color.FromArgb("#7785F8") } 
	}; 
}

And finally, for this simple example, I set the BindingContext to the AvatarViewModel in the page’s code-behind:

BindingContext = new ViewModels.AvatarViewModel();

Now, add the BindableLayout in your XAML:

<HorizontalStackLayout 
	Grid.Row="3" 
	Grid.Column="0" 
	HeightRequest="52" 
	Spacing="-14" 
	HorizontalOptions="Start" 
	BindableLayout.ItemsSource="{Binding avatars}"> 
	
	<BindableLayout.ItemTemplate> 
		<DataTemplate> 
			<telerik:RadTemplatedButton
            Content="{Binding Initial}"
            WidthRequest="48"
            HeightRequest="48"
            CornerRadius="24"
            Background="{Binding BackgroundColor}"
            TextColor="#111111"
            FontSize="18"
            FontAttributes="Bold"
            Padding="0" />
		</DataTemplate> 
	</BindableLayout.ItemTemplate> 
		
</HorizontalStackLayout>

🗓️ If you’d like to learn more about BindableLayout, you can check out this article.

➖ Star Rounded Button

<telerik:RadTemplatedButton
   Grid.Row="3"
   Grid.Column="1"
   WidthRequest="48"
   HeightRequest="48"
   CornerRadius="24"
   Background="#FFF4D6"
   Content="★"
   FontSize="20"
   TextColor="#FFC400"
   Padding="0"
   HorizontalOptions="End"
   VerticalOptions="Center" />

With this, you’ll get a result like:

3. Categories Block

For this block, we’ll use our star component: Telerik UI for .NET MAUI CollectionView, which will allow us to dynamically add all the elements we need into the list.

Creating the Model

Let’s start by creating a model with the attributes we need for the list. This model will include a description and a color for each item:

public class Category  
{ 
	public string Text { get; set; } 
	public Color BackgroundColor { get; set; } 
}

Populating the ViewModel

Now let’s add some mock data to populate our list:

public ObservableCollection<Category> categories { get; set; }
    
public PadViewModel() 
{ 
 // Avatars mock information

   categories = new ObservableCollection<Models.Category>
   {
   new Category { Text = "UX Phase", BackgroundColor = Color.FromArgb("#FFC802") },
   new Category { Text = "Concept Design", BackgroundColor = Color.FromArgb("#ff7546") },
   new Category { Text = "Design Handover", BackgroundColor = Color.FromArgb("#20BBFF") }
   };
}

Adding the XAML

You need to add the namespace in order to use the component:

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

Then, add the Telerik CollectionView to your XAML like this:

<telerik:RadCollectionView
  Grid.Row="4"
  Grid.ColumnSpan="2"
  Margin="0,25,0,0"
  ItemsSource="{Binding categories}"
  SelectionMode="None"
  HeightRequest="260">

  <telerik:RadCollectionView.ItemViewStyle>
      <Style TargetType="telerik:RadCollectionViewItemView">
          <Setter Property="BackgroundColor" Value="Transparent" />
          <Setter Property="BorderThickness" Value="0" />
          <Setter Property="Padding" Value="0" />
      </Style>
  </telerik:RadCollectionView.ItemViewStyle>

  <telerik:RadCollectionView.ItemTemplate>
      <DataTemplate>
          <Border
      Margin="0,10"
      HeightRequest="65"
      Padding="28,0"
      BackgroundColor="{Binding BackgroundColor}"
      StrokeThickness="0"
      StrokeShape="RoundRectangle 26">

              <Grid ColumnDefinitions="*,Auto">

                  <Label
              Text="{Binding Text}"
              FontSize="17"
              FontAttributes="Bold"
              TextColor="White"
              VerticalOptions="Center" />

                  <Image
              Grid.Column="1"
              Source="arrowcircle.png"
              WidthRequest="50"
              HeightRequest="50"
              VerticalOptions="Center" />
              </Grid>
          </Border>
      </DataTemplate>
  </telerik:RadCollectionView.ItemTemplate>

  </telerik:RadCollectionView>

🗓️ Telerik CollectionView is a very useful and easy-to-use component. If you’d like to learn more about it, I invite you to check out its official documentation and explore everything it has to offer.

And you’ll get a result like this:

4. Footer Block

We’ve reached our final block! This section contains the following elements:

➖ A soft gray circle at the end of our UI. To replicate it, we’ll use an Ellipse.

➖ A rounded button positioned horizontally at the center:

<Ellipse 
	Grid.Row="5" 
	Grid.ColumnSpan="2" 
	WidthRequest="360" 
	HeightRequest="160" 
	Fill="#EAF7FF" 
	Opacity="0.9" 
	HorizontalOptions="Center" 
	VerticalOptions="End" 
	TranslationY="110" />
	
<Button 
	Grid.Row="5" 
	Grid.ColumnSpan="2" 
	Text="+" 
	FontSize="32" 
	TextColor="#111111" 
	BackgroundColor="White" 
	CornerRadius="30" 
	WidthRequest="60" 
	HeightRequest="60" 
	Padding="0" 
	HorizontalOptions="Center" 
	VerticalOptions="End" 
	TranslationY="-20"> 
	<Button.Shadow>
	
	<Shadow 
	Brush="#C9DDE8" 
	Offset="0,8" 
	Radius="22" 
	Opacity="0.45" /> 
	</Button.Shadow> 
</Button>

If you’d like to learn more about the Ellipse in .NET MAUI, you can check out the official documentation. There are some really interesting things you can build with it!

You’ll get a result like this:

And that’s it, we’re all done! 🎉 Below, you can see the final result of both screens.

Conclusion

I hope this article helps you understand how to recreate a modern UI from scratch using .NET MAUI. 😎 From structuring layouts with Grid to using BindableLayout for repeated elements, and building dynamic lists with Telerik CollectionView, you now have a solid foundation to create clean and scalable interfaces.

The best part is that these are concepts you can easily reuse and adapt in your own projects to build more flexible 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, Telerik UI for .NET MAUI comes with a free 30-day trial so you can experiment with all 70+ components yourself.

Try Now