{"id":687,"date":"2014-08-10T23:58:17","date_gmt":"2014-08-10T21:58:17","guid":{"rendered":"http:\/\/dev.bratched.fr\/fr\/?p=687"},"modified":"2014-08-10T23:58:17","modified_gmt":"2014-08-10T21:58:17","slug":"pinch-to-zoom-avec-windows-et-windows-phone-8-1","status":"publish","type":"post","link":"https:\/\/bratched.com\/fr\/2014\/08\/10\/pinch-to-zoom-avec-windows-et-windows-phone-8-1\/","title":{"rendered":"Pinch to Zoom avec Windows et Windows Phone 8.1"},"content":{"rendered":"

Comment rendre une image zoomable?<\/h1>\n

Pour l’application Infografx, j’ai eu besoin de g\u00e9rer le zoom d’un graphique \u00e0 travers un \u00ab\u00a0pinch to\u00a0zoom\u00a0\u00bb<\/p>\n

\"Zoom-Gesture\"<\/a><\/p>\n

 <\/p>\n

Lors de l’utilisation d’une image, l’utilisateur doit pouvoir zoomer et se d\u00e9placer dans le Zoom.<\/p>\n

Mon premier r\u00e9flex a \u00e9t\u00e9 de coder l’utilisation de se zoom et du scale \u00e0 partir des \u00e9venements de manipulation. Et puis comme j’\u00e9tais dans un mod\u00e8le M-V-VM j’ai m\u00eame utilis\u00e9 un behavior pour rendre le code plus propre.<\/p>\n

Tout cel\u00e0 pour rien, car il existe une mani\u00e8re bien plus simple et bien plus efficace…<\/p>\n

Avant<\/h1>\n

Avant, il fallait coder les\u00a0gestes de l’utilisateur\u00a0intervenant sur l’image.<\/p>\n

Voici un exemple de code qui fait intervenir 2 \u00e9v\u00e8nements sur le contr\u00f4le ManipulationStart et ManipulationDelta.<\/p>\n

    private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)\n    {\n        var transform = (CompositeTransform)image.RenderTransform;\n\n        \/\/ pan\n        transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X;\n        transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y;\n\n        \/\/ zoom\n        if (e.PinchManipulation != null)\n        {\n            transform.CenterX = e.PinchManipulation.Original.Center.X;\n            transform.CenterY = e.PinchManipulation.Original.Center.Y;\n\n            transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale;\n            transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale;\n        }\n    }\n\n    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e)\n    {\n        \/\/ the user has started manipulating the screen, set starting points\n        var transform = (CompositeTransform)image.RenderTransform;\n        _scaleX = transform.ScaleX;\n        _scaleY = transform.ScaleY;\n        _translationX = transform.TranslateX;\n        _translationY = transform.TranslateY;\n    }<\/pre>\n
Le code est assez long, le r\u00e9sultat n’est pas parfait car un peu rigide (pas de gestion de l’inertie) et pas facile \u00e0 ins\u00e9rer dans un mod\u00e8le M-V-VM.<\/p>\n
Il existe un moyen pourtant bien plus simple.<\/p>\n
Le ScrollViewer<\/h1>\n
Avec Windows 8 et les projets Windows Phone 8.1 (non Silverlight), le scrollviewer est enrichi d’un Zoom.<\/p>\n
En Initialisant la propri\u00e9t\u00e9 ZoomMode avec \u00ab\u00a0Enabled\u00a0\u00bb, vous b\u00e9n\u00e9ficiez d’un Pinch To Zoom sur n’importe quel contenu du ScrollViewer<\/p>\n
D’autres propri\u00e9t\u00e9s permettent \u00e9galement de param\u00e9trer votre zoom :<\/p>\n
    \n
  • MinZoomFactor : Pour fixer le zoom minimum (exemple 0.25)<\/li>\n
  • MaxZoomFactor : Pour fixer le zoom maximum (exemple 3.0)<\/li>\n
  • IsZoomInertiaEnabled : Pour g\u00e9rer l’inertie du zoom (exemple false)<\/li>\n<\/ul>\n
    Ce qui donne en XAML<\/p>\n
     <ScrollViewer Width=\"Auto\" Height=\"Auto\" VerticalScrollBarVisibility=\"Visible\"\n                          HorizontalScrollBarVisibility=\"Visible\" Margin=\"4\"\n                          ZoomMode=\"Enabled\"                           \n                          MinZoomFactor=\"0.25\"\n                          MaxZoomFactor=\"3.0\"\n                          IsZoomInertiaEnabled=\"False\"\n                          >\n                <Grid VerticalAlignment=\"Top\" HorizontalAlignment=\"Left\"\n                       >\n...\n<\/pre>\n
     <\/p>\n
    Et voil\u00e0!\u00a0En\u00a0quelques lignes de code XAML\u00a0le tour est jou\u00e9. vous avez un zoom parfait, sans code \u00e0 maintenir et 100% M-V-VM.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Comment rendre une image zoomable? Pour l’application Infografx, j’ai eu besoin de g\u00e9rer le zoom d’un graphique \u00e0 travers un \u00ab\u00a0pinch to\u00a0zoom\u00a0\u00bb   Lors de l’utilisation d’une image, l’utilisateur doit pouvoir zoomer et se d\u00e9placer dans le Zoom. Mon premier r\u00e9flex a \u00e9t\u00e9 de coder l’utilisation de se zoom et du scale \u00e0 partir des […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,62,63],"tags":[4,88,89,58,90,8,91],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t