Le mode Picture-In-Picture (Compact Overlay mode)

5 minutes de lecture

Windows 10 Creators Update (version 10.0.15063.0) est arrivé avec plusieurs nouveautés. Parmi elles, nous avons la prise en compte du mode picture-in-picture dans les applications Universelles Windows(UW).

Ce mode (disponible que sur les applications UW) permet aux utilisateurs de visualiser votre application à l’écran tout en travaillant en parallèle sur d’autres applications.

Une fois que votre application est en mode picture-in-picture, elle s’affiche sur le coin de l’écran en haut (voir figure ci-dessous) et les utilisateurs peuvent également interagir avec elle à tout moment.

L’existence de ce nouveau mode, permet d’offrir une nouvelle expérience utilisateur sur les applications UW. D’ailleurs, la conception d’IHM picture-in-picture repose sur ses dimensions réduites (320×200 généralement).

Il est donc important de bien choisir les écrans qui prendront en charge ce type d’affichage dans votre application UW.

Il est d’ailleurs conseillé pour la visualisation d’un film (par exemple) et non pour remplir un formulaire dans votre application.

Il est préférable qu’une IHM en mode picture-in-picture :

  • Soit très épurée. Elle privilégie l’affichage de l’information (une vidéo par exemple) et ses actions principales (pas plus de 2).
  • Ne soit pas scrollable pour alléger la quantité d’informations à afficher.

A noter que par défaut, le mode picture-in-picture ne contient pas de boutons retour arrière ni de barre de titre.

Dans ce post, nous allons voir comment mettre en place le mode picture-in-picture dans une application Universelle Windows (C# et XAML).

 

Vérification de la compatibilité du mode picture-in-picture.

Les applications UW visent une multitude de devices (PC, téléphone, phablette, Xbox…) or le mode picture-in-picture n’est pas forcément supporté par tous les devices.

Il est donc nécessaire de s’assurer que le device prenne en charge cette fonctionnalité avant de la mettre en place en utilisant le code suivant :

if (ApplicationView.GetForCurrentView().IsViewModeSupported(ApplicationViewMode.CompactOverlay))

{

    compactOverlayButton.Visibility = Visibility.Visible;

}

Le mode picture-in-picture est représenté par ApplicationViewMode.CompactOverlay

 

Affichage de la vue en mode picture-in-picture.

Pour afficher une vue de l’application en mode picture-in-picture, utiliser le code suivant :

private async void compactOverlayButton_Click(object sender, RoutedEventArgs e)

{   

bool modeSwitched = await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.CompactOverlay);

}

Et pour revenir à son affichage standard :

private async void standardModeButton_Click(object sender, RoutedEventArgs e)

{   

bool modeSwitched = await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.Default);

}

 

Personnalisation de la vue en mode picture-in-picture.

Pour personnaliser l’affichage de la vue en mode picture-in-picture, vous pouvez utiliser l’objet ViewModelPreference.

Par exemple, pour afficher une vue de taille 320×200 en mode picture-in-picture, utiliser le code suivant :

private async void compactOverlayButton_Click(object sender, RoutedEventArgs e)

{   

ViewModePreferences compactOptions = ViewModePreferences.CreateDefault(ApplicationViewMode.CompactOverlay);   

compactOptions.CustomSize = new Windows.Foundation.Size(320, 200);   

bool modeSwitched = await ApplicationView.GetForCurrentView().TryEnterViewModeAsync(ApplicationViewMode.Default, compactOptions);

}