Usually, when you develop a Windows 10 UWP game, it’s a common requirement that the host window has to go full screen.
UWP offers this chance through a fairly simply API. When the window launches, you can set your desired size and attempt to enter in full screen mode.
Going full screen
Before the Activate call, you can specify the preferred display mode - which is kept over restarts. Then you can try to go full screen.
1 | var appView = Windows.UI.ViewManagement.ApplicationView; |
2 | appView.preferredLaunchWindowingMode = Windows.UI.ViewManagement.ApplicationViewWindowingMode.fullScreen; |
3 | var view = appView.getForCurrentView(); |
4 | view.tryEnterFullScreenMode(); |
If you adopted HTML/JS as your the technology stack of choice and you render the game using a canvas or any HTML element, it happens the EDGE engine will draw an ugly and utterly annoying dotted border all along the window perimeter.
The issue lays on the default focus style of some elements. And, of course, you can override the style and set your own.
Removing the outline
In order to get rid of the inaesthetic border, CSS is your friend. Just refine the focus style of the affected elements.
In our games, since there’s a main canvas element, it’s enough to use the following rule:
1 | body:focus, canvas:focus { |
2 | outline: 0 |
3 | } |
This will remove the border and give a clear looking background.
Farewell code sailors
Hope it helps some of you, easing one of the many hassles that enrich our days.
Keep coding.