Microsoft 365 Developer Day: Dual-screen experiences
We 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 on a bigger, more expansive, canvas. Whether your users are reading an article, scrolling a feed, or browsing a gallery, having more real estate helps your users to see more of your content.
- Focused screens. Dual-screen devices are more than just a bigger screen – they 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 and natural.
Your websites and apps work
Your code is important, and our goal is to make going on this journey with us as easy as possible. This starts by maintaining app compatibility and ensuring your 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.
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. We focused on creating an emulator experience that behaves naturally and adapts to the different device postures. This is an early preview of the experience and you will see updates regularly that follow the same standard Insider builds process.
Preview SDK for Microsoft Surface Duo update
We’ve also updated the preview SDK for Surface Duo to include all our 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.
Embracing dual-screen experiences
Dual-screen devices create an opportunity for your apps to engage with people in a new and innovative way. Today, we showed you 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. We want to empower web developers to build a great dual-screen experience, whether you are building a website or web app.
To accomplish this, we’ve proposed a new JavaScript API and a CSS media query with a set of pre-defined env() variables. We’re working with the Second-screen and CSS Working Groups at the W3C, and as the standards process progresses, we intend to contribute our implementation to Chromium. The goal is to enable you to build interoperable dual-screen experiences across browsers and operating systems. You can learn more about these proposals on GitHub.
We 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. We expect to add these to the DevTools in preview builds of Microsoft Edge soon.
You can also start using our refreshed WinUI 3.0 Alpha that comes with a chromium-based Edge WebView2. The WebView2 API is still early and more details and features will be added to our upcoming WinUI 3 Preview.
Using cross-platform frameworks for dual-screen development
To help you utilize all the possibilities for dual-screen devices we 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 we 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 we call 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.
This is just the beginning for creating enhanced experiences for dual-screen devices. We are excited to work with you to idealize and innovate great dual-screen experiences. Please continue to reach out to us at [email protected] so we can learn and build together.