Hello XAML developers!

The Uno Platform has supported Microsoft Surface Duo since early 2020 – the Uno Platform team even shared get started tips on this blog. This support was based on the DuoSDK NuGet, which exposes the Microsoft DisplayMask API in C#. The Uno Platform implements the TwoPaneView control on all supported platforms, and by adding the Uno.UI.DualScreen NuGet it will ‘light up’ on Surface Duo, detecting the hinge and laying out the two panes accordingly.

At UnoConf 2021 this week, we announced that we’ve been working with the Uno Platform team to support the new Jetpack Window Manager API and extend Uno’s foldable to support to other devices. The updated support replaces the old package and provides foldable enhancements for apps running on Surface Duo as well as other foldables that support Jetpack Window Manager.

Check out the Uno Platform 4.0 announcement blog and watch the conference recording below for more details:

Uno.UI.Foldable

The updated foldable support is available via the new Uno.UI.Foldable NuGet, which replaces the DualScreen NuGet in your Uno Platform projects. The new library implements the same interfaces as the earlier version, so no user-code changes are required – the hinge angle sensor and TwoPaneView control will both automatically work on foldable devices with Jetpack Window Manager support.

You can check out foldable Uno app samples on GitHub:

Figure 1: Uno Platform SamplesApp showing TwoPaneView

Figure 2: SimpleCalculator enhanced with TwoPaneView

Contributing to the Uno Platform open-source project

Because the Uno Platform is open source (Apache 2.0 license), we were able to view and understand the existing implementation, and ultimately contribute updated code via GitHub. These are the steps we followed:

1. Create an issue

A great first step when contributing to any open-source project is to raise an issue to describe the bug you want to fix or the feature you’d like to add. This gives the project maintainers a chance to understand your suggestion, de-duplicate it from any other similar work, and provide you with tips, hints, or ideas about how to approach the code. Getting agreement and approval from maintainers ensures you are on the right track from the start!

The foldable update started with issue #6507 Update implementation to use Window Manager.

2. Build a prototype

To prove that Jetpack Window Manager library could be referenced from Uno applications, I created a simple prototype using a C# binding for the Java API. The WindowJava NuGet that exposes the Window Manager APIs in C# is itself built from an open-source project. The prototype contained two screens that test the hinge angle sensor, the folding feature detection, and the TwoPaneView API.

Figure 3: FoldingFeature properties showing on Surface Duo and 7.6” folding emulator

Uno’s dependency injection meant that once I had implemented the existing IApplicationViewSpanningRects interface, the control automatically inherited the updated behavior and was able to detect the fold on devices and emulators beyond Surface Duo.

Figure 4: TwoPaneView showing on a Surface Duo and a 7.6” folding emulator

Building the prototype outside of the Uno Platform codebase proved to be a fast and easy way to validate the approach would work, and also exposed areas where Uno could be extended to make implementation easier (e.g. adding activity lifecycle events). You can view these discussions in the issue history.

3. Submit a pull request

Once the prototype was working and the overall approach agreed on with the maintainers, a fork and pull request was created #7365 feat: DualScreen support for multiple device models. Another best practice is to keep your contribution focused on the agreed features, ensuring the code you add is easy to read (adheres to project standards) and bug free! Avoid the temptation to move code around, apply a different coding style, or anything that isn’t directly related to your proposal – this makes it harder for the maintainers to understand, review, and ultimately accept your pull request.

When adding code to a project, it’s usually a good idea to also make sure you add tests according to the repo’s approach. In this case, since we were swapping out an implementation to an existing interface, there were conveniently already tests in place that could be used to validate the code.

Figure 5: Continuous integration results

Finally, getting the pull request approved for merging can take a few tries. Projects with sophisticated CI systems (like Uno) run builds and tests and can warn you of problems (and sometimes how to fix them). Once your implementation is done and you get green builds, use the pull request or issue discussion to communicate with the maintainers, get approval for your work, and see it merged into main!

Resources and feedback

Visit the UnoConf 2021 website to watch the session recordings, and use the feedback forum or message us on Twitter @surfaceduodev to share your app ideas or if you have any questions about building foldable apps with Uno, or any other platform.

Finally, please join us for our dual screen developer livestream at 11am (Pacific time) each Friday – mark it in your calendar and check out the archives on YouTube.