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.
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:
✍️ 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:
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.
Adding the Title, Description and Divider Line
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:
Then, I populated the data in the ViewModel:
And finally, for this simple example, I set the BindingContext to the AvatarViewModel in the page’s code-behind:
Now, add the BindableLayout in your XAML:
🗓️ If you’d like to learn more about BindableLayout, you can check out this article.
➖ Star Rounded Button
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:
Populating the ViewModel
Now let’s add some mock data to populate our list:
Adding the XAML
You need to add the namespace in order to use the component:
Then, add the Telerik CollectionView to your XAML like this:
🗓️ 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:
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:
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
