With the release of the preview SDK and emulator for the Surface Duo, it is now possible to experiment with the support for dual screen devices. 

Uno Platform is in the position to be able to use the controls from WinUI (Our #WinUIEverywhere vision), and Microsoft is making development in the open for such devices in the form of the TwoPaneView control which allows us to experiment with it early and often.  

What is TwoPaneView Control  

The WinUI TwoPaneView is a Windows 10 specific control provides the ability to layout content in two panes and behaves like a dual ContentControl, based on a set of parameters such as Pane length, tall and wide configuration modes and pane priorities to display content based on the available window space. It can be useful when dealing with orientation changes, in windowed modes, or snap/split screen scenarios. 

This control had been available for a while in the Windows Community toolkit and has since been transferred over to WinUI. It is now being augmented to benefit from the multi-screen cues from the hardware with the hinge position when the application is spanning on multiple screens. 

 

 

TwoPaneView Control, Uno Platform and Surface Duo 

In cross platform scenario, the ability to react to real estate changes is increasingly important, as more two screened and foldable devices are appearing, and the TwoPaneView can address some of the responsive aspects of the UI. 

In the same way we’ve been working recently, by porting the C++ controls of WinUI to C#, the inclusion of the TwoPaneView control in Uno is straightforward.  

One aspect of that control is its reliance on an upcoming Windows API named ApplicationView.GetSpanningRects(). This API provides the available screen rectangles inside the overall screen (in blue below), removing the parts of the screen occluded by the device’s hinge. The Android SDK, on the contrary, contains an API that provides the occluded parts of the screen (in orange below). 

 

 

Uno is translating the hinge occlusion area into available areas in the implementation of GetSpanningRects().  An interesting piece of the Android API is that it provides screen-relative occlusion rectangles, whereas the GetSpanningRects() needs to be app-window-relative. This needs to be considered in “Tall” mode where the Android status (in green below) bar can be opaque or translucent.

 

 

 

Here they are, side by side: Windows 10 and Surface Duo emulator, using the test UI Microsoft uses when developing WinUI:

The TwoPaneView will be available as part of the next stable release of the Uno Platform, and the support for the Surface Duo Device will be enabled automatically when adding the Uno.UI.DualScreen nuget package. As this control evolves as part of WinUI as well as in Uno, your Uno-built apps today will be compatible with both Surface Neo and Duo devices when those will arrive on the market. To follow Uno’s development you should ‘star’ it on GitHub.

 

In Closing

If you are new to the Uno Platform, you may want to run through the Getting Started tutorial. This will ensure you have the correct environment set up and that you have the latest release of Uno. If you have already worked with Uno, you may want to update your Uno package via your Visual Studio NuGet package manager.

Also, note that we have run the control on Windows 10 which is not to be confused with Windows 10X the future Surface Neo operating system. The idea of this blog is to show Uno’s cross-platform capabilities, on our quest for putting #WinUIEverywhere. Of course, as soon as emulators for Windows 10X are available we will be testing it – so stay tuned to our blogs and subscribe to Uno Platform blog RSS

 

 

Jerome Laban, CTO – Uno Platform & Microsoft MVP