Le projet Calculator

 

Ajouter maintenant un nouveau projet dans votre solution, que vous nommerez Calculator.

L’écran aura l’apparence suivante :

On pourra réaliser les 4 opérations arithmétiques de base sur 2 entiers, l’application nous donnera le résultat.

C’est un enchainement horizontal de contrôles graphiques. Quel élément allez-vous utiliser pour les contenir ?

Les contrôles sont trop rapprochés les uns des autres. Vous définirez un Style pour mettre des marges qui seront utilisées par tous les contrôles. Le Style doit être centralisé. On souhaite que l’application ressemble à ceci :

Le calcul devra se faire en temps réel, aucune validation de la part de l’utilisateur ne sera nécessaire. On veillera à utiliser le DataBinding et un/des Converter si nécessaire

Pour cela vous aurez besoin de :

  • Coder une classe Operation qui correspondra à notre modèle de données. Concrètement, elle devra donc contenir 2 valeurs de type int, un opérateur de type string, et le résultat de type int.

  • Instancier un objet typé Operation. Vous pouvez le faire directement dans le xaml, dans les ressources du contrôle principal (l’instance sera accessible dans tous les nœuds fils)

  • Binder les 2 entrées (correspondant aux 2 TextBox sur l’IHM) et l’opération choisie (Slider sur l’IHM) avec les attributs correspondant dans notre instance d’Operation. Pour le slider, vous aurez besoin de convertir sa valeur qui est de type int en un string qui correspondra au type de l’opération

  • Déclencher le calcul lorsque l’utilisateur entre un nouveau nombre ou choisit une nouvelle opération.

  • Notifier l’IHM lorsque le résultat est mis à jour dans notre instance.

Si cela n’est pas déjà fait, passez par un DataTemplate pour afficher votre instance d’Operation, avec un résultat qui doit ressembler à ça :

Créer un autre DataTemplate pour changer l'apparence de votre calculette. Par exemple, remplacer les TextBox par des ComboBox avec valeurs prédéfinies, etc... Ajoutez également une image de fond à votre application. Vous êtes libres, mais il faut au maximum éviter de changer autre chose que le DataTemplate pour changer votre écran.

Faites maintenant en sorte que le résultat s'affiche en rouge s'il est égal à 0. Puis s'il est inférieur à 0. On utilisera pour cela un/des DataTrigger.

Dans cet exemple, nous avons vu qu'il est aisé de changer l'apparence de notre application en ne modifiant que la partie graphique (et a fortiori le DataTemplate).

Nous avons bien séparé la couche View (IHM) du Model (classes représentant les objets métier que l'on manipule, ici l'opération.

Pour les applications complexes, il faut aller encore plus loin, et adopter l'architecture MVVM (Model View View-Model). Cela signifie que nous aurons toujours notre Model et notre View bien séparés, mais qu'en plus, le Model ne doit plus être instancié directement dans la View comme nous venons de le faire, mais dans une classe View-Model servant à faire la liaison entre la partie affichage et la partie modèle de données. Nous allons mettre ce concept en application dans le projet suivant.