Learn how to build a Valentine-inspired login interface with .NET MAUI. We’ll go through the process step by step!
We find love in many forms: in the people around us, in that hobby we enjoy so much, in wearing clothes that make us feel good … and also in every step of our professional growth.
Yes, even in that love for creating beautiful, functional and well-thought-out user interfaces using XAML.
For many, designing UI can be a challenge. But like everything in development, that challenge is overcome by learning, practicing and daring to create. That’s why in this article we’re going to build a Valentine’s-inspired UI, taking as reference a design found on Dribbble and adapting it into an implementation using .NET MAUI.
We’ll build step by step a registration and a login screen. We’ll break down each section with its corresponding code blocks, so you can walk away not only with a visually appealing interface, but also with practical ideas you can apply to your own projects.
So get ready, because today we’re putting a little love into code. ❤️
Explanation & Insights
Before we get started, let’s go over a few key points that will help you better understand and replicate the UI:
- Visual guide: Before we begin, I’ll share a preview of the UI we want to achieve. This image will be divided into color-coded blocks to make it easier to identify each section throughout the article.
- Code blocks: Each block will be explained separately. Every section will include a textual explanation, a code snippet with the exact code you need to write to achieve the result, and a screenshot showing how the UI evolves step by step.
- No styles: For the moment, we won’t use styles. This way, even developers who are just starting to build UIs can follow along more easily and understand the core structure without extra complexity. ❤️
Breaking Down the Dribbble Design into Blocks
To make this easier to follow, I’ve divided the original design into clear blocks. We’ll build each part one at a time, in the order you see below.
Main Structure
To create the first screen, we’ll start by creating a file called SignInPage.xaml. This file will contain the elements corresponding to blocks one and two of the block-based structure shown earlier.
Before we begin adding elements, it’s important to define an efficient structure, and this is where the layout comes into play. Choosing the right layout allows us to organize elements more easily within the screen. Since this is a simple example with a single vertical column of elements, we’ll use VerticalStackLayout as the main layout.
The VerticalStackLayout allows the elements to be vertically centered. Additionally, I added 30 of horizontal padding and a spacing of 40 between all the elements contained on this screen.
Here are a few important points to highlight:
➖ AspectFit: We added the image using the Aspect property with the value AspectFit, which allows the image to fit entirely within the available display area without being distorted. You can learn more about the differences between the various image aspect options in this article.
➖ SemanticProperties: We added a semantic description, which helps screen readers understand what element is being displayed on the screen. You can read more about this topic in the article Creating Accessible Apps with Semantic Properties in .NET MAUI.
Let’s continue adding the Label with the title:
And to finish this first block, let’s add the description or subtitle:
At this point, your UI should look similar to the following example:
Sign-in Content Block
Continuing with the second block, let’s take a look at the elements that make up this component:
- Two input fields: One for the username and one for the password
- Two buttons: The first with the fields, “Login”; and the second for “Create an account”
- Two labels: One for the “Forgot your password” message and another for “Don’t have an account”
Let’s start with the two fields for the username and password 👇
Here, in addition to the username Entry, we add a password Entry and set the IsPassword property to True so the characters are hidden as the user types.
The Login Button
Forgot Your Password Label
This text is composed of two different styles, and since a simple cannot handle multiple styles at the same time, we’ll use to achieve this.
Don’t Have an Account Label
Create an Account Button
And that’s it! 😍 We’ve completed this second section, which means the first screen is now finished. At this point, your result should look like the following:
Create Account Page
We’ve reached the final stretch! And the last screen! 😎
Since this is a new screen, we’ll create a file called CreateAccountPage.xaml. Just like on the previous screen, we’ll use a VerticalStackLayout as the main layout.
Let’s continue with the username, email and password input fields. To keep this example simple, we won’t add a show/hide password feature.
Finally, let’s add a button, text for the terms and conditions, and another button to navigate to the Sign Up action.
And the final result should look like the following:
With these simple steps, you’ve learned how to work with various .NET MAUI components and have successfully built your first two screens! 😍
Conclusion
And that’s it! 🎉 In this article, we explored how to build a Valentine-inspired login and sign-up UI using .NET MAUI with XAML. By breaking the UI into clear blocks and working step by step, you were able to focus on layout, and components without adding unnecessary complexity.
Remember, creating beautiful interfaces is not just about visuals—it’s about crafting experiences users will enjoy interacting with.
If you have any questions or would like me to dive deeper into specific topics, feel free to leave a comment—I’ll be happy to help! 💚
See you in the next article! 🙋♀️
