Les nouveautés des applications Windows Phone XAML Apps 8.1
Le 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 :
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” :
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 :
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 :
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 :
Pour en savoir plus sur cette fonctionnalité, voici un article qui en parle :
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
Avec 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 !