5 Things to be Excited About Xamarin.Forms 4.5

David Ortinau

Every new release of Xamarin.Forms contains dozens of improvements. Today, we are thrilled to share that Xamarin.Forms 4.5 is now available bringing you AndroidX, new capabilities for creating responsive UI, and controls “in the box” to speed your development. Let’s look at what is new in Xamarin.Forms 4.5 with several features to get excited about!

One: AndroidX

On February 14th, we shared the stable release of the new AndroidX libraries from Google. This new set of libraries replace the Android Support libraries we have all become familiar with. Now in Xamarin.Forms 4.5, use AndroidX by default just like Xamarin.Essentials version 1.5. Delivering both cross-platform UI and platform services together. This requires no change to your code. If you notice any undesirable side-effects, please open an issue here.

Be sure to update them both in your projects. Refer to our blog for guidance on migrating your existing apps.

Two: VisualStateManager Target

Until now, VisualStateManager has focused directly on the controls to which it is specifically applied. Adding Target to setters provides flexibility to change properties on any control within the visual tree; not just the control the VisualStateManager is attached to. For example, in our XamarinTV sample app there is a video player. The Play button has two states for playing and pausing baked into the ImageButton control.

Xamarin.Forms 4.5 Image vsm targetname videoplayer

<BoxView x:Name="Screen" BackgroundColor="Black" Opacity="0.6"/>
<ImageButton x:Name="PlayPauseToggle" 
        Source="{StaticResource PauseIcon}" 
        Clicked="PlayPauseToggle_Clicked"
        BackgroundColor="Transparent"
        HorizontalOptions="Center" 
        VerticalOptions="Center">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="PlaybackStates">
            <VisualState Name="paused">
                <VisualState.Setters>
                    <Setter Property="Source" Value="{StaticResource PlayIcon}"/>
                    <Setter TargetName="Screen" Property="BoxView.Opacity" Value="0.9"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState Name="playing">
                <VisualState.Setters>
                    <Setter Property="Source" Value="{StaticResource PauseIcon}"/>
                    <Setter TargetName="Screen" Property="BoxView.Opacity" Value="0.6"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

To trigger the change between states you write code to do this explicitly.

VisualStateManager.GoToState(PlayPauseToggle,
    (e.State == MediaElementState.Playing)
    ? "playing"
    : "paused");

Even with triggering the state change on the button, by using the TargetName to address the BoxView behind it, we can also change the opacity of that control. Check out our previous blog post on using this new feature, as well as the resources below.

Three: Shell Modals

Whether you are using tabs or a fly-out menu, Shell is the easiest way to get started with your cross-platform mobile application. A favorite aspect of using Shell is the URI based navigation service that is omnipresent. Now, the ability to display modal pages uses that very same URI method. By using the new Shell.PresentationModel attached property, can describe your intention for any page you want to present as a modal.

<ContentPage x:Class="RegistrationModal" Shell.PresentationMode="ModalAnimated">
    // your content
</ContentPage>

Since this page is not part of your primary navigation, it has no route defined in AppShell.xaml. In order to navigate to that page, register a route for it that can then reference your GotoAsync call.

The following is equivalent to Navigation.PushModalAsync(new RegistrationModal()).

Routing.RegisterRoutes("registration", typeof(RegistrationModal));
Shell.Current.GoToAsync("//login/registration");

 

Xamarin.Forms 4.5 Image modal registration

Four: PlatformSpecifics

Thanks to Xamarin.Android, Xamarin.iOS, and Windows, a major advantage to using Xamarin.Forms is easy access to native platform UI. When possible, we bring common concepts into alignment and provide a cross-platform API. When things don’t align, it sometimes makes more sense to provide something specific to the platform it applies to. In 4.5 we have a handful of those. Special thanks to Joe Manke and Andrei Misiukevich for their contributions!

For a complete list of platform specifics across Android, iOS, Windows, and more check out our documentation.

Five: Features in Preview

While we are working through stabilizing new features and controls, it is extremely helpful to package them into stable releases. Then enabling you to opt-in by setting convenient feature flags. Such is the case for several new controls. Get a complete list of flags from our source code here. Please share your experiences by reporting any issues.

Before proceeding, be sure to add the flags to your App.xaml.cs constructor.

Xamarin.Forms.Device.SetFlags(new List<string>() { 
    "StateTriggers_Experimental", 
    "IndicatorView_Experimental", 
    "CarouselView_Experimental", 
    "MediaElement_Experimental" 
});

 

CarouselView and IndicatorView

We are continuing to work through feedback on CarouselView and IndicatorView. As we do, the list gets shorter! Sure, we could keep things in preview or beta for a year, but your feedback has shown us that these controls are useful today. In addition to general improvements, we have changed the way you connect the controls together.

To make this connection, you now reference the name of your IndicatorView from the CarouselView .

<CarouselView IndicatorView=”MyIndicators”>…</CarouseView>

<IndicatorView x:Name=”MyIndicators”/>

The carousel also has implemented four visual states to make it easier to style. The following represent the visual state for:

  1. CurrentItem – currently displayed item.
  2. PreviousItem – previously displayed item.
  3. NextItem – the next item.
  4. DefaultItem – remainder of the items.

SwipeView

Reveal contextual content when swiping in specific directions by wrapping any control with a SwipeView. The community has been very inspired by this control and have been using it in many different ways! We are working hard to stabilize this control by implementing many requested improvements.

StateTriggers

We have added state triggers in support of new dual-screen experiences, the new MediaElement, and generally to be more useful.

  1. Adaptive Trigger (PREVIEW) – reacts to changes in the width and height of an application window.
  2. Compare Trigger (PREVIEW) – occurs when two values are compared.
  3. Device Trigger (PREVIEW) – occurs when running on the specified device.
  4. Orientation Trigger (PREVIEW) – occurs when the device orientation changes.

MediaElement

Brand new in this release is MediaElement, a base control for playback of audio and video. See this control featured in our XamarinTV sample app, which was featured during the Microsoft Surface Dual-Screen live event from Redmond. The control is extremely easy to use! Add the control to your layout, then set the source to any secure media URI.

<MediaElement Source="http://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4" />

Let the native platform present the playback controls, or provide your own to achieve just the right desired user experience. This is a powerful control and we will be sharing more details in the future.

Get Started with Xamarin.Forms 4.5 Today!

This release contains over 50 other fixes, such as how to completely remove UIWebView when performing App Store reviews. For a full rundown, check out the release notes. Update your project NuGets today and please report an issues.

Related Resources:

 

9 comments

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

  • Jack Bond 0

    “changed the way you connect them controls together”

    Them controls?

    • David OrtinauMicrosoft employee 0

      Fixed, thanks!

  • Pankaj Nikam 0

    First and foremost, congratulations on the new release. I wanted to know if the new MediaElement can handle DRM content? Please guide.

  • Michael de Bruin 0

    These new changes in combination with the roadmap for Hot Reload/Restart sounds great. However I’ve been developing a bit in Flutter and that framework seems to be way easier to master and be productive. Even though I think programming in Dart for Flutter looks incredibly ugly and hard to keep maintainable (just my opinion)
    Are there any considerations in making it easier to beat the learning curve for developing the UI? I’ve been following several tutorials, but still doesn’t seem to be able master developing the UI.

    • David OrtinauMicrosoft employee 0

      Practice! I’ve been building UIs for decades using a wide array of solutions and nothing beats practice. Choose a UI, chop it up, and build it. Pick a layout control and flex all the attributes. I highly recommend watching some of Kym’s videos while he does this exact thing. You’ll get lots of tips along the way. https://www.youtube.com/channel/UCBaSaklFd9rexcr7fL9kkMA

      Additionally, all that code is on GitHub. Explore it.

      We do have some thing we are working on that will reduce the concepts needed to get started. I’d love to talk to you about that. Shoot me an email: david.ortinau@microsoft.com

      • Michael de Bruin 0

        Hi David,

        Thank you for your reply.
        I’ve send you an email regarding your reply. I’ve seen a few streams of that channel and they truely are very helpfull indeed.

      • Erik 0

        I teach Xamarin courses at University and I have to say that students mostly do not like XAML and they prefer C# only code for UI. And they like Flutter fluent API and how easy they can create and use widgets. The other thing is that students prefer things that just works out of the box and run up fast because they do not have enough patience to wait.

  • Jeremy Bell 0

    Struggling with the AndroidX migration steps. It’s not clearly spelled out all in one guide. I added the migration NuGet package, and installed the other AndroidX packages it recommended, and my app builds and runs, which I guess is a good sign. However, it didn’t say anything about the old references to the support library in the resource/layout files, which I only found out I needed after looking at a git diff in one of the Xamarin.Essentials examples.

    The “Migrate to AndroidX” context menu option does not appear in Visual Studio and I can’t make it appear. I have it turned on in the Xamarin Android settings per one of the blog posts about it, but can’t get it to actually appear in the context menu for the Android app.

    New project templates in Visual Studio don’t appear to be updated, in fact they’re still using Xamarin.Forms 4.3, and no updates listed anywhere in Visual Studio installer or the extension manager… Is there a cononical “Android Xamarin.Forms Shell based sample using the latest Xamarin.Forms 4.5 with the AndroidX libraries” sample somewhere I can just compare to my own project line by line to make sure I have everything?

    I’m not even sure how to review the app code to determine which support libraries were used in the app and from where. I know they were used by the Xamarin.Forms and Xamarin.Essentials packages behind the scenes, but is that the only place? Did I need to have those libraries referenced directly or were the Xamarin.Forms and Xamarin.Essentials references enough? The migration package said to install Xamarin.AndroidX.Legacy.Support.V4, but why? What’s using that? Is it based on the minimum SDK?

    And I’m not sure how to verify the app is fully migrated to AndroidX aside from removing the support libraries from my own project and seeing if it still builds and runs – is that sufficient?

  • Adam Diment 0

    Hi David I’m confused by the section on Android X. In one sentence you write “This requires no change to your code.” then in the next “be sure to update them both in your projects” and “Refer to our blog for guidance on migrating your existing apps.”

    so my questions are a) update both of what?

    And b)- do we have to change our code or not?

    Thanks!

    Adam

Feedback usabilla icon