---
robots: nofollow, noindex
tags: partners
---

# Dual-screen support in Fluent UI

## Problems
### 1. Self positioned components
Dual screen devices have a hinge in the middle of the screen. This hinge creates either a vertical or horizontal line, depending on the orientation of the device.

When we position components on the screen they should not be cut in two by the hinge.

### 2. Screen boundaries
Similarly when a component expands in size it should not do so in a way that renders across the hinge.

OR

### 3. Dual screen design patterns
Application developers should be able to easily build screen aware applications. These applications can target the left or right screens and render different content. This enables app developers to leverage the two screens to build better applications.

Provide a solution to common dual screen design patterns - Specifically the Two Page Design Pattern

## 1. Hinge Awareness for Components

### List of Components that need to be tested for hinge awarness
The following list are the set of Fluent UI Components that need to be tested to ensure that they are hinge aware. Many of these components leverage shared positioning logic - so once that solution is updated we need to ensure that these components behaviors are aligned to Goals #1 and #2.
1. ComboBox
2. Dropdown
3. Callout (with Calendar Hosted inside)
4. DatePicker
5. People Picker
6. Picker
7. HoverCard
8. ContextualMenu
9. CoachMark
10. MessageBar (Follow up needed on this one)
11. TeachingBubble
12. Dialog
13. Modal
14. Tooltip
15. Overlay

## 2. Supporting Dual Screen Design Patterns: Two Page
## Objectives

* Prototype media queries to evaluate any additional work we need to do.

### Open questions

- [ ] Is there a need for a Two-pane control on web?

## Contacts

Zouhir Chahoud (Edge PM)

## References

Docs:
https://docs.microsoft.com/en-us/dual-screen/cross-platform/

Segments api:
https://github.com/webscreens/window-segments/blob/master/EXPLAINER.md

Folding device emulator:
https://foldables-emulator.netlify.com

PowerPoint deck:
https://microsoft-my.sharepoint-df.com/:p:/p/zochahou/EdrbETADYDFMu5dBAAz47kABD0n_t9KQxC3BeZ_vrJGm2A?e=PlYfhf

### Web prototype

Illustrates 2 boxes, which stack normally but snap to left/right in split screen landscape, and top/bottom in portrait.

See here: https://foldables-emulator.netlify.com/?url=https://david-demo-codepen.glitch.me/

Edit code here: https://glitch.com/edit/#!/david-demo-codepen?path=index.html

In discussion with Edge PM, app developers need to evaluate their app frame organization when considering dual screen scenarios. A combination of situations may occur when the fold is present:

1. Style changes
2. Component swaps (e.g. a full page header may become a split header. A left nav may be hidden within a hamburger menu.)

### XAML Two Pane Control Evaluation

https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/two-pane-view

<muxc:TwoPaneView
    Pane1Length="*"
    ModeChanged="TwoPaneView_ModeChanged">

    <muxc:TwoPaneView.Pane1>
    // content for pane 1
    </muxc:TwoPaneView.Pane1>

    <muxc:TwoPaneView.Pane2>
    // content for pane 2
    </muxc:TwoPaneView.Pane2>
    
</muxc:TwoPaneView>

> Q: What happens on a single screen device for this markup?

A: The control detects which state it's in, and renders the right pane.

>Q: Would we just use media queries for this?

A: Possibly not, but we should prototype and make sure we can just replicate with media queries.

## 3. Fluent UI React Developer Guidance for Dual Screen

### 1. Test your app
Verify that your webapp to ensure it works in the single screen mode (Browser/PWA.)

#### How to test your app with the emulator or in browser tools
This could be documentation we write or point to
> TODO: Follow up with the Edge Dev Tools/Edge Dual Screen team on how they want to recommend testing for webapps (Browser/PWA)

### 2. Adopt Incremental Changes
Use existing HTML Platform features that makes your webapp work better on dual screens when used side by side. One tactical example is making sure your webapp implements the Drag and Drop pattern.

### 3. Enhance with new dual screen features
Take advantage of new HTML platform capabilities and enhance your webapp with Microsoft Services & Device postures & layouts.

## 4. Key Milestones
The //BUILD conference is where the Dual Screen effort is going to be strongly communicated to our external developer community.

It's in our product's best interest to be able to contribute to the story telling at this conference as position ourselves as *the* recommended web library for dual screens for webapps.