[Return of experience] On how the UWP team (at Dailymotion) was quickly able to create Picture and Picture POC using CompactOverlay

Honestly this was one of those proof of concept were everything worked perfectly, the UWP framework does all of the work for you!

For our proof of concept we wanted to be able to have the Dailymotion application in a small windows that was always above everything else.

Here is the application in normal mode:

And here it is in CompactOverlay mode:

You can’t really see it but the application is only 480 x 300 px. Also it will always be on top of your other applications.

Here is some quick reading about ApplicationView Class:

ApplicationView Class (Windows.UI.ViewManagement) - Windows UWP applications

Long story short all we will need to do is use the method

TryEnterViewModeAsync();

ApplicationViewMode.CompactOverlay and you ARE DONE (well you still need to create the UI of your app)!

If you decide to look deeper into the ApplicationView (F12) you will have this:

Again F12 on ViewModePreferences and we will have this:

This is interesting as it means that we could pass some extra information to our app when we set it to CompactOverlay mode.

We decide that we did not like the default size of the app for CompactOverlay mode and decided to set out own size:

ViewModePreferences compactOptions = ViewModePreferences.CreateDefault(ApplicationViewMode.CompactOverlay);
//set size of the window
compactOptions.CustomSize = new Windows.Foundation.Size(480, 300);
//tell window to prefer mu custom size
compactOptions.ViewSizePreference = ViewSizePreference.Custom;

By passing a ViewModePreferences property to ApplicationView class when setting the app to PIP (CompactOverlay) mode we will be able to decide what should be the size of the app when it is set into CompactOverlay mode.

Lets go over all the code that was needed to create PIP

First, we need a method that would set and unset CompactOverlay, here is 80% of the code that was used to transform our app:

Next, we needed to change the visual state manager, here 5% of the code :

if (PlayerViewModel.IsPipActivated)            
{                
  VisualStateManager.GoToState(this, "VisualStatePipMode", false);
}

Lastly, we needed to add a VisualState to our XAML, here are the last 15% of the code:

And now we have added the picture and picture feature to our app!

Final thoughts

For our application logic of setting the picture in picture code was largely the same as setting the application in full screen mode (where you will also only see the player).

We were able to re-use a lot of the same settings:

1. Hide right column
2. Hide bottom row
3. Hide Action buttons row
4. Merge columns
5. Set player to window size

Which allowed us to create this proof of concept even faster. Soon you will be able to use your dailymotion UWP app in Picture in Picture mode.

Happy coding.