What’s New in Xamarin.Forms 4.0

This blog post was written by Alessandro Del Sole, a Xamarin Certified Mobile Developer, Microsoft MVP, author, and much more. He has contributed several books to the Succinctly series, including his latest, Visual Studio for Mac Succinctly. You can follow him on Twitter at @progalex.

With the announced release of Visual Studio 2019 on April 2, Microsoft is also shipping a new major release of Xamarin.Forms, 4.0. This new version includes several improvements and bug fixes, and also some interesting new features that I’ll discuss in this blog post.

In order to try the new features, when you create a Xamarin.Forms project in Visual Studio, make sure you update the Xamarin.Forms NuGet package to the latest version available. At the time of this writing, Xamarin.Forms 4.0 is available as a pre-release package, so you might need to include pre-release packages in the NuGet package manager list.

It is worth mentioning that a preview of these features is also available in Xamarin.Forms 3.6, but they’re still in a pre-release state.

Displaying data with the CollectionView

The CollectionView is a new view in Xamarin.Forms 4.0 that allows displaying a list of data. It aims to be an alternative to the ListView control by providing a simpler API surface and more flexible layout management options. For example, consider the following ContactViewModel class that exposes a collection of Contact objects with the FullName, DateOfBirth, and PhoneNumber properties:

    public class ContactsViewModel
    {
        public ObservableCollection Contacts { get; set; }

        public ContactsViewModel()
        {
            // Populate with sample data
            Contact newContact1 = 
                new Contact { FullName = "Alessandro", 
                DateOfBirth = new DateTime(1977, 5, 10), 
                PhoneNumber = "+39111111" };
            Contact newContact2 = 
                new Contact { FullName = "Graham", 
                DateOfBirth = new DateTime(1980, 1, 1), 
                PhoneNumber = "+1 222222" };
            Contact newContact3 = 
                new Contact { FullName = "Tres", 
                DateOfBirth = new DateTime(1980, 1, 1), 
                PhoneNumber = "+1 333333" };

            Contacts = new ObservableCollection() 
                           { newContact1, newContact2, newContact3 };
        }
    }

If you wanted to display the list of contacts in a CollectionView, you first assign an instance of the ContactsViewModel class to the BindingContext property of the page, then you might write the following XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF4_WhatsNew"
             x:Class="MainPage" Padding="0,30,0,0">

    <StackLayout>
        <CollectionView ItemsSource="{Binding Contacts}" SelectionMode="Single" >
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding FullName}" />
                        <Label Text="{Binding PhoneNumber}" Grid.Row="1"/>
                        <DatePicker Date="{Binding DateOfBirth}" Grid.Row="2"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
            <CollectionView.EmptyView>
                <Label Text="No data is available" TextColor="Red" FontSize="Medium"/>
            </CollectionView.EmptyView>
        </CollectionView>
    </StackLayout>
</ContentPage>

Key points in the CollectionView implementation:

• Like in the ListView, you can bind a collection that derives from IEnumerable<T> to the ItemsSource property.
• Like in the ListView, you can define the user interface of every single item with a DataTemplate object in the ItemTemplate property.
• Differently from the ListView, you no longer need to deal with cells (TextCell, ImageCell, ViewCell…). Not only does this make the code simpler, but it also reduces the number of views that will be rendered at runtime.
• It is easy to provide a view for empty states. For example, if the bound collection is empty, you can show a message or a warning image via the EmptyView property. In the code above, the EmptyView is a Label with some text. Alternatively, you can implement a more complex view with the EmptyViewTemplate property.

From a layout perspective, the CollectionView makes it easy to create horizontal lists by using the ItemsLayoutOrientation object as follows:

            <CollectionView.ItemsLayout>
                <ListItemsLayout>
                    <x:Arguments>
                        <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>
                    </x:Arguments>
                </ListItemsLayout>
            </CollectionView.ItemsLayout>

It is also easy to implement grid views. The following code demonstrates how to accomplish this:

            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>

With the Span property of the GridItemsLayout, you specify how many items should be visible per row.

This is only a quick overview of the CollectionView, so don’t forget to check out the documentation for a full discussion. The CollectionView is also the foundation for the CarouselView, discussed in the next section.

Swiping data with the CarouselView

The CarouselView control is not new in Xamarin.Forms, but in version 4.0 it has been re-implemented and it now derives from the CollectionView. With the CarouselView, you can easily swipe items in a list and it works very similar to the CollectionView, as you can see in the following code:

            <CarouselView ItemsSource="{Binding Contacts}">
                <CarouselView.ItemsLayout>
                    <GridItemsLayout Orientation="Horizontal" />
                </CarouselView.ItemsLayout>
 
                <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.ColumnDefinitions>
 
                        <Label Text="{Binding FullName}" />
                        <Label Text="{Binding PhoneNumber}" Grid.Row="1"/>
                        <DatePicker Date="{Binding DateOfBirth}" Grid.Row="2"/>
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
                <CarouselView.EmptyView>
                    <Label Text="No data is available"
                    TextColor="Red" FontSize="Medium"/>
                </CarouselView.EmptyView>
            </CarouselView>

Notice how you can still implement the EmptyView for situations where the bound collection has no data.

Consistent user interface with Visual

One of the biggest challenges with cross-platform development is being able to create user interfaces that are consistent across devices and platforms. In simpler words, the ability to define controls and views that have the same look and feel, regardless of the platform they run on. In Xamarin.Forms 4.0, this is possible with a new property called Visual, which is exposed by several controls. This property makes it easy to assign a visual style based on the most popular design guidelines, such as the Material design. This feature is not yet in its final state, but it allows you to set a design style as follows:

<Button Visual="Material" />

The current state of Xamarin.Forms 4 has support for Google’s Material design in a few views such as Button, Entry, Frame, and ProgressBar. Browse the official documentation to see how the UI will look using Visual, and for specific system requirements on both iOS and Android which make this big feature available only with specific API sets (especially on Android). You will also find technical details about how this feature provides new control renderers behind the scenes.

Simplified page structure with Shell

The Shell is another important introduction to Xamarin.Forms. It basically provides a single place to describe the visual structure of an application with pages, and includes a common navigation user interface, a search handler, and a navigation service. In its most basic form, the Shell acts as a container of pages like in the following XAML:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ShellDemo"
       x:Class="ShellDemo"
       Title="Shell Demo">
    <ShellItem Title="Home">
        <ShellSection>
            <ShellContent>
                <local:HomePage />
            </ShellContent>
        </ShellSection>
    </ShellItem>
</Shell>

In this code, only one content page is declared (HomePage), but the Shell can contain many. When you declare pages in the Shell definition, the runtime will automatically create a flyout menu with the popular “hamburger” icon, making it easy to navigate to other pages. The ShellItem is the top-level object in the visual structure and it is represented by an item in the flyout. ShellSection groups application contents, and ShellContent contains a list of pages in the app. The Shell automatically generates a flyout menu, but you can define a custom one with simple code like this:

    <Shell.FlyoutHeader>
        <local:FlyoutHeader />
    </Shell.FlyoutHeader>

where FlyoutHeader is a custom view defined in your project.

You can customize the Shell in infinite ways, from contents, to the flyout appearance, to items in the flyout, to navigation configuration and so on. Full support for the Mode-View-ViewModel (MVVM) pattern is included.

The Shell is a very big feature and cannot be easily summarized in a blog post, so it is important that you check out the official documentation for further details and examples.

It is worth mentioning that Visual Studio 2019 has a new project template that allows for generating a Xamarin.Forms project based on the Shell feature.

Conclusion

Microsoft is continuing to invest enormously in making Xamarin.Forms an even more powerful technology that makes it simpler for C# developers to create beautiful, powerful apps for mobile and desktop devices. Xamarin.Forms 4.0 takes several steps forward in all the most important areas, such as performance improvements, UI design, and development experience. If you are new to Xamarin.Forms and want to get started quickly and efficiently, you can download for free my ebook Xamarin.Forms Succinctly 3^rd edition, which targets Xamarin.Forms 3.1 and can give you the foundations to start with this very powerful technology.