Getting started with a UI and not die trying in Xamarin Forms

Throughout my career at Xamarin, working with XAML has been one of my main passions. 💚💕  One of the most common comments I have heard is that “I want to start creating UIs but I don’t know how to start.” And precisely for this reason, it inspired me to make this post, I want to share the tips that I use so that you can make the creation of UIs with XAML your best friend and in a very easy way! 🤓

To learn how to develop UI and not die trying, we are going to apply a “tactic” that I use that has worked very well for me! For a better understanding, we will base this topic on a real UI which will be divided into the following parts:

1⃣. Analyze the structure of our UI before the code (We will see it in this post)

2⃣. Once we understand how to get this structure, we will learn how to replicate it in XAML! (We’ll see it in our next post)

Let’s start!

Before starting with the code, it is very important to be clear about what we are going to develop, in this way we can identify the indicated Layout for the design, so we must first analyze the UI!  We will apply the explanation to our sample named Fashion Mobile App UI obtained from Dribble.

Thinking about the ideal structure for our layout

Let’s forget about writing code for a moment, we are going to focus on being able to detect the best Layouts structure so that our code is as optimal as possible, in this case, we are going to define the main structure of the first screen using a Grid, for this we must identify the number of rows and columns contained in our design. If you want to know more information about Grid, you can read this post.

It’s easy, to identify the correct number of Rows with which we should work, just literally count the number of components in as many rows as the design contains. And it applies the same criteria to the definition of columns. (In this case, all elements are in one column)

For our second screen, we are going to do a little more complex analysis on how to identify the rows and columns for a Grid structure, we will have two screens, in the first, you will see the identified Rows and in the second you will see the columns that contain it.

And done! We already have our UI defined in Rows and Columns with which we can start to structure our App! I hope you have understood how we can make this division effective, if you have any questions let me know! You will also see in the next article how we can replicate this user interface in XAML.

Finally, I have a question for you! 🧐

How would you divide the third screen which we do not analyze here! I’ll wait for your answer! 💚

Thanks for reading! 💚💕

Spanish post: https://es.askxammy.com/no-se-como-empezar-a-crear-ui-en-xamarin-forms-que-debo-tener-en-cuenta/