Migration vers 8.1 : Les fichiers de ressources resw

Introduction

Premier article d’une série qui revient sur mon retour d’expérience sur la migration des application Windows Phone 8.0 (Silverlight) vers Windows Phone 8.1/Windows 8.1 (Universal App).

Visual Studio 2013 permet de réaliser des universal apps, applications à la fois compatibles Windows Phone 8.1 et Windows 8.1.

La quasi totalité du code peut ainsi être partagé (jusqu’aux interfaces graphiques) permettant un incroyable gain de temps dans la création et surtout dans la maintenance de projets sur la mobilité.

Resx – C’était mieux avant ?

Grand changement et mauvaise surprise lorsque je me suis aperçu lors de la soumission sur le Store que mon paquet ne pouvait être accepté.

La cause : des fichiers resx dans des assemblies (mêmes dans les Portable Class Library censées fonctionner dans la quasi totalité des projets Windows phone 7, 8, 8.1, …)

Ce qui est assez drôle c’est que tout fonctionne jusqu’au moment du déploiement dans le store. L’application que j’ai tenté de déployer fonctionnait parfaitement sur mon téléphone avec des fichiers resx dans une Portable Class Library (PCL)

Poursuivre la lecture →

Réglage du zoom du Scrollviewer en universal app (w10, Wp8.1)

Universal Apps Windows 10 Windows 8 Windows Phone

Zoom et Scrollviewer (avant)

Pour initialiser le zoom du Scrollviewer, il était possible avec Windows 8.0 de définir directement le niveau de zoom désiré avec l’instruction :

scrollViewer.ZoomToFactor(3.0F);

pour avoir un zoom de 300% par exemple.

De même pour se déplacer dans le scrollviewer, il fallait également utiliser

scrollViewer.ScrollToHorizontalOffset(100);
scrollViewer.ScrollToVerticalOffset(200);

Ces 3 méthodes sont depuis peu marquées comme deprecated, et bien que le code continue à fonctionner, il est fortement recommander d’utiliser l’instruction ChangeView à la place.

La syntaxe est plus simple à priori :

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.changeview(v=win.10).aspx

var Succes = scrollViewer.ChangeView(100, 200, 0.3F, false);

La vue est ici positionnée avec 30% de zoom avec un scroll horizontal de 100 pixels 200 vertical.

Le dernier paramètre permet de désactiver l’animation de zoom.

L’ensemble retourne true si le zoom a eu lieu.

il est également possible de ne faire qu’un zoom sans déplacement en remplaçant les valeurs inutilsées par null

var Succes = scrollViewer.ChangeView(null, null, 0.3F, false);

Le problème

Pourtant lorsque cette instruction est utilisée dans un projet WP8.1… rien ne se passe!

Poursuivre la lecture →

Icones Segoe UI Symbol et C#

C# Universal Apps Windows 8 Windows Phone

Les icônes Segoe UI Symbol

Microsoft depuis Windows 8 recommande d’utiliser des icônes provenant d’une police de caractères « Segoe UI Symbol ».

C’est très pratique, il suffit de choisir cette fonte et de connaître ensuite le code pour directement accéder à l’image vectorielle de très bonne qualité, et personnalisable avec de la couleur.

Certains caractères ont une largeur nulle permettant également de faire un contour d’une autre couleur ou encore de créer un cercle autour de l’cône.

Les palettes d’icônes Segoe UI Symbol sont consultables sur différents sites :

exemple :

C’est assez simple, dans une application XAML, il suffit de codifier le caractère avec les tags XML standards.

Poursuivre la lecture →

Pinch to Zoom avec Windows et Windows Phone 8.1

Universal Apps Windows 8 Windows Phone

Comment rendre une image zoomable?

Pour l’application Infografx, j’ai eu besoin de gérer le zoom d’un graphique à travers un « pinch to zoom »

Lors de l’utilisation d’une image, l’utilisateur doit pouvoir zoomer et se déplacer dans le Zoom.

Mon premier réflex a été de coder l’utilisation de se zoom et du scale à partir des évenements de manipulation. Et puis comme j’étais dans un modèle M-V-VM j’ai même utilisé un behavior pour rendre le code plus propre.

Tout celà pour rien, car il existe une manière bien plus simple et bien plus efficace…

Avant

Avant, il fallait coder les gestes de l’utilisateur intervenant sur l’image.

Voici un exemple de code qui fait intervenir 2 évènements sur le contrôle ManipulationStart et ManipulationDelta.

    private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        var transform = (CompositeTransform)image.RenderTransform;

        // pan
        transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X;
        transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y;

        // zoom
        if (e.PinchManipulation != null)
        {
            transform.CenterX = e.PinchManipulation.Original.Center.X;
            transform.CenterY = e.PinchManipulation.Original.Center.Y;

            transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale;
            transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale;
        }
    }

    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
        // the user has started manipulating the screen, set starting points
        var transform = (CompositeTransform)image.RenderTransform;
        _scaleX = transform.ScaleX;
        _scaleY = transform.ScaleY;
        _translationX = transform.TranslateX;
        _translationY = transform.TranslateY;
    }

Le code est assez long, le résultat n’est pas parfait car un peu rigide (pas de gestion de l’inertie) et pas facile à insérer dans un modèle M-V-VM.

Il existe un moyen pourtant bien plus simple.

Le ScrollViewer

Avec Windows 8 et les projets Windows Phone 8.1 (non Silverlight), le scrollviewer est enrichi d’un Zoom.

En Initialisant la propriété ZoomMode avec « Enabled », vous bénéficiez d’un Pinch To Zoom sur n’importe quel contenu du ScrollViewer

D’autres propriétés permettent également de paramétrer votre zoom :

MinZoomFactor : Pour fixer le zoom minimum (exemple 0.25)
MaxZoomFactor : Pour fixer le zoom maximum (exemple 3.0)
IsZoomInertiaEnabled : Pour gérer l’inertie du zoom (exemple false)

Ce qui donne en XAML

 <ScrollViewer Width="Auto" Height="Auto" VerticalScrollBarVisibility="Visible"
                          HorizontalScrollBarVisibility="Visible" Margin="4"
                          ZoomMode="Enabled"                           
                          MinZoomFactor="0.25"
                          MaxZoomFactor="3.0"
                          IsZoomInertiaEnabled="False"
                          >
                <Grid VerticalAlignment="Top" HorizontalAlignment="Left"
                       >
...

Et voilà! En quelques lignes de code XAML le tour est joué. vous avez un zoom parfait, sans code à maintenir et 100% M-V-VM.