Before starting, to get the best out of the post, I’ll leave you some instructional notes so that you have a better experience reproducing the UI:
Let’s divide the original design into blocks
To better understand, I have divided the original design into blocks, which are listed in the order in which we will be reproducing each one, these are:
Let’s start by creating our first screen, which we’ll name Contacts.xaml.
Let’s establish our main Layout: This layout is the one that will contain all the elements that make up our UI, for this, we will use the Grid.
As we see in the image above, this block is made up of three controls, which we will detail below:
- Contact title:
- Add Button:
Continuing with de Favorite Block, let’s replicate a contact list, which is even similar to Instagram Stories 🧐🧐, for this, we will use a Horizontal CollectionView.
Also, to round the edges of the images we will use a Frame. Check out this super interesting technique!
To finish with our first screen, let’s work with the “Active Contacts” block, now we will add a set of contacts followed by their status!
To do it, let’s use a Frame, and inside, let’s add a CollectionView with Vertical Orientation to display the list!
For the “Messages” block, we will create another page called “MessagePage.xaml”. As main layout we’ll be also using a Grid!
This screen is composed of the following components:
- Main title and message indicator:
- Messages from contacts: