Windows Phone | Episode 3 : votre première application

Par sokitaa - March, 24 2014

Hello les amis êtes-vous prêts pour un troisième épisode de Windows phone ? je devine déjà votre réponse ;-) , Let’s Go !

Dans l’épisode précédent nous savons maintenant comment faire un « Hello Word » sous le contrôle d’un bouton (cf l’épisode 2) maintenant nous allons faire un TP qui consiste de réaliser un petit jeu.  

L’idée est de réaliser le jeu classique du plus ou du moins… Je vous rappelle les règles. Le smartphone  calcule un nombre aléatoire et nous devons le deviner. À chaque saisie, il nous indique si le nombre saisi est plus grand ou plus petit que le nombre à trouver, ainsi que le nombre de coups. Une fois trouvé, il nous indique que nous avons gagné. Are you ready guys ?

Notez bien qu’il y a plusieurs façons de réaliser ce TP ainsi qu’une infinité de mise en page possible. J’ai choisi un look très simple, mais n’hésitez pas à faire parler votre créativité.

Alors commençons par le code XAML   (Certains vont me demander « Euh c’est quoi XAML ? » loll cf Episode 2). 

En effet ci-dessous on a le code XAML pour réaliser l’interface de plus ou moins, ça à l’air un peu compliqué mais ne vous inquiétez c’est très simple à comprendre.

Dans l’image ci-dessous vous voyez des numérotations 1 et 2, en effet c’est pour expliquer deux balises  <StackPanel> respectivement dans 1 et 2 :

Pour la première <StackPanel>  qui concerne l’entête on a une balise <TextBlock>  pour donner un titre à notre application ainsi on définit le style du texte.

Et pour la deuxième <StackPanel>,nous avons un champ de saisie pour deviner le nombre, un bouton pour valider la saisie, ensuite il y a un <TextBlock> pour indiquer si le nombre saisi est trop grand ou trop petit par rapport au nombre à deviner, enfin nous avons un autre <TextBlock> qui indique le nombre de tentatives pour trouver le nombre. En dernier lieu nous avons un bouton pour recommencer le jeu.    

Maintenant on vient de faire l’interface graphique voici le résultat obtenu :

Ce qu’il est important à savoir ici c’est que tous mes TextBlock possèdent un style qui sait gérer les thèmes, sauf celui pour les indications car c’est par code que je vais positionner la couleur.

Remarquez également que le TextBox affichera un clavier numérique grâce à l’InputScope qui vaut Number.

Passons à présent au code behind. En effet Code-behind est un terme utilisé pour décrire le code joint avec les objets définis par balisage, lorsqu’une page XAML est compilée par balisage.

Je rappelle que le langage utilisé est le C # :

NB : La classe Color et la classe SolidColorBrush nécessitent l’import de la bibliothèque System.Windows.Media 

Ce bout de code C# n’est pas difficile à comprendre. En effet l’algorithme est classique, on commence par déterminer un nombre aléatoire puis à chaque demande de vérification, on transforme la valeur saisie en entier, afin de vérifier que l’utilisateur n’a pas saisi n’importe quoi. Avec le clavier numérique, les erreurs sont limitées, mais elles sont encore possible car on demande des entiers et l’utilisateur a la possibilité de saisir des nombres à virgule. Puis on compare et on indique le résultat tout simplement :D. 

Maintenant je vous montre ce qu’on obtient au finish :-D :

Et voilà pour notre premier TP. Vous avez pu voir comme il est finalement assez simple de créer des petits programmes sur nos téléphones Windows Phone grâce au XAML et au C#.

See you next time Guys !! ^__^