Xamarin.Forms Comes to Surface Duo and Surface Neo

David Ortinau

Today we are announcing the preview availability of our cross-platform dual-screen support for the Surface Duo and Surface Neo, two new and amazing devices coming from the Surface team. Previously, we debuted Xamarin.Android and Xamarin.Forms support for the SDK for Surface Duo. Now that the Windows team has unveiled support for the Surface Neo, we are ready to preview our new dual-screen support library for Xamarin.Forms.

Xamarin TV demo app running on a Surface Neo emulator

From the Microsoft campus in Redmond, WA today, we live-streamed our Developer Day M365 keynote and hosted dozens of amazing customers to showcase these new device experiences. Featured during the event was our new dual-screen, cross-platform sample application, XamarinTV. The sample demonstrates how easy it is to adapt your existing Xamarin.Forms applications and take advantage of dual-screens.

TwoPaneView

At the core of the dual-screen sdk for Xamarin.Forms is the new TwoPaneView, patterned after the UWP control of the same name, and additionally optimized for cross-platform use. Depending on the design pattern you wish to employ, the TwoPaneView may be right for you. Take for example this layout from XamarinTV. To the left, in Pane1, we host initially a browse page, and in Pane2, a search page.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns:local="clr-namespace:XamarinTV.Views"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen"
    x:Class="XamarinTV.Views.MainPage"
    Visual="Material">
    <dualScreen:TwoPaneView
        x:Name="twoPaneView">
        <dualScreen:TwoPaneView.Pane1>
            <local:BrowseVideosView/>
        </dualScreen:TwoPaneView.Pane1>
        <dualScreen:TwoPaneView.Pane2>
            <local:SearchVideosView/>
        </dualScreen:TwoPaneView.Pane2>
    </dualScreen:TwoPaneView>
</ContentPage>

 

 

 

When the content is displayed on a single pane, only Pane1 is rendered until you span both screens. Notice on both Surface devices there is a hinge area that you want to account for so content is visible at all times. The TwoPaneView handles that for you, no matter what orientation or posture the device is in.

Dual Screen Info

While TwoPaneView may meet a lot of your needs, you may find that a Grid or CollectionView is best suited for your content. So you need to enlighten them to be aware of which pane they are running on, the available screen size, and where the hinge is. For these purposes, we are also introducing the DualScreenInfo helper within the same Xamarin.Forms.DualScreen package. This helper provides useful information such as:

  • SpanningBounds when spanned across two screens this will return two rectangles indicating the bounds of each visible area. If the window isn’t spanned this will return an empty array.
  • HingeBounds position of the hinge on the screen.
  • IsLandscape indicates if the device is landscape. This is useful because native orientation apis don’t report orientation correctly when application is spanned.
  • PropertyChanged fires when any properties change.
  • SpanMode indicates if the layout is in Tall, Wide, or Single-Pane mode.

Bonus Controls

While we were having a blast building the XamarinTV demo, we discovered there were some features we really wanted to add to Xamarin.Forms. Additionally, we had already heard from you that these were features you would like as well. So in addition to TwoPaneView and the Xamarin.Forms.DualScreen helpers, we have also included previews for MediaElement and AdaptiveTriggers. These new controls are available in Xamarin.Forms 4.5.0 starting in pre-release 4. To enable them, add the following feature flags to your App.xaml.cs:

public App()
{
    Device.SetFlags(new string[]{ "MediaElement_Experimental", "StateTriggers_Experimental" });

    InitializeComponent();
}

 

MediaElement for Video and Audio

MediaElement is contributed by Microsoft MVP Peter Foot who showed tremendous endurance working with us to get this pull request merged. In true Xamarin.Forms fashion, this control leverages the native media controls on each platform to provide a unified, cross-platform component. In XamarinTV, we use this for video playback and it works really well! For more information about using MediaElement visit our new documentation guide.

<MediaElement
    x:Name="VideoPlayer"
    Source="{Binding VideoSource, Converter={StaticResource VideoSourceConverter}}"
    StateRequested="MediaElement_StateRequested"
    MediaOpened="VideoPlayer_MediaOpened"
    Volume="{Binding Volume}"
    Style="{StaticResource VideoPlayerStyle}"/>

 

MediaElement playing on Surface Neo emulator
 

Additional StateTriggers for VisualStateManager

VisualStateManager is a powerful way, especially in XAML, to update the look of your application by state. Think of a video player. It has a playing state, a paused state, a buffering state, and so on. Similarly, dual-screen has a default state and a spanned state. In order to make it really easy to update your UI for each of these states we’ve added a host of new state triggers to enable you to adapt declaratively, rather than having to split you UI state logic between XAML and C# with event handlers. For more information on the built-in state triggers, checkout our documentation.

Get Started with Docs, Samples, and More!

When you’re ready to dig in and explore, we have samples and documentation for you. Begin by installing the necessary emulators for both the Surface Duo and Surface Neo.

Watch now James Montemagno’s on-demand session, “Dual-screen experiences with Xamarin”.

0 comments

Discussion is closed.

Feedback usabilla icon