Accueil Nos publications Blog Les nouveautés des applications Windows Phone XAML Apps 8.1

Les nouveautés des applications Windows Phone XAML Apps 8.1

Windows Phone 8 logoLe passage à Windows Phone 8.1 va changer le code de vos applications notamment dans le cadre de la convergence des applications annoncées à la Build 2014 : Les Universal Apps

En effet, le nouveau XAML Windows Runtime a évolué pour supporter à la fois des applications Windows 8.1 et Windows Phone 8.1. Ceci afin d’améliorer le partage de code entre les applications et ainsi créer très facilement à la fois une application pour Windows Phone et une application pour Windows, ce qu’on appelle alors « Universal App ».

Avant tout, sachez que vous n’êtes pas obligé de créer une Universal App, et que vous pouvez très bien rester sur du Windows Phone uniquement, pour cela il suffira de choisir quel type d’application pour voulez créer :

8.1A noter ici : Les projets Windows Store Apps et Windows Phone sont maintenant regroupé dans « Store Apps », et ont été renommé en 3 type : Universal Apps, Windows Apps et Windows Phone Apps.

Si vous créer une application Windows Phone (non Silverlight), le framework a alors changé. Nous allons donc dans cet article faire le point sur les nouveautés XAML suite à cette convergence.

Nouveautés XAML côté WP8.1

Que vous soyez parti de zéro ou de votre application existante sur WP8, voici les nouveautés côté XAML à prendre en compte pour migrer votre application vers WP8.1 : Comme Windows Phone 8.1 se rapproche de Windows 8.1, il adopte alors le même XAML UI Framework que les Windows Store Apps.

Un certain nombre de choses vont changer comme vous vous en doutez : namespaces, apis, contrôles, etc. Voici un article msdn qui résume sur toutes les nouveautés : https://msdn.microsoft.com/en-us/library/windowsphone/develop/dn632424.aspx

Contrôles

Qui dit convergence dit même contrôles pour Windows 8.1 et WP 8.1, voici la liste :

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465351.aspx

https://msdn.microsoft.com/en-us/library/windowsphone/develop/hh465351.aspx

Vous remarquerez que c’est la même pour Windows ou Windows Phone !

L’AppBar devient une CommandBar

De la même manière que Windows 8.1, l’AppBar devient une CommandBar sur WP8.1 avec plein de nouvelles options :

  • Binding de commande possible (enfin !),
  • SecondaryCommand comme sur Windows 8.1 qui remplace les menus items de l’AppBar,
  • 4 types d’icônes différents pour couvrir tous les scénarios. Une nouvelle classe appelée IconElement nous permet alors d’appliquer ces 4 différents type d’icônes :
    • BitmapIcon : pour mettre directement une image de vos Assets
    • FontIcon : si vous souhaitez utiliser directement Segoe UI Symbol
    • PathIcon : pour définir directement un path (icône vectorielle)
    • SymbolIcon : comme sur Windows 8.1, on définit un nom d’icône « Play »

Comme c’était possible pour Windows 8.1, dans Visual Studio, vous pouvez directement choisir un SymbolIcon parmi la liste proposée dans le panel “Properties” :

WP81_selecticon

Voici un exemple de code pour la CommandBar :


<Page.BottomAppBar>
 <CommandBar>
 <AppBarButton Label="Button 1" Icon="Flag" Command="{Binding Command1}"/>
 <AppBarButton Label="Button 2">
 <BitmapIcon UriSource="Assets/SmallLogo.scale-240.png"/>
 </AppBarButton>
 <AppBarButton Label="Button 3">
 <FontIcon Glyph="" FontFamily="Segoe UI Symbol"/>
 </AppBarButton>
 <AppBarButton Label="Button 4">
 <PathIcon Data="M0,0 L20,0 L20,20 L0,20"/>
 </AppBarButton>
 <CommandBar.SecondaryCommands>
 <AppBarButton Label="Secondary command" Command="{Binding Command}"/>
 </CommandBar.SecondaryCommands>
 </CommandBar>
 </Page.BottomAppBar>

A noter que ce type de contenu n’est pas seulement accepté par les AppBarButton mais aussi par les Button :


<Button>
 <Button.Content>
 <FontIcon Glyph="" FontFamily="Segoe UI Symbol"/>
 </Button.Content>
 </Button>

A utiliser donc sans modération !

Le LongListSelector devient un SemanticZoom

Un choix plutôt logique pour le LongListSelector qui permettait d’obtenir sur une vue les lettres de l’alphabet disponibles pour la liste :

IC619152

Finalement ce comportement se rapproche assez du SemanticZoom que l’on a sur Windows 8.

Le Panorama devient un Hub

Idem pour le Panorama. Son comportement assez similaire au Hub sur Windows 8 permet de les fusionner ensembles. Pour rappel que ce soit un Panorama sur Phone ou un Hub sur Windows, tous les deux avaient :

  • Un header
  • Un content pour lequel on définissait un Template spécifique pour afficher notre contenu de la manière souhaitée

La seule différence était l’effet parallax sur une image de fond d’un panorama (native sur le panorama, pas native sur le Hub).

Le Pivot devient un Pivot

Le Pivot reste un Pivot et un contrôle disponible uniquement pour Phone. En effet, si vous l’utilisiez dans votre application, seul le namespace a changé et passe de Microsoft.Phone.Controls.Pivot à Windows.UI.Xaml.Controls.Pivot. Mais il reste propre à l’assembly Windows Phone.

Layout

Du côté Layout, pas trop de changement à ce niveau-là car les guidelines pour Windows Phone et Windows 8 restent les mêmes.

Certains Styles ont changés pour s’adapter aussi bien à Windows Phone qu’à Windows 8 comme par exemple le style du bouton qui avant avait une marge de 12 pixels de tous les côtés. Cela est dû à la valeur de la ressource PhoneTouchTargetOverhang utilisée dans le style. En exécution XAML Windows, c’est 12px haut et en bas seulement :

LayoutWP81

En WP8 il y avait un fichier AlignmentGrid.png disponible dans les Assets de votre projet. Il n’est pas inclus dans le template d’un Projet Windows Phone XAML App. Cependant Blend propose une alternative pour vérifier les alignements de votre application. Il s’agit des guides, une fonctionnalité arrivée très récemment qui vous permet de créer (comme sur un logiciel de graphisme avancé) des lignes virtuelles pour l’alignement :

Blend_guides

Pour en savoir plus sur cette fonctionnalité, voici un article qui en parle :

https://blogs.msdn.com/b/mvpawardprogram/archive/2013/11/06/new-features-in-blend-for-visual-studio-2013.aspx

Media

RadialGradientBrush

La classe System.Windows.Media.RadialGradientBrush n’existe plus, mais si vous créez une application au look ModernUI qui respecte les guidelines, vous n’aurez alors plus besoin de faire des dégradés arrondis.

OpacityMask

La classe System.Windows.UIElement.OpacityMask disparaît elle aussi. Dommage je l’aimais bien pour réutiliser des images et leur appliquer une couleur différente sans besoin de créer une nouvelle image : https://devndesign.fr/2013/07/astuce-vos-icones-dans-toutes-les-couleurs/

Ainsi il ne vous reste plus qu’à créer deux images différentes pour le dark et light theme, cf. la partie “Theme” ci-dessous qui explique les nouveautés et comment bien l’utiliser.

Clip

Sur WP8 vous pouviez créer des formes géométriques avec le Clipping Path. Dans WP8.1 le Windows.UI.Xaml.UIElement.Clip devient Windows.UI.Xam.Media.RectangleGeometry. Vous ne pouvez pas spécifier une géométrie non-rectangulaire.

Styles & templates

Tous les styles par défaut pour WP 8.1 se trouvent ici :

C:\Program Files (x86)\Windows Phone Kits\8.1\Include\abi\Xaml\Design\generic.xaml.

Vous trouverez également dans ce dossier les valeurs des ressources pour les différents thèmes dans le fichier themeresources.xaml.

Tilt effect

tiltAvec WP8, il vous fallait le Windows Phone Toolkit afin d’appliquer un Tilt effect à l’un de vos boutons. Maintenant il suffit d’utiliser le PointerDownThemeAnimation dans l’état Pressed du bouton afin de lui appliquer cet effet.

Cet effet est inclus dans le style par défaut des boutons sur WP8.1, si vous voulez l’enlevez il suffit d’éditer le style par défaut et supprimer l’animation PointerDownThemeAnimation dans l’état Pressed du bouton.

Themes

Comme vous devez maintenant définir des Assets pour chaque thème (notamment pour la CommandBar avec des images), le nommage des fichiers va-vous y aider grandement.

Un peu comme on le faisait sur Windows 8.1 pour définir les icônes de l’application aux différentes échelles, nous allons maintenant définir nos Assets (icônes ou autres image ayant besoin de changer de couleur en fonction du thème), de cette même manière.

Vous pouvez adapter les ressources de type chaîne et de fichiers pour la prise en charge de plusieurs échelles d’affichage, langues d’interface utilisateur, paramètres de contraste élevé et plus encore. Les qualificateurs de ressources sont des modificateurs de noms de fichiers et de dossiers qui identifient le contexte dans lequel une version particulière d’une ressource doit être utilisée.

La convention d’affectation de nom standard est : foldername /qualifiername-value_qualifiername-value /filename.qualifiername-value_qualifiername-value.ext

Par exemple : Assets/MyPng.theme-dark.png

Pour plus d’infos sur ce sujet, consultez cet article sur msdn : https://msdn.microsoft.com/fr-fr/library/windows/apps/xaml/Hh965324(v=win.10).aspx 

Animations

Tout comme le facilitait Windows 8.1, il est possible d’ajouter maintenant sur WP 8.1 des animations sur vos interfaces grâce aux ThemeAnimations et ThemeTransitions.

Voici la liste des ThemeAnimations et ThemeTransistions recommandées pour Windows Phone :

Animation Description
FadeOutThemeAnimation Effet sur l’opacité.
FadeInThemeAnimation Effet sur l’opacité.
ContentThemeTransition Déplace les éléments de façon entrante ou sortante du contrôle.
AddDeleteThemeTransition / ReorderThemeTransition Utilisé pour les listes quand des items sont ajoutés ou supprimés.
DragItemThemeAnimation / DropTargetItemThemeAnimation / DragOverThemeAnimation / ReorderThemeTransition Animation pour le drag & drop d’éléments visuels.

Navigation

Cette article parle du nouveau modèle de navigation dans les Windows Phone XAML Apps : https://blog.soat.fr/2014/04/le-modele-de-navigation-des-applications-windows-phone-xaml/

Conclusion

Cette convergence facilite grandement le développement en parallèle des applications Windows Store Apps et Windows Phone Store Apps. Avant on parlait surtout de code partageable avec les Portable Class Library, maintenant on se rapproche des “vues” partageables avec des contrôles similaires que l’on retrouve à la fois sur Windows 8 et Windows Phone.

Reste maintenant à choisir entre le XAML Framework et le Silverlight Framework pour créer des applications WP 8.1, pour comprendre quel type d’application choisir et les différences avec les Windows Phone Silverlight Apps, je vous invite à consulter l’article de Cyril : https://blog.soat.fr/2014/04/les-nouveautes-des-applications-windows-phone-silverlight-8-1/

Happy coding !