Adaptive Properties: UI XAML responsives en toute simplicité!

Auteur du billet de blog : Rudy Spano - Neotech Solutions

Rudy Spano

Consultant .Net
  Publié le mercredi 17 août 2016

Expert technique .Net passionné par tout ce qui est innovant en environnement Microsoft. De la mobilité, du client lourd (Xaml Applications) mais aussi une petite pointe de Web...

Liens utiles

Projet Github   Paquet Nuget

Introduction

Avec la sortie des applications universelles pour Windows 10 (UWP), Microsoft propose un mécanisme puissant pour designer des applications responsives: les Adaptive Triggers.

Toutefois, je suis convaincu que l’on pourrait répondre à 90% des besoins pour développer une application qui s’adapte aux différentes résolutions des différents devices d’une façon bien plus efficace et intuitive. C’est la raison pour laquelle j’ai créé cette librairie.

L'idée est de permettre au développeur de définir les propriétés pour différents gabarits directement dans le Xaml:

Ici, la seule chose à comprendre c’est que pour un mode spécifique (XS), les valeurs de certaines propriétés sont différentes.

Si on compare avec le code nécessaire à la définition d’Adaptive Triggers (Visual States=>Triggers=> Setters), on remarque que le code est plus lisible, plus découvrable, plus intuitif et donc plus maintenable...

De plus, la librairie est compatible avec différents types d'applications à base de XAML: UWP, Universal App 8.1 mais aussi WPF!

  

Installation du paquet

Il vous suffit d'installer le package Nuget nommé Adaptive properties via le package Manager:

 

Déclaration du Namespace

Ajouter aux fichiers Xaml (Pages/UserControls), la directive suivante: 

 

 Activation des Adaptive Properties sur un Visual Tree 

Vous devez choisir entre deux modes

-XS (Extra Small) : Les propriétés spécifiques sont affectées lorsque la largeur de l’application est/devient plus petite que la valeur de la propriété XS.MaxWidth (600 par défaut). Cette propriété peut être modifiée en code-behind :

-XL (Extra Large) : Les propriétés spécifiques sont affectées lorsque la largeur de l’application est/devient plus grande que la valeur de la propriété XL.MinWidth (601 par défaut). Cette propriété peut être modifiée en code-behind :

-Choisissez la Grid parente dans votre Xaml sur laquelle vous activez la propriété XS.AdaptiveMode mode ou XL.AdaptiveMode. Tous les contrôles enfants de cette Grid pourront alors utiliser l’ensemble des propriétés proposées (il est conseillé de l’activer sur l’élément Grid de plus haut niveau).

Attention: Cette propriété ne peut-être affectée qu'une seule fois par Visual Tree:

 

Définition des propriétés spécifiques

Vous pouvez maintenant utiliser les Adaptive Properties! Vous trouverez ci-dessous une liste complète de celles-ci.

A noter que l'auto-complétion vous les propose et que le designer en tient aussi compte lorsque vous changez de device ou lorsque vous changez la largeur de la vue :)

 

 

Adaptive properties

Toutes les propriétés listées redéfinissent si nécessaire les propriétés pour le mode spécifié (XS ou XL). 

  

Commentaires

Ecrit par stéphane, jeudi 25 août 2016

Merci Rudy pour ton partage!

Ecrit par Nicolas, jeudi 25 août 2016

Très intéressant, Est ce qu\'il serait possible de faire 4 options comme Bootstrap? ^^