Today at Microsoft 365 Developer Day: Dual-screen experiences, Microsoft showed its vision for dual screens, showing how dual-screen devices are optimized for the way you work.

The company shared how your apps work and how you can optimize for three dual-screen patterns whether you are building apps for Windows, Android, or the Web.

• Expansive workspaces. This is an opportunity to show more detail as your app spans across two screens and allows you to highlight your content (article, scrolling a feed, or browsing a gallery) on a bigger, more expansive, canvas.
• Focused screens. Dual-screen devices also allow you to take advantage of the defined screens and accomplish what you need without interruption. You can see your app on one screen and your tools on the other and stay in your flow.
• Connected apps. When your apps can work together across screens you can achieve broader and bigger tasks without losing context. Your work flows naturally for app-to-app launches, or if your app opens a new window – content will be placed naturally across screens making side-by-side comparisons and multi-tasking easy.

Websites and apps

Microsoft's our goal is to maintain app compatibility and ensure existing websites and apps work well on dual-screen devices. Windows 10X is an expression of Windows 10 and for the first-time apps will run in containers to deliver non-intrusive updates and improved system resources for extended battery life.

Microsoft said that the Windows 10X operating system will download an OS update and simply switch to it at reboot, all within less than 90 seconds.

The Windows 10X operating system, drivers, and apps are all separate so Microsoft can simply switch to the latest OS update once a device is rebooted. Microsoft is using container technology for win32 apps that run on devices like the Surface Neo, meaning these apps can interfere with system files or data.

A lot of the dual-screen and foldable devices that will appear with Windows 10X pre-installed will also run Intel’s new Lakefield processors.

Windows Insider Preview SDK

Starting today, you can download and install the Microsoft Emulator and tools to start developing apps and testing your apps for Windows 10X. This is an early preview of the experience and Microsoft promised to offer updates regularly that follow the same standard Insider builds process.

Preview SDK for Microsoft Surface Duo update

Microsoft has also updated the preview SDK for Surface Duo to include all Java native samples as Kotlin samples, drag-and-drop to help you capture the value of moving data between two apps on dual-screen devices, and to support users on MacOS, Linux (Ubuntu), and Windows with Android Studio, Visual Studio, and VS code integration.

Dual-screen experiences

Microsoft showed three dual-screen patterns: expansive workspaces, focused screens, and connected apps and how to enhance your app using one technology – however you can create these patterns using all the technologies and frameworks below.

Building web apps for dual-screen devices

One of the most-used apps on any device is the browser, and many other popular apps are powered by HTML, CSS, and JavaScript, either as PWAs or WebViews.

Microsoft has proposed a new JavaScript API and a CSS media query with a set of pre-defined env() variables. The company is working with the Second-screen and CSS Working Groups at the W3C, and as the standards process progresses, Microsoft intends to contribute their implementation to Chromium.

Microsoft also introduced new features in the Microsoft Edge DevTools which allows you to simulate and remotely debug dual-screen devices from Microsoft Edge on your desktop. The company expects to add these to the DevTools in preview builds of Microsoft Edge soon.

You can also start using Microsoft's refreshed WinUI 3.0 Alpha that comes with a chromium-based Edge WebView2.

Using cross-platform frameworks for dual-screen development

To help you utilize all the possibilities for dual-screen devices Microsoft built the TwoPaneView control. This control automatically optimizes and adjusts your app so that you can focus on your content and see how your app will respond when spanned or rotated.

Utilize the new dual-screen SDK for Xamarin.Forms to build apps across Windows 10X and Android. This SDK includes a new TwoPaneView control and APIs such as the DualScreenInfo helper class to enable you to access important information and build beautiful dual-screen apps like the XamarinTV app Microsoft showed today.

Download the early sneak preview of the React Native dual-screen modules, a TwoPaneView component analogous to WinUI and Xamarin.Forms controls, and a lower-level DualScreenInfo module that returns usable screen regions around the seam and spanning events.

Developing Windows apps for dual screens

With the WinUI library you can use the TwoPaneView control that provides you two panes – pane 1 and pane 2 for content. This allows you to determine how much content can be shown on each screen and support scrolling of the content independently in each pane.

On Windows 10X, the OS has been designed to respond to the keyboard and posture to reveal what Microsoft calls the Wonder Bar. This feature enables the familiarity of a laptop while increasing productivity by hosting system-provided input accelerators, and a virtual trackpad for precision mouse input. Apps using CompactOverlayView for always-on-top mini views like picture-in-picture, or MediaTransportControl for background audio playback, will automatically be placed into the Wonder Bar, for seamless and natural peripheral multitasking.