Xamarin Forms Roadmap

Table of Contents

Xamarin Forms Roadmap. This post is part of the Xamarin Roadmap that you can check if you didn’t. It is good to remember that this guide can be considered as a complement, it can not be taken as the final guide.

There some things you need to know before to start this Xamarin Forms roadmap as a guide. I really recommend you to check this link.

Note: As I said in the introduction post, what I have done is to take as a base the roadmap proposed by Xamarin University to create a new one. So, If you want to see the original base I really recommend you to go there before they migrate it to Microsoft Learn.

Xamarin.Forms

Xamarin.Forms is perfect for cross-platform applications that display “forms over data” where the primary goal of the application is to display data in a standardized way. This track focuses on building Xamarin.Forms applications that target iOS, Android and Windows.

Introduction to Xamarin.Forms (XAM120)

Recommended Prerequisites: Introduction to Cross-Platform Mobile Development (XAM110)

Xamarin.Forms lets you define a single UI that you share across all your supported platforms. This maximizes your ability to share code: you can share your UI and your business logic. In this module, you will create a new Xamarin.Forms application and define your shared UI in code. You will also see how to access platform-specific features such as the phone dialer or camera that do not have a shared-programming model integrated into Xamarin.Forms.

  • Learn the basic structure of a Xamarin.Forms mobile app
  • Define a shared UI for Android and iOS
  • Deploy an app from Visual Studio to Android and/or iOS

Useful links

Exploring on your own

XAML in Xamarin.Forms (XAM130)

Recommended Prerequisites: Introduction to Xamarin.Forms (XAM120)

Xamarin.Forms lets you define your UI using the eXtensible Application Markup Language (XAML). This gives you a clean separation of UI and behavior and makes it easy to utilize a design expert and design tools. This module shows you how to define your UI in XAML. You will create pages and add controls, all in markup. You will also see how to access UI elements from code so you can subscribe to UI events and update UI properties as your data changes.

  • Create the UI, and add controls for a Xamarin.Forms app using XAML
  • Access XAML-based UI elements from code
  • Subscribe to XAML-based UI events

Useful links

Exploring on your own

Layout in Xamarin.Forms (XAM135)

Recommended Prerequisites: XAML in Xamarin.Forms (XAM130)

Xamarin.Forms apps run on a wide range of devices with varying screen sizes and pixel densities. It is challenging to create a UI that looks good and behaves correctly in all cases. Xamarin.Forms helps solve this problem by providing flexible layout containers that can calculate the size and position of your UI controls automatically; they even recalculate if the user rotates the device or changes the size of the app’s window. This module contains in-depth coverage of StackLayout and Grid, the two most popular layout containers in Xamarin.Forms. It also shows you how to add scrolling when your UI is too large for the available screen area.

  • Display views in a vertical or horizontal list using StackLayout
  • Display views in rows and columns using Grid

Useful links

Exploring on your own

Resources and Styles in Xamarin.Forms (XAM140)

Recommended Prerequisites: XAML in Xamarin.Forms (XAM130)

Using the same fonts and colors across your entire UI creates a consistent look-and-feel. Xamarin.Forms provides a way to define these values in one place and look them up everywhere they are used; this guarantees consistency across your app and makes updates simple. This module shows you how to define and apply a Resource both in code and in XAML. It also shows you how to group multiple settings into a Style so you can apply them all at once.

  • Create consistent UI using Resources and Styles
  • Apply the user’s accessibility choices with built-in Styles

Useful links

Exploring on your own

Recommended Prerequisites: Layout in Xamarin.Forms (XAM135)

Part of planning your app’s architecture is deciding how the user will move between Pages. Will users need to more forward/backward through a sequence of pages? Does your app have one start page or are there several top-level pages that are all important? Your choice of navigation should work well with your app’s content and feel native to each platform you target. This module shows you how to code two common navigation patterns: stack and tab. It includes guidelines to help you decide which pattern is appropriate for your app. The module also covers how the navigation infrastructure automatically adapts to the runtime platform and shows you how to customize the behavior when needed.

  • Choose between stack and tab navigation for your app
  • Implement stack and tab navigation
  • Display transitory content using modal pages

Useful links

Exploring on your own

Data Binding in Xamarin.Forms (XAM270)

Recommended Prerequisites: XAML in Xamarin.Forms (XAM130)

Most apps need to load data from code-behind into their UI and transfer user-entered data to their code-behind models. Data Binding offers a clean way to perform both tasks. Data Binding uses binding objects that tie two properties together and keep their values in sync as either changes. This module shows you how to create bindings both in code and in XAML. You will also see how to implement value converters for use when the types of the two properties are different.

  • Synchronize data between your UI and code-behind using bindings
  • Minimize coupling between your UI and code-behind to enable easy UI changes

Useful links

Using ListView in Xamarin.Forms (XAM280)

Recommended Prerequisites: Data Binding in Xamarin.Forms (XAM270)

Most apps need to present data collections in their UI. In this module, you will add a Xamarin.Forms ListView to your app, populate it with a collection of data objects, and handle item selection. You will also use the built-in cell templates to lightly customize the appearance of each row. Finally, you will implement two common user-experience patterns: pull-to-refresh and context actions.

ListView has a limited selection of built-in cell styles. These standard cells handle common cases and you should use them if they meet your needs. If not, you can create a custom cell that will uniquely represent your data and match the overall look-and-feel of your app. This module shows you how to define a row template, how to add headers/footers, and how to display grouped data. You will also survey several performance-tuning strategies including cell caching.

  • Create a ListView and populate it with items
  • Respond when the user interacts with the ListView
  • Customize the appearance of a ListView row by using built-in Cell types
  • Create custom cell layouts for a ListView
  • Use multiple cell layouts in a single ListView
  • Group cells into sections

Useful links

Exploring on your own

Master-detail and Drawer Navigation (XAM290)

Recommended Prerequisites: Data Binding in Xamarin.Forms (XAM270), Using ListView in Xamarin.Forms (XAM280), Navigation Patterns in Xamarin.Forms (XAM205)

Building a great application means creating clear navigation path through your content. As your application grows in complexity, you need to provide a UI structure that allows users to quickly switch between multiple screens. In this module, you’ll explore two UI techniques using a master-detail relationship. You’ll learn how to switch between several pages of content using drawer navigation, and you’ll create a true master-detail UI that enables users to browse a large collection of data while taking advantage of available screen space. This module includes an in-depth look at the Xamarin.Forms MasterDetailPage and shows you best practices on co-ordinating between Master and Detail pages.

  • Choose between split and pop-over for your master view
  • Switch between pages using pop-over drawer navigation
  • Display a collection using master-detail split view

Useful links

Exploring on your own

Design an MVVM ViewModel in Xamarin.Forms (XAM320)

Recommended Prerequisites: Data Binding in Xamarin.Forms (XAM270), Using ListView in Xamarin.Forms (XAM280), XAML in Xamarin.Forms (XAM130), Mobile Application Architecture (XAM301)

We’re going to focus on how to properly architect your application to separate the presentation from the business logic and data that drives it. We’ll be looking at three primary patterns which are popular in the mobile world: Model-View-Controller (MVC), Model-View-Presenter (MVP), and Model-View-ViewModel(MVVM).

  • Identify when to use the Model-View-ViewModel pattern
  • Use a viewmodel to drive visual behavior
  • Improve code testability through data-bindable properties

Useful links

Xamarin.Forms Effects (XAM330)

Recommended Prerequisites: Data Binding in Xamarin.Forms (XAM270)

Xamarin.Forms UI elements are model objects that are converted to native platform controls at runtime. To take full advantage of each platform’s unique style and patterns you can work directly with the native controls rather than the Xamarin.Forms elements. This module shows you how to use Effects to access and customize the native peer controls. This gives you the same power to modify the appearance of your UI as a native developer.

  • Apply an effect in Xamarin.Forms
  • Create an effect to customize behavior
  • Add configuration options to an effect

Useful links

Exploring on your own

Xamarin.Forms Renderers (XAM335)

Recommended Prerequisites: Xamarin.Forms Effects (XAM330)

What if your Xamarin.Forms app needs to display an interactive graph, a drawing surface, or a color picker? Xamarin.Forms lets you extend the set of existing UI elements by writing your own custom control to handle these cases. In this module, you will see how to use a Renderer to implement the UI and behavior for a fully custom control. In addition, you will use a Renderer to modify the behavior of an existing control to meet your app’s specific needs.

  • Modify an existing control’s renderer
  • Create a new control with a new renderer
  • Send notifications between a Xamarin.Forms element and native controls

Useful links

Exploring on your own

https://github.com/luismts/xamarin-roadmap/master/roadmaps/en/xamarinforms-roadmap.mdMarkdown with by ❤wp-gfm

Considerations

This Xamarin Forms roadmap is on GitHub in a public repository where everyone can support it or give us recommendations (PRs are welcome 😎). In the same way, the content will be updated here.

Of interest…

Resources:

[bucket id=”11123″ title=”Thanks for reading”]

Share this content!

Facebook
Twitter
LinkedIn
Telegram
WhatsApp