Because Microsoft no longer makes any mobile devices doesn’t mean it doesn’t have a mobile strategy. It’s strategy is to be wherever developers are. And for mobile that’s why it’s delivering its own .Net-based cross-platform development tools in the shape of Xamarin.
While the original intent of Xamarin was to provide a common core for code with separate user interface implementations for each target OS, it still required having to have some understanding of the native OS implementations of key UI constructs. So, to simplify development and reduce the need to bring in additional skills, the Xamarin team introduced Xamarin.Forms. By providing a single set of controls that render across platforms, it aims to offer a single design experience for both Android and iOS apps.
By providing a standard way of designing UI, Xamarin.Forms moves away from apps having a native look and feel to apps having a Xamarin look and feel. That’s certainly an arguable decision, as to whether to impose the alien Xamarin UI on Android and iOS for the sake of development consistency. But the industry is moving that way anyhow: For example, pick up a banking app on iOS or Android and it’ll look and behave much the same across both platforms. As a result, users are less likely to be locked into an ecosystem, with device cost the main factor in them choosing something different; with UI tied to app rather than OS, transition between devices is a lot easier.
Introducing Xamarin.Forms 4.0
The upcoming release of Xamarin.Forms 4.0 focuses on delivering more consistent design between the two mobile platforms.
It has new navigation features and a new approach to adding visuals to controls.
Perhaps the most important of these is the introduction of a new UI structure in Shell, which makes it simpler to define an application UI, letting you concentrate on code rather than design. Microsoft describes Shell as an evolution of existing design concepts that are common across mobile applications (and on desktop apps): Master Detail pages, Navigation pages, and Tabbed pages. You implement it with a single file containing your application description, a set of common UI patterns, extensible templates, and a URI-based approach to in-app navigation.
The new Visual Studio 2019 release has a template pack that adds Shell support for Xamarin.Forms apps. Otherwise, you can use NuGet to install the beta version of Xamarin.Forms 4.0 in your IDE of choice. Because this is beta code, it’s not quite ready for production applications; though with production release due soon, it’s well worth spending time getting used to the new features and considering how your application may take advantage of Shell and other features.
Building page navigation with Shell
At the heart of Shell is a hierarchy of XAML navigation elements, with three main components:
- ShellItem is the top level, using a flyout to host multiple ShellItems. These each can contain several ShellSections.
- Each ShellSection adds a new navigation element, using bottom tabs to group sections of application content and functionality in ShellContent pages.
- At the bottom of the hierarchy, ShellContent pages are equivalent to a detail view, and they have their own top tab navigation when a section contains multiple ShellContent pages.
Giving users a hierarchical approach to application content makes a lot of sense when they’re new to an app, or when you have a limited amount of content you want to deliver. But more advanced and experienced users could find this approach restrictive, so Xamarin.Forms will offer a more custom application-routing scheme that gives pages their own URI, adding route information to ShellItem, ShellSection, and ShellContent XAML tags.
In-app navigation with routes
The URI scheme used by Xamarin.Forms is based on the familiar HTTP, with a RouteScheme that defines how a route is constructed (it’s best to use “app,” because your route is internal to your app), a route host that’s equivalent to a domain name, and the route itself made up of the route information from the various parts of the application navigation hierarchy inside your application’s namespace.
Your code adds Route names to your XAML, and so a link to a specific page view in a banking app might be app://mybank.com/bankapp/account/checking/transfer. Here, I’m using bankapp as my application namespace and am navigating directly to ShellContent labeled transfer in a ShellItem for account and a ShellSection labeled checking.
Routes can be registered directly, linked to pages that aren’t part of the Shell hierarchy. Once a page is registered in a route, it can be called using the Shell router using the same navigation model as Shell pages. You can use routes as a way of injecting content into pages and controls, directing content as appropriate.
A new look: Material Visual
One key element of Xamarin.Forms 4.0 is the new Material Visual control design (parts of which have shipped in the current Xamarin.Forms 3.6 release). The first implementation of a new consistent set of control themes, Material Visual is based on Google’s Android Material Design. It’s a workable cross-platform design language, with controls in Material Visual giving you a similar look and feel on both Android and iOS.
Material Visual is only the first of a planned family of visual implementations, with future versions supporting Microsoft’s Fluent and Apple’s Cupertino. Start by adding the appropriate NuGet package to your code, which binds the new design language to the existing visual components, and sets up Material Design renderers. To get started, set the Visual property of a application page to Material, after initializing the renderers in your application, in AppDelegate.cs for iOS and in MainActivity.cs for Android.
Material Visual is a promising approach to richer, more native-like Xamarin.Forms code. However, it’s still not a one-stop shop for application design, because you still need to set up renderers in a different file for each target OS. It’s not a perfect cross-platform UI; there will still be differences between iOS and Android as a result of how they both render native controls (which themselves host the Material Visual design), so key elements like fonts and shadows will be based on the OS defaults. A recent challenge showed how these new controls could be used to update existing Xamarin-based apps.
Microsoft has done a lot to support Xamarin in Visual Studio 2019, making it easier to build, test, and deploy code across multiple platforms. The release of Xamarin.Forms 4.0 is going to be an important step for Microsoft’s mobile developer audience, especially with the challenge of the growing popularity of Google’s Flutter.