Xamarin.Forms: Tips for Beating the Learning Curve

As a first time user learning any new technology or pattern, there’s always a curve, and over the years I’ve stood at the threshold of a product and gazed up that curve to determine how painfully steep it appeared and how long it would take until I was productive. Now, as the Program Manager for Xamarin.Forms, I gather and receive a lot of feedback from first time users, and stand in a position of being able to offer some help.

Tips to Beat the Learning Curve

I’ve curated some great resources to get you over the curve, from our documentation guides to Xamarin University training materials, blog posts, and more. Whether you’re new to Xamarin.Forms or a seasoned user, I think you’ll find something useful below.

Quick Index

Prerequisites Installation Simplified iOS Development Common First Questions Navigation Layout Visual Design Controls

Beyond Basics Customizing Controls Custom Fonts Managing Images Data Storage Push Notifications Authentication Inspecting UI Bonus

The Giddyup: Prerequisites

 

What do I need to install?

Mobile development requires more than a few things before you can be productive, including mobile platform SDKs, an IDE, and some combination of emulators, simulators, and devices. These guides will get you going quickly:

Windows Installation Mac Installation

Also check out this self-guided session from Xamarin University, Getting Started With Xamarin [XAM101].

Simplified iOS Development

We’ve been hard at work simplifying iOS development by introducing the Xamarin Live Player (currently in Preview 2). Xamarin Live allows you to code in Visual Studio 2017 and see your app immediately on device via the Xamarin Live Player app.

When you’re ready to compile and deploy your applications for iOS, or outgrow the Xamarin Live Player’s capabilities, you can connect to your Mac and use the Remote iOS Simulator for Windows.

Common First Questions

 

How do I navigate from one screen to another?

Xamarin.Forms screens are called Pages and use the base class ContentPage. Xamarin.Forms follows a stack concept and you push and pop from that stack. Before you can do that, you need a navigation stack. The easiest way to introduce one is to start your application with a NavigationPage.

Now, from within a ContentPage, you can simply use the Navigation service to push a new page onto the navigation stack:

MainPage = new NavigationPage( new FirstPage() );

await Navigation.PushAsync( new SecondPage() );

For more information about navigation, visit the guide here.

How do I lay out my content?

Xamarin.Forms supports several layout patterns, including Grid, StackLayout, AbsoluteLayout, and RelativeLayout. I recommend you learn to use and love the Grid, as it’s presently the most flexible and performant option.

For highly optimized layouts, explore creating a custom layout, where you can finely control aspects of the measure and invalidation cycles.

Check out our Xamarin University Self-Guided course on Layout in Xamarin.Forms[XAM135].

Awesomeness Alert! Some adventurous community members have recently taken exception to the long held opinion that Xamarin.Forms cannot create highly polished layouts:

Inspired by @adpedley and @devnl latests articles about beautiful UI in #Xamarin Forms, soon will write about recreate the Netflix UI. pic.twitter.com/6Sac0mKXqK

— Javier Suárez Ruiz (@jsuarezruiz) September 11, 2017

Just blogged: Kickass UI in Xamarin Forms: Twitter – https://t.co/gpYdUy6DKc with thanks to @adpedley @xamarinhq #Xamarin

— Steven Thewissen (@devnl) August 25, 2017

This is basically my stop saying you can’t have a polished app via Xamarin.Forms, post 🙂 https://t.co/ZpyMe5Va5T

— Adam Pedley (@adpedley) August 12, 2017

How do I see my design?

You have a few options here. As the Xamarin Live Player gets better and better, it’s a great companion for live editing XAML in the text editor and seeing an instant rendering. A little tip: use an application like Reflector to mirror your device on your development machine.

Our designer team has also been making improvements to the Xamarin.Forms Previewer.

Where do I find _____ control?

Xamarin.Forms provides implementations of many native UI controls across each target platform. This concept of abstraction becomes more clear when you see the mapping of Xamarin.Forms renderers to native controls.

Still looking? Xamarin has a great ecosystem of third party and community controls to fill in the gaps and extend the platform. Spend a few minutes on your favorite search engine, GitHub, and searching NuGet.

Moving Beyond Basics

How do I customize a control?

Out-of-the-box Xamarin.Forms controls provide basic customization possibilities, and we provide doors for when you “hit a wall.” Here are your options:

Platform Specifics

When you need to customize a control for only a specific platform, you can implement a Platform Specific. A good example is one provided to adjust the font size of an Entry to fit the control width.

Effects

Effects are good for when you need to add a customization on each platform to a control, which may be useful across a variety of controls, and when you just need to modify a single property that isn’t currently exposed in the control abstraction. Some common examples are adding shadows or one from the Xamarin.Forms Community Toolkit that I often use to remove the border of an Entry.

Sign up for the live Xamarin University class Using Effects in Xamarin.Forms [XAM330] to learn more.

Custom Renderers

Creating a custom renderer gives you total control of the native platform control for design and behavior. This guide demonstrates creating a simple custom Entry renderer.

Custom renderers are also where you want to go when implementing a control that may not currently exist in Xamarin.Forms, such as a Floating Action Button. Xamarin University covers this topic, as well, for scenarios such as interactive graphs, a custom drawing surface, and more in the live session Xamarin.Forms Renderers [XAM335].

How do I use custom fonts?

While Xamarin.Forms makes a lot of cross-platform development smooth, and while setting font attributes is included, custom fonts require a bit more attention.

We use a custom icon font, WeatherIcons, in our Weather demo app. Once you have the font properly set up in the platform projects, using the font in XAML is pretty simple.

<Label Text="{Binding WeatherIcon}" FontSize="18" Grid.Column="0" VerticalTextAlignment="Center" TextColor="White">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="UWP" Value="/Assets/WeatherIcons.ttf#Weather Icons"></On>
            <On Platform="iOS" Value="Weather Icons"></On>
            <On Platform="Android" Value="WeatherIcons.ttf#Weather Icons"></On>
        </OnPlatform>
    </Label.FontFamily>
</Label>

Where do I put my images?

Like fonts, managing images requires more effort. This is in part due to the way each platform handles images differently, and the variety of sizes and densities each requires or supports. This guide will show you where each expects to find images and how you can load them. When you place them in the right place, referencing them is as simple as <Image Source="waterfront.jpg" />. The platforms will find the image and deliver the proper density for the device.

How can I store data locally?

Each platform has a storage API that Xamarin.Forms exposes via Application.Current.Properties. This API is good for storing simple data.

As your storage needs become more complex, you’ll want to start exploring options like sqlite, Azure Mobile Apps, Realm + Azure, or any number of other options available.

Where do I get started with Push Notifications?

Azure Mobile Apps is a great option for Xamarin.Forms apps. The Azure documentation site includes an article on enabling push notifications in your app.

Other services such as Urban Airship provide components for Xamarin apps to enable use of their APIs.

How do I authenticate with ______ service?

This is fairly dependent on what the service is, but in general I recommend starting with the service’s component to see if they expose an API for authentication. Take a look at using Xamarin.Auth which has built-in authenticators for Google, Microsoft, Facebook, and Twitter. I’ve also used it to authenticate with the Strava oAuth service.

How do I inspect my app UI tree?

Visual Studio Enterprise license holders have access to the Xamarin Inspector for this very purpose! While this is our clear favorite and what we use, there are other commercial and open source projects out there for inspecting mobile apps.

Bonus: Additional “Stuff”

• Checking connectivity is something you’ll probably bake into every mobile app, so check out the Connectivity plugin.
• There are lots of good plugins out there to make cross-platform development easier. Check out this list and browse NuGet and GitHub to discover even more.
• I love to promote and share useful resources, but it’s gonna be hard to top Xamarin University instructor Kym Phillpotts’ recent blog of Xamarin Tools and Resources.
• Our performance guide is “recommended mandatory” reading.

Get Coding

I hope you discovered a few tips that are useful for you, and I encourage you to share your own discoveries as you begin the journey. If you happen to tweet something, please mention me (@davidortinau) so I can add it to my list and help share with others.

Discuss this post in the Xamarin Forums