XamarinT2 Dark_1200x303

Xamarin Forms allows us a great deal of control over UI design. Get acquainted with page types, layout and graphic controls.

One of the most important things when we are developing an application is the UI design (besides the functionalities, of course). The design is the first voice of our application—everyone knows that the first impression is the most important, because it’s difficult to change once made. That’s why it’s better to pay special attention to the design from the beginning of our development.

In this article, we will be learning the basic concepts and order of hierarchy that we need to know to be able to start a design in Xamarin Forms! It’s important to make a list of all the topics that we have to learn when we are starting with a new tool, so please take notes! 🗒

Let’s Start!

It’s a best practice in Xamarin Forms to always do the UI design (FrontEnd) in the eXtensible Application Markup Language (XAML). To begin designing any screen with XAML, there’s a structure that we need to follow to organize the components we will use. In the following image we can quickly see this structure:

From broader to more narrow: Page, layout, graphic controls

As shown above, each part of the Xamarin Forms’ UI has a specific usage and simplifies the building process. Let’s learn what they are and what they offer, one by one.

1. Pages

A page is the principal container of a screen. There are different page types that bring different functionalities depending on the type selected.

I know that an image is worth a thousand words, let’s see!

Page types include content, master detail, navigation, tabbed, templated, and carousel

Learning the Concepts!

ContentPage MasterDetailPage NavigationPage TabbedPage TemplatePage CarouselPage
Sets the Content property to a single View. Manages two panes of information (Master and Detail property). Manages navigation among other pages using a stack-based architecture. Allows navigation among child pages using tabs. Displays full-screen content with a control template Allows navigation among child pages through finger swiping
<ContentPage></ContentPage> <MasterDetailPage></MasterDetailPage> <NavigationPage></NavigationPage> <TabbedPage></TabbedPage> <TemplatePage></TemplatePage> <CarouselPage></CarouselPage>

If you want to read more information about pages, you can find it here.

2. Layouts

Once we’ve selected the page type that we will be using, we have to select the right layout! Basically, a layout is a container that indicates how the graphic controls on the screen will be organized. There are different types of layouts to make our design experience awesome!

Layout types include stack layout, absolute layout, relative layout, grid, and scrollview

Learning the Concepts!

StackLayout AbsoluteLayout RelativeLayout Grid ScrollView FlexLayout
Organizes views linearly, either horizontally or vertically. Organizes views by setting coordinates & size in terms of absolute values or ratios. Organizes views by setting constraints relative to their parent’s dimensions & position. Organizes views in a grid Rows Provides scrolling when a view can’t fit entirely within the bounds of the screen. Organizes views horizontally or vertically with wrapping.

If you want to read more information about layouts, you can find it here.

3. Graphic Controls

Inside the selected layout, we have the graphic controls. These are what makes the communication between the user and the application possible, because they are what receives the user interactions directly.

There are many control types such as: Buttons, Labels, ListViews, among others. You can use whichever ones you need. Let’s see in the image!

Graphic controls include ActivityIndicator, BoxView, Button, DatePicker, Editor, Entry, Image, Label, ListView, Map, OpenGLView, Picker, ProgressBar, SearchBar, Slider, Stepper, Switch, TableView, TimePicker, WebView, EntryCell, ImageCell, SwitchCell, TextCell, ViewCell

But … How Can We Start to Practice? 🤔

When we are learning anything, it’s very important to put into practice what we learn. That’s why I recommend the following:

  • Look for pages that contain app templates to reproduce the UI Design. This will help you to better understand the goal of each component explained above. For example: https://pttrns.com

  • Look for app template samples that use different graphic components and try to reproduce them! This page is so good for this: https://www.snppts.dev

Thanks for reading!!! 💚

About the Author

Leomaris Reyes

Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of  Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.

Related Posts


Comments are disabled in preview mode.