Pivot/Panorama + WebBrowser ? YES we can !

jul 29, 2013 7:55 pm by Julien

Un petit post parler du WebBrowser sous WP que tout le monde aime tant ! Si vous l'avez déjà utilisé, vous devez être au courant qu'il n'est pas évident  d'utiliser un WebBrowser dans un panorama ou un pivot ! Malgré les recommandations de Microsoft, il peut arriver qu'on est réellement besoin d'avoir un WebBrowser dans un panorama/pivot ou toute zone potentiellement manipulable.

La cause

S'il n'est pas possible d'avoir un WebBrowser dans un pivot/panorama c'est parce que notre cher petit composant capte tous les événements de Manipulation, Translation sur X/Y, Scale et donc que ces événements de manipulation n'arrivent jamais jusqu'au pivot !

Petite aparté sur justement la gestion des events du coté .NET, il existe plusieurs types d'events (Bubble, Tunnel, Direct). Celui qui nous interesse le plus dans notre cas c'est Bubble. Dès que l'événement est soulevé sur un élément il va remonter l'arbre visuel jusqu'à ce que quelqu'un le traite, et le marque comme "Handled". C'est ce qui se passe avec le WebBrowser, lorsqu'on le manipule, le responsable de la gestion de la translation, zoom, marque les events de manipulation comme handled et donc ne remonte plus l'arbre visuel et donc notre beau pivot/panorama ne peut effectuer ses belles translations !

La solution

Et si je vous dis que la solution ne tient qu'en quelques lignes, vous me croyez ? :)

Pour résoudre ce soucis, il faut accepter quelques restrictions comme la suppression du zoom et évidemment la translation sur X.

La solution consiste à récupérer les éléments internes du WebBrowser pour éviter que l'événement de translation ne remonte au contrôle responsable. Dans notre cas, sans trop m'attarder, le contrôle responsable de gérer les manipulations est un PanZoomContainer (controle qui n'est pas accessible pour nous développeur). 

Il va falloir récuperer l'élément enfant a ce PanZoomContainer pour detecter la manipulation de translation sur X et marque comme Handled cet event, comme ça, il ne remontera pas sur le PanZoomContainer.

Si on en reste là, on a pas encore totalement résolu notre probleme, car on a juste supprimer la possibilité de translater sur X dans notre WebBrowser. Et la vous allez me dire, "t'es bête , tu as marqué comme Handled ton event, c'est normal qu'il ne se passe rien !"

C'est exactement ca! Il nous manque un moyen de redeclencher les events de manipulations apres le PanZoomContainer. Et pour cela rien de plus simple, il suffit d'attacher un handler manuellement en spécifiant que meme si l'event est marqué comme Handled alors je veux etre notifié.

On recupere le container parent au PanZoomContainer et on s'attache aux events de manipulations de cette facon : 

var parentBorder = _webBrowser.Descendants<Border>().Skip(1).First();
            parentBorder.AddHandler(FrameworkElement.ManipulationDeltaEvent, new EventHandler<ManipulationDeltaEventArgs>(wb_ManipulationDelta), true);
            parentBorder.AddHandler(FrameworkElement.ManipulationCompletedEvent, new EventHandler<ManipulationCompletedEventArgs>(wb_ManipulationCompleted), true);


 Facile non ?

Lorsque les events sont soulevés, on repasse Handled a false et hop comme par magie l'event sera soulevé dans notre pivot !

private void wb_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
        {
            e.Handled = false;
        }


Pour voir le code source, direction GitHub : https://github.com/jlopresti/TouchWebBrowserDecorator

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading