​

Figure: Bad Example - Xamarin project targeting a single platform

It is possible to implement beautiful and complex UI designs in Xamarin.Forms, especially given the rich ecosystem of plugins and templates available (see rule: Do you know where to find the best Xamarin resources?). Using drawing APIs like SkiaSharp or the new shapes and path APIs built into Xamarin.Forms (Note: this is an experimental feature) there is no UI that you can't implement cross-platform. Even so, 100% of the platform native APIs are exposed in Xamarin, so if you wanted to you could still implement any UI natively on each platform and call it using your shared code with a custom renderer.

Figure: Good Example - cross-platform mobile app targeting iOS and Android with a shared codebase

Figure: The platforms you can target with each development environment – in most situations a Mac works best

Note: More platforms are coming in 2021 when Xamarin.Forms evolves into MAUI, see: Introducing .NET Multi-platform App UI.

If you want to develop for Android, wearOS, or Tizen, you can use Visual Studio on either Windows or macOS. If you want to target UWP, you must use Windows. If you want to develop for iOS, tvOS, macOS, or watchOS, you can now develop using Windows or Mac (using Hot Restart on Windows) but must use a Mac to publish your app to the App Store. If you want to target all these platforms you will need access to both Windows and Mac.​

Tip: If you use a Mac you can run Windows through virtualization, using VMware Fusion, Parallels or VirtualBox. If you use Windows, there are cloud-based Mac services you can use for your Apple OS builds. 

MVVM allows for loose coupling between data, business logic, and UI. In Xamarin, UI is usually defined in XAML (although you can declaratively define your UI in C# code too). Your UI is called a 'view' - a view can be a page or a UI element, although UI elements that are not complete pages are more often referred to as controls. 

Figure: Bad Example - Logic and properties are in the code behind, which decreases maintainability and leads to antipatterns like async void

Figure: Good Example - Values are bound to properties of the ViewModel, and actions are bound to Commands in the ViewModel​

Xamarin supports MVVM out of the box, but there are several MVVM frameworks available that enhance this functionality. For example, some MVVM frameworks support "convention over configuration", allowing you to just code your View and ViewModel and let the framework hook them up for you. Some include:

• Prism: Prism is an MVVM framework that was developed initially for WPF but has since been ported to Xamarin Forms. It is stable and mature. https://github.com/PrismLibrary/Prism
• FreshMVVM: FreshMVVM is a framework that was built from the ground up specifically for Xamarin Forms. It is open-source and maintained by a Microsoft and Xamarin MVP. https://github.com/rid00z/FreshMvvm
  
• MVVMLight: This is another framework built especially for Xamarin, although it is not currently under active maintenance. https://github.com/lbugnion/mvvmlight
  

Figure: Bad example - screenshot of XAML previewer with blank controls​

A simple solution to this problem is to use design-time data. By importing the relevant namespaces into your XAML file, you can specify placeholder data that the previewer interprets to show how your UI will render with data loaded.
 
These are the namespaces to import, and the declaration to use them:

 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

Figure: Good example - screenshot of XAML previewer with design-time data

If your Xamarin and Visual Studio versions are up to date these namespaces will automatically be included in any new XAML file.​

​

Figure: Bad Example - rebuilding your app every time to see small UI changes

This problem is partially solved by Design Time Data (see rule: Do you use design time data?), but this still doesn't show you how things change as you interact with them.

​To get around this problem use Hot Reload. This lets you make changes to your XAML while debugging your app - as soon as you save your UI will update, without having to stop and rebuild your app.

Figure: Good example - hot reload enable screenshot Windows

Tip: This works on the iOS simulator, the Android emulator, and physical iOS and Android devices.

• ​Resource Dictionaries
• CSS
• Visual

Figure: Bad Example - same styling defined and repeated multiple times​

Figure: Good Example - Styles defined once in resource dictionary and applied to controls

Resource Dictionaries and CSS provide similar capabilities, but Resource Dictionaries are the best way to style your Xamarin applications. CSS in Xamarin is not full, web-standards compliant CSS, but rather an alternative way to write Xamarin styles than Resource Dictionaries. CSS in Xamarin does not currently support the full range of properties available, but it may be more comfortable for those familiar with web development.

Visual offers a much more granular level control over the look and feel of your application. However, this increase in granularity comes with a proportionally increased level of complexity. Rather than providing a style, you need to define a custom renderer for every control you want to define the look of.

Visual is suitable for large teams with a design heavy focus, where branding is of paramount importance. The advantage of Visual is that you can specify it at individual control level, at page level, or at whole of app-level to ensure your entire app is consistent.

This Visual Studio extension (now for Windows and Mac) is valuable for Xamarin work, it provides time-saving​ short cuts for several things, including (but not limited to):

• Model and viewmodel creation
• Intellisense between views and viewmodels
• Importing of assets (images, fonts, etc)

Importing images is the 'killer feature' - with one click you can import images into all the required folders. Without it, you need to create individual image assets for each device resolution and manually copy them to the corresponding folder for iOS and Android, and then update the manifest XML files. Using mFractor saves 30-60 minutes for every image imported into a project.

Xamarin also provides several other options for optimizing Android builds and improving performance. Additionally, you can use Android's new bundle format (rather than apk) so that smaller builds can be targeted to individual hardware specifications.​

Figure: Using the d8 compiler and r8 code shrinker can improve your Android app performance, and enabling startup tracing can help you identify performance issues

For more information, see: https://devblogs.microsoft.com/xamarin/optimize-xamarin-android-builds/

​Xamarin comes with a built-in UI testing framework, Xamarin.UITest​. This allows you to write UI tests that ensure your app's UI behaves as expected. UI tests in Xamarin.Forms follow the Page Object Pattern (POP), see: https://channel9.msdn.com/Events/Xamarin/Xamarin-Developer-Summit-2019/Page-Object-Pattern-and-UITest-Best-Practices​

General

Awesome Xamarin Forms is a curated list on GitHub of a bunch of resources for Xamarin. This includes controls, effects, behaviors, tools, and more. It's a good 'one-stop-shop' for everything Xamarin. https://github.com/jsuarezruiz/awesome-xamarin-forms.

Weekly Xamarin is a weekly newsletter sent every Friday or Saturday. It's a community-curated list of all the latest Xamarin news, blog posts, and podcasts. http://weeklyxamarin.com.

Learning

The best video courses for learning Xamarin are Asfend Yar Hamid's real-world app series on Udemy: https://www.udemy.com/user/asfendyar/

The best book for learning Xamarin is Xamarin.Forms Projects by Daniel Hindrikes and Johan Karlsson: https://www.packtpub.com/product/xamarin-forms-projects-second-edition/9781839210051.

Events

SSW hosts a Xamarin Hack Day every year: https://xamarinhackday.com.

​Controls

Xamarin has a thriving and passionate community and ecosystem. Many Xamarin developers have made awesome controls available either as open-source libraries, NuGet packages, or both. A lot of these can be found at the Awesome Xamarin GitHub page linked above. Additionally, a number of commercial options are available.

Xamarin Community Toolkit: This is a community-driven set of controls, effects, behaviors, and extensions that make add a lot of functionality you are likely to reuse in your projects. https://github.com/xamarin/XamarinCommunityToolkit.

SyncFusion:  SyncFusion provides a set of beautiful controls and templates for a range of use cases and scenarios. There is also a community license, which allows you to use it free for anything earning less than $1m a year. https://www.syncfusion.com/xamarin-ui-controls.

Telerik: Progress has made their Telerik UI available for Xamarin.Forms. Telerik provides a range of controls focused on enterprise and business applications. https://www.telerik.com/xamarin-ui​.

Live Streams​

The best Xamarin stream is Kym Philpott's weekly stream on Twitch: https://www.twitch.tv/kymphillpotts.

There is a strong community of Xamarin streamers regularly producing awesome content. A curated list can be found here: https://aka.ms/xamstreamers.

​