Welcome to the Shell Era: Xamarin.Forms 4.0 Released

David Ortinau

For the past year, Xamarin has been on a focused journey to improve your productivity by reducing your complexity when building cross-platform mobile applications. Notice the reference to “your” complexity, and not some abstract notion of complexity. That is because the Xamarin team spends countless hours obsessing over feedback, using that information to conduct studies and have honest one-on-one conversations to learn how we can best serve you.

From Xamarin.Forms 3.0.0 through 3.6.0 we have shipped 55 key features you told us “should just work”. Many of those features were contributed by the community. We also learned from you that getting started with Xamarin.Forms should be easier and quicker, and that navigation is a constant area of frustration.

Today, we are publishing Xamarin.Forms 4.0.0 with Shell, a simplified, navigation-aware container for making building mobile applications more efficient. We first shipped a preview of Shell at Microsoft Connect() in December 2018 with the Tailwind Traders reference project, and we have listened closely to you about what you liked, what you didn’t, and what adjustments we could make to deliver on this promise of simplicity.

For additional background, check out the MSDN article “Introducing the Xamarin.Forms Shell”.

Let’s highlight the top features of this release including Shell, Android fast renderers, image source unification, and accessibility.

Release Highlights

As this is a major release, you would be right to expect some pretty big changes. Still, it should be a pretty smooth upgrade for you as we’ve tried hard to only introduce things that will make your development life better: Shell (of course), Android fast renderers which are now enabled by default, unified image source types, and tab ordering for increased accessibility.

 

The Shell

On the surface, Shell provides an extremely simple syntax to establish your app’s flyout and tab menus. It also introduces a powerful route based URI navigation service in addition to the existing navigation service. The real power of Shell, however, is underneath. All renderers implement the “fast renderer” pattern, and everything is easily extensible by data templates and renderers. This new architecture introduces the foundation for future Xamarin.Forms development that will enable more expressive animations, transitions, and interactions.

To quickly get started using Shell, use the new Shell template in Visual Studio 2019 shipping today. It’s equally easy to migrate an existing application to use Shell. For more details on using Shell, check out our updated documentation:

Android Fast Renderers

You may recall version 2.4.0 when we introduced fast renderers for Button, Image, and Label to drastically reduce the number of view groups needed to render those controls. This pattern has proven to work as well as expected, and is now the new performance standard for the renderers that Shell implements. As a result, now is the time to remove the “preview” label, unseal them for you to extend, and use them by default. Be sure to review any custom controls or third party controls that depend upon these renderers to make sure everything works as expected, if not better. Should you find that you need to continue using the old-style renderers, we have introduced a flag for that purpose. In your MainActivity.cs add this flag to opt-in to legacy renderers.

global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");

Image Source Unification

You may have noticed that icons and image sources throughout different controls didn’t all implement the same types. In 3.5.0 we introduced the amazing FontImageSource which makes it extremely easy and fun to use font glyphs to decorate your app, however you couldn’t use it everywhere that icons and images were needed because of this….until now! From this point forward everything implements ImageSource. You can now use FontImageSource, embedded resources, files, and URIs everywhere without impedance.

Button.Image // from FileImageSource
MenuItem.Icon // from FileImageSource
NavigationPage.TitleIcon // from FileImageSource 
Page.BackgroundImage // from string
Page.Icon // from FileImageSource
Slider.ThumbImage // from FileImageSource

Accessibility

Xamarin.Forms is a native cross-platform framework, and this means you have the inherent advantage of always having native accessibility features at your fingertips. We continue working towards improving the ease with which you can make your apps more accessible by now controlling the focus order directly in Xamarin.Forms. When you have a modal that goes away, or when you navigate from page to page, it’s important to tell the device’s screen reader which element has focus. Something should have focus. In order to now do this, you can set the TabIndex on any VisualElement and the native OS will take care of the rest.

<Label AutomationProperties.IsInAccessibleTree="false" 
               Text="Turn on your screen reader and swipe between elements. The elements should be read in ascending order. It should *not* read Skip. It should *not* read this text." />
<Label TabIndex="0" Text="This will be read first and have focus"/>
<Button TabIndex="1" Text="Next Focus"/>

Thank You Contributors!

As always, we want to acknowledge all the amazing contributors and our community who go above and beyond to collaborate with us in making Xamarin.Forms better and better with each release. Xamarin.Forms 4.0.0 is a wonderful release of which we hope you’re all as proud as we are. Thank you!

  • Adrian Knight
  • Akihiko Odaki
  • Almir Vuk
  • Andrei Misiukevich
  • Andrei Nitescu
  • Artm Utin
  • Brian Macomber
  • Chris van de Steeg
  • Dan Siegel
  • Daniel Luberda
  • David Roqueni
  • flyofsky
  • genriquez
  • Gerald Versluis
  • Ione Souza Junior
  • Jeremy Marcus
  • Joe Manke
  • Joris Vergeer
  • Kevin Petit
  • Krzysztof Swierczek
  • Matthew Richardson
  • Matthew Robbins
  • Matthijs ter Woord
  • Morten Nielsen
  • mtz
  • Patrick Allwood
  • Paul Datsiuk
  • Piotr Konowalski
  • Sanya Andreichuk
  • Yaser Moradi
  • Yourina
  • Yun Chen
  • Zhu Xinghan

 

Update to Xamarin.Forms 4.0.0 Today

This is just the tip of the iceberg. Xamarin.Forms 4.0.0 includes tons of improvements; too many to recap here. Check out the release notes, and updated documentation for Shell.

To update your existing projects, open your Visual Studio NuGet package manager, check the pre-release box, and install Xamarin.Forms 4.0.0 along with any related packages such as Material Components with Visual or Maps.

Migrating pre-release Shell code to 4.0.0? There are a few things you’ll want to quickly update:

  • Route, RouteHost, and RouteScheme are not needed. Remove them.
  • Styles that began with “Shell” have been renamed to eliminate redundancy. For example, “Shell.ShellBackgroundColor” is now “Shell.BackgroundColor”.

Feedback is always welcome! If you encounter any problems or have suggestions, please open up an issue on GitHub.

Reference apps on GitHub:

Live Release Party

Join the Xamarin.Forms team, myself and special guests this Wednesday (May 22, 2019) for a live stream on YouTube where we talk about the features, tell some stories, show demos, and upgrade an open source app to Xamarin.Forms 4.0 with Shell.

12 comments

Discussion is closed. Login to edit/delete existing comments.

  • Khosrou Golzad 0

    Is there any functionality for showing badges on the tabs? 

      • Khosrou Golzad 0

        oke thanks!

  • Wil Wilder Apaza Bustamante 0

    Talking about ”honest one-on-one conversations”
    I reached out to you last year about critical bugs in the XF framework. All I got was a couple of ‘we’re looking into it’ responses and then silent treatment.
    Frustration over the continuous app crashes caused by xamarin bugs in the end led to contract termination.
    Good to know you keep releasing new things. How many unresolved issues do you still have on github?

  • Adam Seebeck 0

    In Visual Stuido, Shell is the only Xamarin startup template not to include UWP (grayed out checkbox), is this something thats going to be added in the future?

    • Adam Seebeck 0

      Hey David, thank you for answering this question in your 5/28/2019 post “Xamarin.Forms 4.0: Getting Started with Shell”.
      Here is his answer: “Will Shell be coming to UWP? There is an open pull request that implements Shell on UWP. Keep any eye out there for progress.”

  • Charles Roddie 0

    These new features have very large hidden costs.1. While these have been developed, and now that they are released, ordinary maintenance of the Xamarin.Forms repo has completely collapsed. Just look at the PRs (https://github.com/xamarin/Xamarin.Forms/pulls?q=is%3Apr+is%3Aclosed) to see how many core bugs have been fixed in the last month. One, two, out of hundreds remaining? And look at the front page of issues: obviously fixing Shell/Visual is taking priority over fixing the underlying platform. While this is going on, the team is relying on the open source community to do the core work, but their PRs are not even being merged.2. The new features have been released as mobile-only, causing Xamarin to brand itself as mobile-only. At a time when there are more and more calls for a cross-platform framework including desktops, Xamarin Forms is counting itself out.This is high-level mismanagement and calls for serious rethinking, because if the Xamarin.Forms repo becomes unmaintainable, then Xamarin.Forms doesn’t have a future.

  • Marc George 0

    With all the changes for the Android world, what is the backward compatibilty limit especially for a Xamarin Forms cross-platform app?

  • David Byrd 0

    Hey David – Great article and I enjoyed going through it. 2 (hopefully) quick questions.
    1. Can I apply a ViewModel to the Shell so I can control what tabs are displayed based on permissions/status of the user? I am using Prism MVVM and would like to utilize Shell for my current project.
    2. You mention the FontImagesource. Can I use FontAwesome5 Pro for the FontImageSource? If not, is there some other way to get FontAwesome or other font icons as the icons?
    I created an ItemTemplate attempting to utilize a Label control to display FontAwesome5 icons. A label setup this way works for displaying FontAwesome icons on other pages of the app. However I am getting the following error: “System.NullReferenceException: Object reference not set to an instance of an object.” I think this is related to the Shell Items, but not sure how.
    Here is my AppShell.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:views=”clr-namespace:BS.Views”             x:Class=”BS.AppShell”>    <FlyoutItem>        <Shell.ItemTemplate>            <DataTemplate>                <Grid>                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width=”0.2*” />                        <ColumnDefinition Width=”0.8*” />                    </Grid.ColumnDefinitions>                    <Label Text=”{Binding FlyoutIconUnicode}” Margin=”5″ HeightRequest=”45″>                        <Label.FontFamily>                            <OnPlatform x:TypeArguments=”x:String” Android=”Font Awesome 5 Pro-Solid-900.otf#Font Awesome 5 Pro Solid”  iOS=”Font Awesome 5 Pro” />                        </Label.FontFamily>                    </Label>                    <Label Text=”{Binding FlyoutTitle}” Grid.Column=”1″ VerticalTextAlignment=”Center” />                </Grid>            </DataTemplate>        </Shell.ItemTemplate>    </FlyoutItem></Shell>
    What am I doing wrong?

  • Khosrou Golzad 0

    I have a problem guys, I have now on many places in my app Application.Current.MainPage = new NavigationPage(new Pages()); 
    and with Xamarin Forms 4.0 this doesnt work and crashed the app, how can I temporary work around this? I do want to implement the new navigation but for now I have to fix this. PLease help.

  • نعمان . 0

    Hi, Collectionview :  How to load data on scroll down event  (LoadMoreElement ) ???

  • Sarthak Chauhan 0

    Hi I am not able to set Shell as navigation page on andriod in iOS it’s work fine on android it page becomes just blank . I have tried this on xaminars shell sample also . Just try to write this line MainPage = new NavigationPage(new AppShell()); in your App.cs . I want my custom navigation to use on some button click rather then GoToAsync . It works fine on iOS the issue is on only Android

Feedback usabilla icon