Xamarin.Forms 4 – What is New?

Posted by: Gerald Versluis , on 2/9/2019, in Category Xamarin
Views: 4718
Abstract: Xamarin.Forms 4 will be releasing soon. This tutorial contains the most important highlights of what is to come in this new version.

If you have read my previous article(s) right here in the DotNetCurry(DNC) magazine, then you might have read one about the cool new things in Xamarin.Forms version 3. Xamarin.Forms v3 was released in May of 2018. At the time of this writing, it is just December and the next major version is already upon us.

One thing is for sure: the release cycle is going fast, but what are the new features in store for us?

In this article, I will show you all the latest bits!

What is Xamarin.Forms?

Let’s very briefly touch on what Xamarin.Forms is.

With Xamarin, you can build cross-platform apps based on .NET and C#. No more Java and Objective-C or Swift. Everything you can do with these languages and platforms, can be done with Xamarin in C#.

This is possible because of the Mono project.

If you have been around long enough, you might remember Mono. It was the Linux variant of the .NET framework. Basically, what the Mono project did was implement each new .NET API or feature in their own Mono framework, making it the first fully featured, cross-platform .NET solution. The people who have worked on Mono are mostly also the people that founded Xamarin.

The solutions Xamarin offers you is based on binding libraries that project the native APIs onto their .NET equivalents. This allows you to write cross-platform apps based on a technology that you already know and love. The remaining problem that was left when Xamarin was introduced is that the user interface still needed to be implemented in a native way.

For Android, this means with AXML files which contain some kind of XML dialect, and for iOS you have to use Storyboards, which are also XML files under the hood. To overcome this last hurdle in true cross-platform development, Xamarin.Forms was created.

With Xamarin.Forms, you can define your UI through C# code or XAML in an abstract way. For instance, you define a Button object and the Xamarin.Forms libraries will translate this to their native equivalent. This way, you can develop your interfaces cross platform, but that same interface will still look native on each platform.

If you still need more information on what Xamarin.Forms is exactly and how it works internally, I would recommend to read up in the Microsoft Docs: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/.

The Forms libraries have been around for quite some time now and developers began to love or hate it. Either way, Xamarin.Forms is here to stay and Microsoft will release the stable version of this new major version over the coming months.

Are you a .NET/C# developer looking for a resource covering New Technologies, in-depth Tutorials and Best Practices?

Well, you are in luck! We at DotNetCurry release a digital magazine once every two months aimed at Developers, Architects and Technical Managers and cover C#, Patterns, Xamarin, .NET Core, ASP.NET MVC, Azure, DevOps, ALM, TypeScript, Angular, React, and much more. Subscribe to this magazine for FREE and receive all previous, current and upcoming editions, right in your Inbox. No Gimmicks. No Spam Policy.

New in Xamarin.Forms 4

Of course, this new major version will contain a lot of stability fixes, bugfixes and minor improvements across the board, but version 4 will also have some real big changes. Let me walk you through the most exciting ones.

Everything described here is in preview at the time of writing and will require you to download preview NuGet packages or even preview versions of tooling and templates. When Xamarin.Forms 4 is generally available, using it will be a lot easier. If you want to play around with this while still in preview, make sure to check the prerequisites.

Xamarin.Forms Shell

To make it easier for newcomers to get started, Shell was invented. Basically, what Shell does is provide you with a whole lot of bootstrapping so you can quickly jump in and start focusing on the content and features.

Shell offers you out of the box navigation with flyout menus, bottom tabs and top tabs. And with the URL based navigation, it makes it very easy to deep link to anywhere in your app. With Shell you can define the structure and navigation of your app in a single file. Microsoft described it as “the evolution of MasterDetailPage, NavigationPage and TabbedPage”.

Everything is template-based so everything will look great from scratch, but you still have the ability to customize all the elements to your needs. All of this is based on existing Xamarin.Forms technology, so you don’t have to learn any new skills or tooling, just install the new templates and you can get going.

A sample Shell page might then look like this in XAML:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyStore"
       FlyoutBehavior="Disabled"
       x:Class="MyStore.Shell">

  <ShellItem>

    <ShellSection Title="Home" Icon="home.png">
      <ShellContent>
        <local:HomePage />
      </ShellContent>
    </ShellSection>

    <ShellSection Title="Notifications" Icon="bell.png">
      <ShellContent>
        <local:NotificationsPage />
      </ShellContent>
    </ShellSection>

  </ShellItem>
</Shell>

Depending on if something is a ShellItem or ShellSection for instance, it will determine if something is a top-level section or a section that lies deeper, as well as if it will show up in the flyout menu or in the top or bottom tabs. It is a bit hard to explain in text, but once you get to play with it, it will soon become clear.

An example of what a Shell page with some items might look like, can be seen in the iOS screenshot here.

iOS-shell-page

Figure 1: iOS screenshot with a Shell page containing items

At the time of this writing you will have to enable a feature flag in your project to get started with Shell. Also, don’t forget to download the (pre-release) Xamarin.Forms 4 NuGet package into your project. To enable the feature flag, go to the App.xaml.cs file and make sure to add the lines from the code block below.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        // Set the feature flag
        Forms.SetFlags("Shell_Experimental");
        // Instantiate new shell object AFTER setting the feature flag
        MainPage = new Shell();
    }
}

All of this should help you increase your productivity while decreasing complexity of the app. On top of that, Shell has been developed with rendering speed and memory footprint in mind, so it should stay clear of much heard complaints when using Xamarin.Forms.

To read about all the details of Shell, head over to the Microsoft Docs: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell.

Visual

As I mentioned in the introduction of this article, Xamarin is focused on creating a native look-and-feel. On the other hand, you see a lot of apps and developers of apps shift towards a more consistent look across platforms. Solutions like React Native and Flutter are leaning more towards drawing their own controls and this way, achieving the exact same look on iOS as well as Android.

With Visual Xamarin is now trying to do more or less the same thing.

You can think of Visual as a templating engine. When enabling Visual, you can specify what theme you would like your app to show. Right now, only Material is implemented which is based on the Google Material Design styling. In the future, other design languages including Fluent, Fabric and Cupertino will be supported.

What happens when you enable Visual is that the Forms libraries will then use different renderers to draw the controls. So, depending on which theme you will select in the future, you will just get alternate renderers that will help you achieve consistency across platforms. Not just in looks, but also in user-experience.

However, the controls are still rendered to native controls so minor differences exist mostly in terms of font, shadows, colors and elevation. In the image here, you can see a screenshot of iOS and Android side-by-side with the Material Visual enabled.

xamarin-material-visual

Figure 2: iOS and Android side-by-side with the Material Visual enabled

To enable Visual today, download the Forms 4 NuGet package into your projects and enable the feature flag. For this, add this line in your Android and/or iOS project in the MainActivity or AppDelegate of the respective projects:

Forms.SetFlags("CollectionView_Experimental");

CollectionView Control

If you have worked with Xamarin.Forms before, then you will know the ListView control for sure. You can hardly create any app without using it, but it can also be a bit of a pain to work with. When not implemented the right way, you can easily create performance issues with the ListView. In addition, some often requested features are not, and cannot be implemented on the current control.

There have been several attempts to overcome this, or at least provide some alternatives. One control that has also been wrestled with, is the carousel. This has been a separate page, but also a control and is incorporated in the standard toolbox of Xamarin.Forms right now. But the development on this control isn’t very active, so its features are limited.

You might also know about the FlexLayout, which was introduced in the last major Forms update described in a previous article.

Therefore, a new control had to be created which does basically the same thing as the ListView, only better. Because of that, the team at Xamarin has now implemented the CollectionView.

Things that are easily possible with the CollectionView, but not with the ListView for instance are:

  • Horizontal list: you can easily create a list that scrolls horizontal instead of just vertical. You can even implement your own layout if you wish.
  • Columns: specify columns in your list. Have items shown side-by-side instead of only on top of each other. You can see an example of this in Figure 3.
  • Granular scrollbar progress: with the ListView, you would just know if the user had scrolled yes or no. With the CollectionView, it is also possible to interact whenever the user is actually scrolling. It seems like a minor thing, but when you want to do some advanced UX and animations, this is a must-have.
  • Empty state: you can specify a DataTemplate to show for whenever your collection is empty. No more swapping visibility of views to tell the user that there is nothing to show, it is built-in, right into this new control!

 

xamarin-collection-view-columns

Figure 3: The new CollectionView control with two columns

The XAML for the image in Figure 3 is very simple and straight-forward. You can see it here.

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2" Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="60" WidthRequest="60" />
                <Label Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1" Grid.Column="1" Text="{Binding Location}"
                       LineBreakMode="TailTruncation" FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

If you have worked with Xamarin.Forms and the ListView, you might see some similarities, but also differences. You can still specify the ItemSource and work with ItemTemplates but the template will not be a Cell anymore.

A lot of this is possible since the CollectionView does not work with Cells anymore. Instead, it works with DataTemplates, that you might already know from the ListView, but then in terms of how you would like each Cell to look like.

There are a lot of nice things coming to the CollectionView, but today not all of it is available yet. Also, there might be changes in the API down the road so take that into account when choosing to start developing with this right away.

To read up on this promising control, have a look at the corresponding Microsoft Docs page: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview.

Other improvements

A lot of improvements bigger or smaller are included in this release as well. There has been a great community effort to fix a whole lot of bugs or add small features that have been annoying developers for a long time now. Think of things like a read-only Entry, an ImageButton or the ability to set a maximum amount of lines for your Label.

These changes are not specific to this new 4.0 version, but are mostly included in the releases that are stable today, still they are worth mentioning since there is a big, active and very nice community behind Xamarin.Forms and the team at Microsoft is really friendly and supportive. If you ever thought to yourself: why isn’t this included or why isn’t this working, consider contributing it yourself and doing something back for the framework you love.

Another notable issue that the team at Microsoft has been working on, and is still working on is the performance on Android. It has already improved a lot, and they are working on making it even better.

You can use all of this, right now!

As I mentioned a couple of times before, you will need the previewing package of Xamarin.Forms 4 at the time of writing and also set a feature flag in your project manually. If you are reading this by the time that this new version is generally available, then it should just work by installing the right Forms package.

Editorial Note: Readers are requested to check the current status of Xamarin Forms by looking up https://blog.xamarin.com or checking the Github page.

If you need to install the preview packages, simply find the “show prerelease versions” checkbox in the screen where you find and add the NuGet packages, the ones tagged 4.0.0-beta will pop up then.

It goes without saying that there might be some bugs and instabilities here and there, but it is cool to get a peek inside the new upcoming version of this great framework. Xamarin.Forms is open-source these days, so you should be able to see some of the work on the repository as well or maybe even contribute yourself: https://github.com/xamarin/Xamarin.Forms/

Summary

In this article you have seen the most important highlights of what is to come in Xamarin.Forms 4. There are a few resources that might take you a step further. Have a look at this blog post for example: https://blog.xamarin.com/xamarin-forms-4-0-preview/. This will refer you to some great sample apps that show off these new goodies.

I’m not sure if there is a target date for this to become generally available, but I expect the wait to be short. The introduction of Xamarin.Forms 4 has been done at the Microsoft Connect(); event, where a lot more news around Xamarin was announced. You can read more on that in this blog post here: https://blog.xamarin.com/connect-2018-xamarin-announcements/.

You might also want to look into the new Visual Studio 2019 for Mac that is in preview right now and will align the experience even more with the Windows Visual Studio variant. I have written a short blog post with my first impressions here: https://blog.verslu.is/tools/visual-studio/visual-studio-mac-2019-preview-glance/.

I am very much looking forward to this new version of Xamarin.Forms and all the new stuff that we get to work with. Especially the CollectionView allows for a lot greater UI tweaks that were not possible earlier. I am looking forward to what you will create with it, if you have anything to show, please do let me know!

This article was technically reviewed by Mayur Tendulkar.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Gerald Versluis (@jfversluis) is a full-stack software developer and Microsoft MVP (Xamarin) from Holland. After years of experience working with Xamarin and .NET technologies, he has been involved ina number of different projects and has been building several apps. Not only does he like to code, but he is also passionate about spreading his knowledge - as well as gaining some in the bargain. Gerald involves himself in speaking, providing training sessions and writing blogs (https://blog.verslu.is) or articles in his free time. Twitter: @jfversluis Email: gerald[at]verslu[dott]is . Website: https://gerald.verslu.is


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook