Universal Apps

16 articles

Migration vers XAML 8.1 – les resw (migration rapide)

 

Cet article fait suite au précédent article concernant la migration de la partie « traduction » d’une application Windows Phone (7, 8 et Silverlight 8.1) en 8.1 XAML (Universal Apps)

Universal apps et traduction

Universal Apps

Nous avons pu voir précédemment que le portage pouvait être parfois un peu lourd.
Dans le cas où vous avez déjà de nombreuses ressources traduites dans les fichiers resx volumineux (et dans plusieurs langues), la suite peut vous intéresser.

Les identifiants de ressources

Nous avons vu dans le précédent article qu’il suffisait de

  1. renommer les fichiers .resx en .resw
  2. les mettre dans des répertoires normés avec un identifiant les ressources (ex : en-US, fr-FR,..)
  3. modifier le XAML pour remplacer le « {Binding… » par un x:Uid
  4. modifier tous les identifiants de ressources pour ajouter la propriété du contrôle qui sera traduite.

Pour éviter ce dernier cas parfois très lourd, il existe un solution qui peux vous faire gagner un peu de temps.

Poursuivre la lecture

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)

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.

Scrollviewer_ZoomToFactorLa 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#

 

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 :

 

SgoeUiSymbol

 

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

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 »

Zoom-Gesture

 

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.

Quelles versions de Visual Studio pour vos APPs Windows Phone ?

Windows Phone 7.x, 8.0 et 8.1

Depuis avril 2014, Il existe 3 versions majeures de Windows Phone : 7.x, 8 et 8.1.

La version 8.1 permet de créer des applications Windows Phone 8.1 « classique » renommées 8.1-Silverlight (SL) et également les nouvelles applications « Universal Apps » qui pourront être partagées entre Windows 8.1 et Windows Phone 8.1.

La mutualisation du code était déjà partiellement possible avec les PCL (Portable Class Librairies). L’assemblie compilée est directement utilisable à la fois dans un projet Windows phone 7.x, Wp8 et Windows 8 par exemple.

Les « Universal Apps » permettent en plus de mutualiser une grande partie du code visuel.

Visual Studio 2013 permet donc à la fois de créer des PCL compatibles WP8, W8, WP8.1, W8.1 et utilisables à la fois dans des applications Windows Phone classiques, Windows 8.x dans des projets Universal Apps.

Mais là où ça se complique c’est que Visual Studio 2013 ne permet plus la compatibilité WP7.x.

Windows Phone 7.x représente encore en avril 2014 19% des utilisateurs de Windows Phone (cliquez sur l’image pour l’enquête complète de adduplex).

clip_image003_thumb

Il va falloir faire un choix.

Si vous voulez pouvoir créer une application pour Windows Phone 7.x, Visual Studio 2012 vous sera encore très utile pour créer la PCL compatible WP7 et WP8 ainsi que l’application en Windows Phone 7.x.

Synthèse

Le schéma ci dessous vous présente une synthèse des possibilités en fonction de la version de Visual Studio choisie.

De même en fonction des choix pris pour la construction des PCL, votre code pourra ou non être mutualisé entre un projet Windows phone 7 et un projet Windows phone 8.1.

Poursuivre la lecture