Fullscreen is a mode in which a window fills the entire screen. When fullscreen is active, controls are typically hidden in order to provide an immersive content view.
It is appropriate to offer fullscreen when users are likely to want to have an unobstructed view of content, particularly if they are likely to view content items for long periods of time. The classic example of fullscreen is for watching videos, where visible controls would be distracting and result in less screen space for the content. However, fullscreen can be used for other types of content including documents or images.
Fullscreen is typically used in viewing situations. However, in some cases it can be useful for editing tasks. Fullscreen is also typical for many games (how games should use fullscreen is not covered in this page).
If an application uses different views, it is only necessary to enable fullscreen for those views where it is useful — primarily those that display content items.
Fullscreen can be triggered automatically when a content item is opened, or can be offered as a mode that can be activated by the user.
If fullscreen is being offered as a mode that users activate, judge how prominent to make the control to enter fullscreen according to how often it will be used. Typically, a fullscreen button should be placed in the header bar or header bar menu.
When fullscreen is active:
All controls should be hidden, including the window's header bar, action bars or overlaid controls.
Controls, including the header bar, should be revealed when the pointer is moved or the screen is tapped.
The window close button should be replaced with a view restore button, which disables fullscreen mode.
Any controls that don't fit into fullscreen should be hidden or replaced. This includes any navigation controls that would simultaneously exit fullscreen, such as back buttons.
Make an effort not to allow controls or UI to obstruct content. For example, dialog windows that overlap content will be distracting and will detract from the immersive nature of fullscreen.
The Videos application is a good example of how fullscreen should behave.
Got a comment? Spotted an error? Found the instructions unclear? Send feedback about this page.