Use the Wonder Bar
This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here. The functionality and APIs described here are available in the emulator image and SDK version listed on the Get Windows dev tools page, but may not be available elsewhere.
What is the Wonder Bar?
Wonder Bar is a region available in the laptop posture that helps customers be more productive by offering additional input options to augment the keyboard. It also offers opportunities for customers to multi-task through tools, ambient info, or other app experiences that complement their task at hand.
The Wonder Bar on Surface Neo
Wonder Bar offers elevated value in laptop posture
Dual-screen devices offer a variety of different postures, such as having two screens side by side like a book, or having one screen at an angle while the other lies flat — reminiscent of a traditional laptop. These postures increase productivity by letting the customer use the device in the way that best fits their needs at the time.
When customers put the device in the laptop posture, they have the option to magnetically attach a hardware keyboard to the bottom screen. This lets them perform focused tasks with the ease of typing that a physical keyboard brings. When the keyboard is snapped to the lower edge of the bottom screen, away from the middle seam, the strip of screen above the keyboard is what we call the Wonder Bar.
The Wonder Bar is also available when the on-screen keyboard is used, when the customer changes the on-screen keyboard mode to one with Wonder Bar. In that case, the Wonder Bar is above the on-screen keyboard on the bottom screen.
The Wonder Bar in laptop posture
When customers perform tasks that involve text input, they will likely have their hands near the keyboard. There are ergonomic advantages to having other types of input in the same area, such as the virtual touchpad, emojis, GIFs, and typing suggestions. This way, navigation, particularly with precision cursor input, as well as expressive input, are both at their fingertips when they switch between different types of activity to perform their task.
Ergonomic advantages of the Wonder Bar
Multi-tasking as a key value
Wonder Bar supports the multi-tasking behaviors that customers typically do on traditional laptops. Whether it is keeping an eye on a sports game while working, quickly jotting down a thought on a sticky note while typing up an email, or navigating to the next song while focusing on a presentation, we see endless opportunities for Wonder Bar to be just the right space that supports this kind of peripheral multi-tasking.
Wonder Bar principles
There is great value in offering complementary tools and multi-tasking experiences to customers. However, what is put in the Wonder Bar should be intentional, to avoid overloading customers with distracting experiences. Customers should be given good reason to spread their attention when we promote multi-tasking, and the interaction between Wonder Bar experiences and the user's main focus must be thoughtful.
Here are some principles that guide the use of the Wonder Bar:
Precision input is always accessible
For deeper productivity tasks, precision input is invaluable. Wonder Bar ensures that customers are always able to access the precision touchpad for finer navigation.
Wonder Bar behaviors are predictable
Customers should feel empowered to enjoy the benefits of Wonder Bar to the extent they see fit for their scenarios. The different experiences that are available follow a consistent layering model (detailed later), and navigation between Compact Overlay windows is consistent with the overall navigation system of Windows 10X.
Experiences are not exclusive to Wonder Bar
Wonder Bar is not offered in every posture, so customers should not feel that they will miss out on experiences if they are not in the laptop posture. Wonder Bar exposes certain experiences to elevate the user's productivity in that specific posture, but customers should still be able to access those functionalities in other postures.
The user's physical context is always considered
The nature of Wonder Bar is inseparable from the physical posture of the device and the customer's behaviors in that posture. Ergonomics, and the user's gaze region and attention, are important considerations when crafting experiences for Wonder Bar. It's also important to consider the position of the device in relation to the position of the customer—they are most likely seated, with the device on their lap or on the table.
Simple experiences are best
From key insights learned from research, we find that for multi-tasking scenarios, lightweight experiences that are low in complexity and involve only simple interactions are most successful. Wonder Bar is designed to prioritize the user's ease and peace of mind.
Of course, we want to remain humble and continue to gain insights into the intent of customers and app developers for the Wonder Bar region. We expect to evolve our designs and model for Wonder Bar as we continue to get your feedback.
System and app integration points
In the following sections, we go into more detail about how the system uses Wonder Bar for general input functionalities, as well as app integration points you can leverage in order to build Wonder Bar experiences for your apps.
General input functionality
Windows 10X uses Wonder Bar to provide both a virtual touchpad and rich input.
The system provides a familiar and precise touchpad to meet the productivity expectations of customers. Keyboard and precision input (mouse or touchpad) often go hand in hand. Customers will be able to use familiar gestures, including multi-finger gestures, on this touchpad, so it is natural to their existing workflow. The touchpad is the default experience in the Wonder Bar and shares the space with app experiences when they're present.
In addition, customers can ink anywhere within the touchpad region. This lets them jot a quick note while in the middle of other tasks, which is a common and intuitive multi-tasking scenario.
Virtual touchpad in the Wonder Bar
The system lets customers input text suggestions, emojis, GIFs, and other types of expressions.
When customers enter text while Wonder Bar is visible, using either the physical or on-screen keyboard, the candidate bar populates with intelligent typing suggestions that help customers type more effectively. The candidate bar also contains the entry point into the rich input panel, where emojis, GIFs, and other types of expressions are housed. Customers can also easily access text from their clipboard.
Rich input using the Wonder Bar
App integration overview
Wonder Bar is a surface for apps to show simple information or controls that the user can consume or interact with alongside the content on their main screen. To enable this, we've enhanced two existing Windows concepts to work automatically with the Wonder Bar and serve as integration points for your app: System Media Transport Controls and Compact Overlay mode.
When you use either of these features on Windows 10X while the Wonder Bar is present, content from your app will be presented in the Wonder Bar—there's no additional work to do!
System Media Transport Controls
The SystemMediaTransportControls class lets you hook into a system-wide transport control for media. These controls provide a consistent way for users to control media playback for all running media apps that use MediaPlayer for playback.
- When the Wonder Bar is present, the transport controls are surfaced in the Wonder Bar. Outside of Wonder Bar, the transport controls are also available in the Action Center.
System Media Transport Controls in the Wonder Bar
- When the Wonder Bar is not present, the transport controls appear only in the Action Center.
System Media Transport Controls in the Action Center
For more info about how to use these controls, see Integrate with the System Media Transport Controls and the SystemMediaTransportControls sample.
Compact Overlay (also known as Picture-in-Picture) is a minimal version of your app window. Typically, Compact Overlay results in a floating, always-on-top window that contains the content of your app. The most common use for this is to create a floating video window, so you can watch something while interacting with other apps and not have the video be occluded.
Media in mini always-on-top mode on Windows 10
Beyond media, there are other uses as well, where an intentional reduction of your app content into a mini view can help customers multi-task. For example, Window's Calculator app has an always-on-top mode that gives you a small, always-available version of the standard calculator layout.
Calculator in mini always-on-top mode on Windows 10
Similar to the System Media Transport Controls, when the Wonder Bar is present, your Compact Overlay window is displayed in the Wonder Bar (based on the interaction model). When it is not present, your Compact Overlay window is placed in one of the available corners of the screen, and a user can move it between any of the available corners.
Media in Wonder Bar vs. in mini always-on-top mode on Windows 10X
If you have multiple Compact Overlay windows, the most recently created one is shown in the Wonder Bar by default. Customers can select which they want to be visible (as described in the interaction model section), but they can't show more than one at a time in the Wonder Bar.
- Use the AppWindow.Presenter property to get the current AppWindowPresenter.
- Call IsPresentationSupported to see if the CompactOverlay AppWindowPresentationKind is supported.
- Call GetConfiguration to check whether CompactOverlay is currently being used.
- Call RequestPresentation to change the current configuration to CompactOverlay.
For more info, see Show multiple views with AppWindow.
- Call ApplicationView.GetForCurrentView to get the current ApplicationView.
- Call IsViewModeSupported to see if the CompactOverlay ApplicationViewMode is supported.
- Check the ViewMode to see whether CompactOverlay is currently being used.
- Call TryEnterViewModeAsync to change the current configuration to CompactOverlay.
For more info, see Show multiple views with ApplicationView.
The interaction model describes how your app content interacts with the Wonder Bar.
Available app region
For both app integration points (System Media Transport Controls or Compact Overlay), the available app region takes up half the width of the Wonder Bar. The following image illustrates the minimum effective pixel dimensions for your app's Compact Overlay window in Wonder Bar—specifically on Surface Neo—with both hardware and on-screen keyboards.
The size of the Wonder Bar region may vary on different Windows 10X devices. We expect it to be at its minimum size on Surface Neo. It's important to design your experiences to be responsive, so they will scale across different device sizes.
The height of the app region might be different depending on whether a hardware or on-screen keyboard is in use, due to varying behavior of the candidate bar. With a hardware keyboard, the candidate bar will come up only when there is text in focus in the top screen—the candidate bar will temporarily occlude the bottom region of any app experience and the touchpad. It's good to be aware of this behavior when you plan to integrate with the Wonder Bar through Compact Overlay.
Customers can also switch the app region from left to right with the built-in affordance in Wonder Bar, so it's important to consider that—especially if you are designing interactions that are directional or leverage the physical edge.
Available app region with a hardware keyboard vs. on-screen keyboard
Some of the surfaces within Wonder Bar, such as the candidate bar, may only be relevant at certain times, like when there is text input. Therefore, we use a Z-order stacking hierarchy to determine what experiences are in view at a given time.
For Compact Overlay windows, the most recent one is stacked on top of the others, and customers are able to switch focus between the two windows via Taskview and Taskbar.
Layering of experiences in the Wonder Bar