Windows CompactOverlay Mode

Tags: Windows 10, Creators Update, CompactOverlay

The Creators Update of Windows is coming soon. One of the new features coming with it is a way to keep your UWP app on the screen above all other windows. It’s called CompactOverlay mode, but you probably know it better as Picture-in-Picture.

All of the examples that I’ve found online of how to do CompactOverlay mode (all? I mean all one of them) is written in C#. In my work on a day to day basis I work in JavaScript. Converting from C# to JavaScript in this case is fairly easy.

First you want to check and see if CompactOverlay mode is supported:

image

 

Then you’ll want to switch to the CompactOverlay mode. In this example it’s based on a click of a button:

image

 

What this will give you is a small window containing your app! That’s the first step. From here you can customize the experience by specifying the height and width of the window:

image

 

There are other great things you can do like specify a different display to be used while in CompactOverlay mode. I recommend reading the blog entry on Microsoft and if you have any questions about conversion to JavaScript give me a shout @spatacoli.

Add a Comment