What’s New in Xamarin.Forms 4.0 | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (73)Flutter  (136)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (964)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (147)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (341)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

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"
             x:Class="MainPage" Padding="0,30,0,0">

        <CollectionView ItemsSource="{Binding Contacts}" SelectionMode="Single" >
                    <Grid Margin="5">
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />

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

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:


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

                <GridItemsLayout Orientation="Vertical" Span="2" />

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}">
                    <GridItemsLayout Orientation="Horizontal" />
                    <Grid Margin="5">
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        <Label Text="{Binding FullName}" />
                        <Label Text="{Binding PhoneNumber}" Grid.Row="1"/>
                        <DatePicker Date="{Binding DateOfBirth}" Grid.Row="2"/>
                    <Label Text="No data is available"
                    TextColor="Red" FontSize="Medium"/>

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"
       Title="Shell Demo">
    <ShellItem Title="Home">
                <local:HomePage />

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:

        <local: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.


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 3rd edition, which targets Xamarin.Forms 3.1 and can give you the foundations to start with this very powerful technology.


Share this post:

Comments (14)

[…] What’s New in Xamarin.Forms 4.0 (Alessandro Del Sole) […]

Everything discussed in this article is only available for Android and iOS

Yes. Xamarin may add this in other platforms in their future versions.

Do you have the source code available for download?

You can check out all the sample projects from this location

Thanks. Looking at the Samples.

I have a menu that uses a ListView and I wanted to change it to a CollectionView. There was very little to change. When I click on the menu button, I am getting a blank page. If I change my start page from main page to menu page, the page displays.

Being a novice in Xamarin and without going into detail about the code, can a CollectionView be used as a menu page or should I just stick with the ListView?

CollectionView is developed as an alternative for ListView. So, you can use CollectionView instead of ListView. It is supported only in iOS and Android now. Before migrating, please check out the following links which give the difference between them and also their API differences. This will help you to ensure that you have done it right.


Hi! I simply wish to offr you a big thumbs up for the
excellent info you’ve got here on this post. I will be coming
back to your websdite for more soon.

Thanks for yyour marvelous posting! I truly enjoyed reading
it, you might be a great author.I will alwways bookmark your blog and will often come back in the foreseeable future.
I want to encourage one to continue your great writing, have a nice afternoon!

You should take part in a contest for one of the most useful sites on the web.
I am going to highly recommend this website!

Hi there, this weekend iis pleasant inn support of
me, since this point in time i am reading this fantastic informative piece of writing here at my home.

Quality content is the key to interest the viewers to pay a visit the site, that’s what
this site is providing.

Magnificent beat ! I would like to apprentice whilst you amend your website,
how can i subscribe for a weblog site? The account helped me a appropriate deal.
I were tiny bit acquainted of this your broadcast offered shiny clear concept

محمدحسین فخرآوری
محمدحسین فخرآوری


for menu item 1 ,item 2

1) HomePage1 = load data from post
2) go to page local:HomePage2
3) back HomePage2 > clear data


Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed