initiation au code : ateliers en c# (applications desktop et mobile native)
DESCRIPTION
Coding - Initiation au code pour les vrais débutants --- Apprenez les bases de l'algorithmie. Mettez-les en pratique pour créer votre première application de bureau, puis des applications mobiles natives pour Windows Phone --- À destination de vrais débutants qui n’ont jamais tapé une ligne de code, ces cours vous permettront de comprendre les bases d’algorithmie et découvrir en pratique ce qu’est le code avec des exemples simples et amusants. Le but n’est pas de faire de vous des développeurs mais de vous donner un niveau qui vous permette de suivre des formations pour développeurs débutants. Les concepts enseignés sont valables pour tous les langages mais en pratique nous utiliserons le langage C# avec l’environnement de développement Visual Studio 2013. Cet atelier a été conçu dans le cadre d'une initiative menée conjointement par Girls in Tech Paris et Microsoft France. Le programme et les explications ici : http://gitparis.com/2013/12/02/cours-de-coding-les-inscriptions-sont-ouvertes-voila-le-programme/ Les slides correspondent aux 3 premiers ateliers (7 cours de 3 heures).TRANSCRIPT
![Page 1: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/1.jpg)
Stéphanie Hertrich – Microsoft @stepheMicrosoftMichel Rousseau – Microsoft @rousseau_michel
Coding : InitiationAteliers en C#
« Coding » Initiation – MSFT et Girls In Tech Paris
![Page 2: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/2.jpg)
Présentation de l’initiationPrérequis : • Vous n’avez jamais tapé une ligne de code
Objectif:• Ecrire ses premières lignes de code• Comprendre les principes élémentaires de
l’algorithmie• Avoir un aperçu de différents types de
développement• Tremplin pour s’y mettre plus sérieusement• OpenClassRoom• Le Wagon• …
![Page 3: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/3.jpg)
L’agenda des cours
![Page 4: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/4.jpg)
4 parties
Introduction
Atelier 1 : Application « de bureau »
Atelier 3 : Site Web
Atelier 2 : Application mobile native
1 cours
3 cours
3 cours
3 cours
![Page 5: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/5.jpg)
Les apps que l’on va créer
Atelier 1 (3 cours): De l’application console vers WPF
« Choisis un nombre »
![Page 6: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/6.jpg)
Les apps que l’on va créerAtelier 2 (3 cours): De WPF vers Windows Phone
Finger Paint« Choisis un nombre »
![Page 7: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/7.jpg)
Atelier 1 : Application « de bureau »
« Coding » Initiation
![Page 8: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/8.jpg)
Atelier 1 (3 cours)Bases d’algorithmie:• les
variables• If-then-else• les boucles• les
fonctions
Application console en C#, puis en WPF
![Page 9: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/9.jpg)
Agenda de l’atelier
![Page 10: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/10.jpg)
Agenda de l’atelier• Création du projet console• Exécution de l’application dans Visual Studio• Point d’entrée de l’application : le « main »• Les instructions• Les variables• Les types de variables• If, then, else• Les boucles• Les fonctions• Les raccourcis clavier• Les breakpoints• ..
![Page 11: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/11.jpg)
En pratiqueAprès avoir appris quelques bases, Créons un petit jeu qui nous servira de support à l’apprentissage. Ce sera notre fil rouge.1. On l’implémente dans une application console2. On réutilise le code pour faire le même jeu en WPF3. On passe par la case Designer
Les 3 apps en images
![Page 12: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/12.jpg)
Préparation au dev
![Page 13: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/13.jpg)
Démarrer Visual Studio
![Page 14: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/14.jpg)
Création du projet console
![Page 15: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/15.jpg)
Création du projet console 1/2
![Page 16: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/16.jpg)
Création du projet console 2/2
![Page 17: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/17.jpg)
Présentation de l’outil : la base
Code Source du fichier sélectionné
Solution Explorer Liste des fichiers du
projet
Start F5/ Stop Shift F5
Au secours y’a plein de menus/boutons !
![Page 18: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/18.jpg)
Anatomie d’une solution Visual Studio
Solution- Projet 1
- Fichier1.cs- Fichier2.cs- …
- Projet 2- Fichier1.cs- Fichier2.cs- …
![Page 19: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/19.jpg)
Dans notre projet console il y a…• SayMyName.sln Solution
- SayMyName.csproj Projet
- Program.cs Fichier source C#
• Un fichier source « Program.cs » avec ce qu’il faut pour créer une application console vide
• D’autres éléments dont on ne se préoccupera pas pour l’instant
![Page 20: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/20.jpg)
Du code source à l’application
Code source (C#)
Assembly(.exe, .dll)Compilatio
n
.Net Framework Assembly
3rd partyAssembly
![Page 21: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/21.jpg)
La compilation, l’exécution 1/2• Compilation : F6• Compilation + Exécution : Start F5 / Stop
Shift-F5
Que constatez-vous à l’exécution ?
-> La fenêtre apparait et disparait immédiatement
![Page 22: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/22.jpg)
La compilation, l’exécution 2/2• La compilation du code source a
généré un fichier exécutable (.exe)
Il se trouve sur votre disque, dans un sous-répertoire de votre Solution/Projet
Trouvez-le sur le disque et exécutez-le
![Page 23: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/23.jpg)
Le code
![Page 24: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/24.jpg)
Le « main » (fichier program.cs)
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;
namespace SayMyName{ // Une classe : on verra plus tard ce que c'est class Program { // Une méthode (une fonctionnalité) static void Main(string[] args)
{
ENTREZ VOTRE CODE ICI }
}}
![Page 25: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/25.jpg)
Code sourceOrdres exprimés dans un langage de programmation pour définir le comportement et fonctionnement d’une application.
• Instructions (mots-clés du langage de programmation)
• Variables• Appels à d’autres « API »
(fonctionnalités réutilisables mises à disposition par le framework ou par d’autres applications/librairies)
![Page 26: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/26.jpg)
C# = Langage orienté objet• La suite d’instructions qui permet de réaliser une
fonctionnalité est regroupée dans une « fonction » (on dit « méthode » en OO).
→ Cela permet de réutiliser facilement une fonctionnalité dans une app en invoquant le nom de la méthodeEx: - Afficher du texte à l’écran suivi d’un retour chariot :
« Writeline »- Lire un texte tapé au clavier « ReadLine »
• Les méthodes qui se réfèrent au même « acteur » sont regroupées dans une classe
Ex : classe « Console » pour toutes les fonctionnalités de la fenêtre d’exécution de l’application console:Console.WriteLine, Console.ReadLine
![Page 27: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/27.jpg)
Utilisation des méthodes de la classe consoleConsole.ReadKey();
// Les paramètresConsole.WriteLine("Who are you ?");Console.ReadLine();
![Page 28: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/28.jpg)
Les variables
// Lit une chaine de caractères terminée par retour chariot (return)string name = Console.ReadLine();
// A vous ! Affichez “Nice to meet you xxx”Console.WriteLine("Nice to meet you ");Console.WriteLine(name);
// ouConsole.WriteLine("Nice to meet you " + name);
// ou// …
![Page 29: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/29.jpg)
Les types de variables// On veut afficher l'âge de la personne en le déduisant à partir de son année de naissanceConsole.WriteLine("When were you born ?");// A vous : Récupérez l’année de naissance saisie dans une variablestring year = Console.ReadLine();
// On va faire une soustraction : 2013 – year// pour cela, on a besoin d'avoir une valeur entière et non une chaine de caractères (texte)int yearNum = int.Parse(year);
// Essayez de saisir une valeur non numérique…quel est le résultat ? On verra tout à l’heure comment résoudre ce problème
//int age = 2013 - yearNum;// Mieux : int age = DateTime.Now.Year - yearNum;// A vous : Affichez l’age de la personneConsole.WriteLine("You are " + age.ToString());
![Page 30: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/30.jpg)
If, then, else// Afficher un message différent selon que l'on soit jeune ou vieux // (à vous de décider l'âge à partir duquel on est vieux !)
if(age < 40){
// A vous : petit message pour les jeunes mentionnant le nom de la personne Console.WriteLine("You are young, lucky " + name);}else{
// A vous : petit message pour les vieux, mentionnant le nom de la personne
Console.WriteLine("You are experienced, " + name);}
![Page 31: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/31.jpg)
Le mode pas à pas
• F9 : Ajouter/Supprimer un point d’arrêt (Breakpoint)• F10 : Step over l’instruction en cours• F11 : Step in l’instruction en cours• Quickwatch
![Page 32: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/32.jpg)
Le code complet à ce stadeusing System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;
namespace ConsoleApplication1{ class Program { static void Main(string[] args) { Console.WriteLine("Who are you ?"); string name = Console.ReadLine(); Console.WriteLine("Nice to meet you " + name);
Console.WriteLine("Entrez votre année de naissance:"); string annee = Console.ReadLine(); int anneeInt = int.Parse(annee); int age = DateTime.Now.Year - anneeInt; Console.WriteLine("You are " + age);
if (age < 40) { // A vous : petit message pour les plus jeunes mentionnant le nom de la personne Console.WriteLine("You are young, lucky " + name); } else { // A vous : petit message pour les plus agés, mentionnant le nom de la personne Console.WriteLine("You are experienced, " + name); } Console.ReadKey(); } }}
A Vous : Mettez le code entre commentaires entièrement (sauf le ReadKey final)
![Page 33: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/33.jpg)
Les boucles (1/3)// Créons un petit jeu. Le principe :// L’app choisit au hasard un nombre entre 1 et 20 et vous le fait deviner// A vous : développer c’est aussi savoir trouver l’information. Trouvez le nom de la classe qui permet de manipuler des nombres aléatoires // Question Bonus : quelle est la méthode permettant d’en générer un ?int randomed = new Random().Next(20) + 1;
// A VOUS : Demander à l’utilisateur de saisir un nombre et stockez-le dans une variableConsole.WriteLine("Pick a number :");string picked = Console.ReadLine();
// Vérifier la validité de la saisie avec TryParseint pickedNum;int.TryParse(picked, out pickedNum);// Quelle est la signature de TryParse ?// Le code retour nous permet de savoir si va conversion a réussi ou non (type booléeen peut prendre 2 valeurs : true/false) bool isNumeric = int.TryParse(picked, out pickedNum);
![Page 34: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/34.jpg)
Les boucles (2/3)// Puis on encadre ça avec une boucle pour réitérer la saisie jusqu'à ce qu'elle soit validebool isNumeric = int.TryParse(picked, out pickedNum);while(isNumeric == false){ // A VOUS : Trouvez le code à écrire ici Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); isNumeric = int.TryParse(picked, out pickedNum);}
OU
// A votre avis, pourquoi n’a-t-on pas besoin de notre variable isNumeric ici ? while(int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); }
Voyons le récap du code jusque là
![Page 35: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/35.jpg)
Les boucles (3/3)// A vous : Tant qu’on n’a pas trouvé on recommence// Trouvez la condition qui permet de refaire un essai de devinettewhile(pickedNum != randomed){ // A Vous : On aide l’utilisateur : on lui indique si c’est plus ou moins if(pickedNum > randomed) {
Console.WriteLine("It's less"); } else { Console.WriteLine("It's more"); }
// A VOUS : Qu’y a-t-il de remarquable dans le paragraphe suivant ? // Replace it by a function picked = Console.ReadLine(); while (int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); }}
// On sort de la bouclez quand les 2 nombres sont identiques, donc on a gagné !Console.WriteLine("Yes ! You found my number :" + randomed);
![Page 36: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/36.jpg)
Rappel code complet (fin cours 2)http://1drv.ms/1cbsVum
static void Main(string[] args) { int pickedNum; int randomed = new Random().Next(20) + 1;
Console.WriteLine("Pick a number :"); string picked = Console.ReadLine();
while (int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); }
while (pickedNum != randomed) { if (pickedNum > randomed) { Console.WriteLine("It's less"); } else { Console.WriteLine("It's more"); }
Console.WriteLine("Pick a number :"); picked = Console.ReadLine();
while (int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); } } Console.WriteLine("Yes ! You found my number :" + randomed); Console.ReadKey(); }
![Page 37: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/37.jpg)
Les fonctions/méthodes (1/2) /// <summary> /// Cette fonction renvoie un nombre saisi par l'utilisateur /// </summary> /// <returns></returns> static int PickANumber() { string picked; int pickedNum;
picked = Console.ReadLine(); while (int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); } return pickedNum;}
![Page 38: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/38.jpg)
Les fonctions/méthodes (2/2)pickedNum = PickANumber();
// Tant qu’on n’a pas trouvé on recommencewhile(pickedNum != randomed){ // On aide l’utilisateur : on lui indique si c’est plus ou moins if(pickedNum > randomed) {
Console.WriteLine("It's less"); } else { Console.WriteLine("It's more"); }
pickedNum = PickANumber(); // Replace it by a function //picked = Console.ReadLine(); //while (int.TryParse(picked, out pickedNum) == false) //{ // Console.WriteLine("Hey that's not a number, try again :"); // picked = Console.ReadLine(); //}}
Console.WriteLine("Yes ! You found my number :" + randomed);
![Page 39: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/39.jpg)
static void Main(string[] args){ int pickedNum; int randomed = new Random().Next(20) + 1; pickedNum = PickANumber(); while (pickedNum != randomed) { if (pickedNum > randomed) { Console.WriteLine("It's less"); } else { Console.WriteLine("It's more"); }
pickedNum = PickANumber(); } Console.WriteLine("Yes ! You found my number :" + randomed); Console.ReadKey();}
static int PickANumber(){ string picked; int pickedNum;
Console.WriteLine("Pick a number :"); picked = Console.ReadLine();
while (int.TryParse(picked, out pickedNum) == false) {
Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); } return pickedNum;}
![Page 40: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/40.jpg)
Les fonctions/méthodes On crée des méthodes pour plusieurs raisons : - réutilisation - clarification (groupement fonctionnel et lisibilité du code) Ici, on peut créer d’autres méthodes pour chacune des fonctions « métier » de notre app : - NouvellePartie - YouWin - TryAgain
Normalement, quand on lit du code, on doit pouvoir comprendre ce qu'il fait -> importance du nommage -> architecture et découpage
![Page 41: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/41.jpg)
Refactoring (1) // On crée des méthodes pour plusieurs raisons : // - réutilisation // - clarification (groupement fonctionnel et lisibilité du code) // Normalement, quand on lit du code, on doit pouvoir comprendre ce qu'il fait // -> importance du nommage // -> architecture et découpage
static void Main(string[] args) { NouvellePartie();
Console.ReadKey(); }
static void NouvellePartie() { int pickedNum; int randomed = new Random().Next(20) + 1;
pickedNum = PickANumber();
while (pickedNum != randomed) { // Essaie encore pickedNum = TryAgain(pickedNum, randomed); }
// C'est Gagné YouWin(randomed); }
![Page 42: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/42.jpg)
Simplifions encore un peu…
Au niveau des paramètres des fonctions/méthodes
static void NouvellePartie() { int pickedNum; int randomed = new Random().Next(20) + 1;
pickedNum = PickANumber();
while (pickedNum != randomed) { // Essaie encore pickedNum = TryAgain(pickedNum, randomed); }
// C'est Gagné YouWin(randomed); }
![Page 43: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/43.jpg)
Propriété d’une classe• C’est une variable qui appartient à une
classe• Avantages : accessible depuis toutes les
méthodes de la classe (évite de passer la variable en paramètre d’une méthode à une autre)
• Ex :• int randomed• int pickedNum
On sort la déclaration de la variable de la méthode pour la mettre dans la classe (nommage)• int Randomed• int PickedNum
![Page 44: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/44.jpg)
class Program { public static int Randomed { get; set; } public static int PickedNum { get; set; }
static void Main(string[] args) { NouvellePartie(); Console.ReadKey(); }
static void NouvellePartie() { Randomed = new Random().Next(20) + 1; PickANumber();
while (PickedNum != Randomed) { // Essaie encore TryAgain(); } // C'est Gagné YouWin(); }
static void YouWin() { Console.WriteLine("Yes ! You found my number :" + Randomed); }
static void TryAgain() { if (PickedNum > Randomed) { Console.WriteLine("It's less"); } else { Console.WriteLine("It's more"); } PickANumber(); }
static void PickANumber() { string picked; int pickedNum;
Console.WriteLine("Pick a number :"); picked = Console.ReadLine();
while (int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); } PickedNum = pickedNum; } }
![Page 45: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/45.jpg)
BonusLe jeu du pendu
![Page 46: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/46.jpg)
D’abord : l’algorithmeEn langue naturelle, décrivez l’algorithme à mettre en place pour le jeu du pendu :
Le principe : On a 2 joueurs.Joueur 1 entre un mot dans l’application (sans le montrer au J2 !), Joueur 2 le trouve en 10 essais en tapant dans l’application 1 lettre à chaque tour jusqu’à ce qu’il trouve le mot complet.
Démo…
![Page 47: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/47.jpg)
A vous !
• Trouvez • les principales variables• Les principales étapes du jeu: lesquelles sont effectuées 1
seule fois dans le jeu, lesquelles se répètent ? Dans quel cas ?
• Déduisez-en les boucles, tests et conditions• Découpez et organisez l’algorithme avec des
fonctions/méthodes
• Ex : • tant que … faire …• Si … alors … sinon …• …
Remarque : il n’y a pas qu’une seule solution !
![Page 48: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/48.jpg)
De la console vers WPFhttp://1drv.ms/1cbtWCO
![Page 49: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/49.jpg)
La même application en WPF
WPF vs Console: Couche graphique pour l’interface utilisateur.- Fenêtres- Contrôles (boutons, labels, …)- Pas de Program.main mais une MainWindow- …
Ce qui ne change pas :- Application installée sur le PC (.exe)- Langage C#
![Page 50: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/50.jpg)
Ajout d’un projet WPF dans la solution (1/2)
![Page 51: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/51.jpg)
Ajout d’un projet WPF dans la solution (2/2)
![Page 52: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/52.jpg)
Principes importants en WPF• Separation of concerns : on sépare le
code de l’interface graphique (XAML : .xaml) du code métier (C# : .cs)
• Démarrez votre application : que voyez-vous ?• Ouvrez le fichier MainWindows.xaml
XAML = Programmation déclarative avec des balises (un peu sur le même principe que html)
![Page 53: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/53.jpg)
MainWindows.xaml
• Affichez la toolbox (view/toolbox) pour voir la liste de contrôles disponibles
![Page 54: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/54.jpg)
MainWindow.xaml
• De quels contrôles aurez-vous besoin dans le jeu ? Placez le dans votre fenêtre
• Peut aussi se faire par le code (les développeurs préfèrent !)
• Dans le code XAML, retrouvez les différents contrôles que vous avez placés
![Page 55: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/55.jpg)
Les propriétés des contrôles
- Nommez vos contrôles pour les retrouver dans le code (à la souris dans la fenêtre des propriétés ou par code xaml)- Modifiez la propriété Content des boutons (Valider, Nouvelle Partie)- Modifiez la propriété Text des TextBlock
![Page 56: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/56.jpg)
Démarrez votre application
• Que constatez-vous ?• Elle ne s’arrête pas comme l’application console : boucle de messages :
while(true){
J’attends des messages de fenêtre (clic boutons, saisie textbox, …)
}
Ces messages de fenêtre sont gérés à travers des évènements
![Page 57: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/57.jpg)
Les évènements (1)
• Dans notre jeu :• Bouton « Nouveau jeu »• Bouton « Valider »
• Du système :• Bouton pour fermer la fenêtre -> arrête l’application
![Page 58: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/58.jpg)
Les évènements (2)• Ajoutez les évènements « Click » aux
boutons XAML• Dbl click sur le bouton dans l’éditeur graphique• Par le code XAML (Click=…)
• Ouvrez le fichier .cs et cherchez les fonctions correspondant aux évènement
• C’est là qu’il faudra placer le codeIl y aura des différences avec la version console parce que l’on fonctionne en évènementiel (moins de while que dans la version console)
![Page 59: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/59.jpg)
Déclaration des Propriétés /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window {
int Randomed; int PickedNum; int NbEssais;
public MainWindow() { InitializeComponent();
} }
![Page 60: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/60.jpg)
public partial class MainWindow : Window { int Randomed; int PickedNum; int NbEssais;
public MainWindow() { InitializeComponent(); }
void NouvellePartie() { }
void PickANumber() { }
private void YouWin() { }
private void TryAgain() { }
private void btNouvellePartie_Click(object sender, RoutedEventArgs e) { }
private void btValider_Click(object sender, RoutedEventArgs e) { }
}
![Page 61: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/61.jpg)
Le code à écrire
Nouvelle Partie() sur évt click
NouvellePartie() au démarrage
Récupérer le nombre entré par l’utilisateur et vérifier si gagné : YouWin()ou réessayer : TryAgain() sur évt click
![Page 62: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/62.jpg)
Déclencher une NouvellePartie
public MainWindow() { InitializeComponent(); NouvellePartie(); }
private void btNouvellePartie_Click(object sender, RoutedEventArgs e) { NouvellePartie(); }
![Page 63: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/63.jpg)
Sur validation private void btValider_Click(object sender, RoutedEventArgs e) { if(PickedNum == Randomed) { YouWin(); } else { TryAgain(); } }
private void btValider_Click(object sender, RoutedEventArgs e) { if(PickANumber() == true) { if(PickedNum == Randomed) { // C'est gagné YouWin(); } else { // Essaie encore TryAgain(); } } tbNombreSaisi.Clear(); }
![Page 64: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/64.jpg)
Les évènement : le code private void btNouvellePartie_Click(object sender, RoutedEventArgs e) { NouvellePartie(); }
private void btValider_Click(object sender, RoutedEventArgs e) { if(PickANumber() == true) { if(PickedNum == Randomed) { // C'est gagné YouWin(); } else { // Essaie encore TryAgain(); } } tbNombreSaisi.Clear(); }
![Page 65: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/65.jpg)
PickANumber bool PickANumber() { bool res; string picked = tbNombreSaisi.Text; int pickedNum;
// Vérifie saisie if ((res = int.TryParse(picked, out pickedNum)) == false) { tbInfo.Text = "Ce n'est pas un nombre, réessaie..."; } else { PickedNum = pickedNum; }
return res; }
![Page 66: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/66.jpg)
TryAgain
private void TryAgain() { NbEssais = NbEssais + 1; tbEssais.Text = "Essai no " + NbEssais;
if (PickedNum > Randomed) { tbInfo.Text = "C'est moins"; } else { tbInfo.Text = "C'est plus"; } }
![Page 67: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/67.jpg)
YouWin
private void YouWin() { tbInfo.Text = "C'est gagné !!"; btValider.IsEnabled = false; }
![Page 68: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/68.jpg)
Portage de nos 3 méthodes métierVersion app Console Version app WPF
bool PickANumber() { bool res; string picked = tbNombreSaisi.Text; int pickedNum;
// Vérifie saisie if ((res = int.TryParse(picked, out pickedNum)) == false) { tbInfo.Text = "Ce n'est pas un nombre, réessaie..."; } else { PickedNum = pickedNum; }
return res; }
private void TryAgain() { NbEssais = NbEssais + 1; tbEssais.Text = "Essai no " + NbEssais;
if (PickedNum > Randomed) { tbInfo.Text = "C'est moins"; } else { tbInfo.Text = "C'est plus"; } }
private void YouWin() { tbInfo.Text = "C'est gagné !!"; btValider.IsEnabled = false; }
static void PickANumber() { string picked; int pickedNum;
Console.WriteLine("Pick a number :"); picked = Console.ReadLine();
while (int.TryParse(picked, out pickedNum) == false) { Console.WriteLine("Hey that's not a number, try again :"); picked = Console.ReadLine(); } PickedNum = pickedNum; }
static void TryAgain() { if (PickedNum > Randomed) { Console.WriteLine("It's less"); } else { Console.WriteLine("It's more"); } PickANumber(); }
static void YouWin() { Console.WriteLine("Yes ! You found my number :" + Randomed); }
![Page 69: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/69.jpg)
De WPFvers WPF redesignépar Michel Rousseauhttp://1drv.ms/1cbtWCO
![Page 70: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/70.jpg)
Stéphanie Hertrich – Microsoft @stepheMicrosoftMichel Rousseau – Microsoft @rousseau_michel
Atelier 2 : Application mobile native sous Windows Phone
« Coding » Initiation
![Page 71: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/71.jpg)
De WPF vers Windows Phone
![Page 72: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/72.jpg)
4 parties
Introduction
Atelier 1 : Algorithmie
Atelier 3 : Site Web
Atelier 2 : Application mobile native
1 cours
3 cours
3 cours
3 cours
![Page 73: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/73.jpg)
Windows Phone 8http://www.windowsphone.com/fr-fr/features
![Page 74: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/74.jpg)
Comment fait-on pour coder ?Ce qui ne change pas :• Avec Visual Studio• En C#
Ce qui change:• Pages et contrôles un peu différents que
WPF mais même principe• Ce n’est plus un fichier .exe, c’est un
package à déployer sur le device de dev ou à soumettre sur le Store pour un accès public
![Page 75: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/75.jpg)
Outils de l’émulateur
![Page 76: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/76.jpg)
Etapes de portage (1)
• Ajout d’un nouveau projet Windows Phone 8 dans la solution
• Copier/Coller le contenu de la grid XAML de MainWindow.xaml dans la grid ContentPanel de MainPage.xaml
• Copier/coller le contenu de la classe MainWindow dans MainPage (fichier .cs)
Compiler, rectifier
![Page 77: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/77.jpg)
![Page 78: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/78.jpg)
Etapes de portage (2)
• Modifier le nom de l’application et le titre de la page
<!--TitlePanel contains the name of the application and page title--><StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="GIT Coding" …/> <TextBlock Text="A toi de jouer !" …/></StackPanel>
![Page 79: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/79.jpg)
Et le design dans tout ça ?
• Sélectionnez le fichier
MainPage.xaml• Click droit « ouvrir
dans Blend »
![Page 80: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/80.jpg)
![Page 81: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/81.jpg)
3 étapes pour le design
1. Ajouter le fond bleu2. Modifier la police de
caractères3. Ajouter une marge pour
mieux positionner les contrôles
![Page 82: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/82.jpg)
Ajouter un fond
• Copier/Coller les assets (police + png)• Modifier le Background du LayoutRoot
![Page 83: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/83.jpg)
Modifier la police
• Sélectionner les contrôles TextBox et TextBlock• Modifier la police
![Page 84: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/84.jpg)
Ajouter une marge
Sélectionner le stackpanel et lui affecter une margin top de 130
![Page 85: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/85.jpg)
Tada !
![Page 86: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/86.jpg)
Quelques spécificités de Windows Phone• Les vignettes dynamiques
![Page 87: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/87.jpg)
Les vignettes, le manifest
![Page 88: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/88.jpg)
Modifier la vignette à la fin de la partie
Comment on fait ? http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206971(v=vs.105).aspx
![Page 89: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/89.jpg)
Le code
void UpdateVignette() { FlipTileData TileData = new FlipTileData() { BackTitle = DateTime.Now.ToString(), BackContent = "Gagné : " + PickedNum.ToString(), };
var tileEnum = ShellTile.ActiveTiles.GetEnumerator(); tileEnum.MoveNext(); tileEnum.Current.Update(TileData); }
![Page 90: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/90.jpg)
Soumission de l’app sur le Store Windows Phone
![Page 91: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/91.jpg)
Création du compte développeurCréation du compte développeur pour Windows Phone et Windows 8 : 14 euros (individuals) http://msdn.microsoft.com/en-us/library/windows/apps/jj863494.aspx
Soumission de l’app- publique de l’app (soumis au processus
de validation)- bêta privée (disponible uniquement pour
une liste de personnes définies)
![Page 92: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/92.jpg)
• Description de l’application
• Gratuit, Payant, …• Ajouter images
promotionnelles pour le store
• …
![Page 93: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/93.jpg)
![Page 94: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/94.jpg)
http://www.windowsphone.com/fr-fr/store/app/jeu-git-coding/2ad310f0-7ef7-4e94-b4be-d4d87a04f105
![Page 95: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/95.jpg)
La monétisation
http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202939(v=vs.105).aspx
• Gratuit• Publicité• Payant• Trial mode• Paiement In-app
![Page 96: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/96.jpg)
FingerPaintPour Windows Phone
![Page 97: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/97.jpg)
FingerPaint
DIY en 10 étapes simples…
https://fingerpaint.codeplex.com/
![Page 98: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/98.jpg)
Sites d’hébergement, de partage et de collaboration de projets- GitHub- Codeplex…
Les sources originaux de notre petite application de dessin: https://fingerpaint.codeplex.com/
![Page 99: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/99.jpg)
10 Etapes
1. Création du projet Windows Phone2. Copier les assets (le fond d’écran, la
poubelle, …)3. Définir le fond d’écran4. Modifier les titres de la pages5. Créer la zone de dessin6. Créer les évènements de dessin7. Dessiner8. Améliorer le pinceau9. Ajouter la gestion des couleurs10.Ajouter la corbeille (effacer)
![Page 100: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/100.jpg)
1 - Création du projet Windows Phone
Set as startup project
![Page 101: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/101.jpg)
2 - Copier les assets
![Page 102: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/102.jpg)
3 - Définir le fond d’écran
Dans le fichier XAML, sélectionner le control LayoutRoot et modifier sa propriété Background
![Page 103: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/103.jpg)
4 - Modifier les titres
- Text- Foreground
![Page 104: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/104.jpg)
5 – Créer la zone de dessinJe souhaite délimiter une zone : j’ajoute un contrôle simple : Canvas.
![Page 105: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/105.jpg)
Qu’est-ce qu’il manque ?
• Un/des évènement(s) permettant de dessiner au doigt• Un/des évènements permettant de
choisir la couleur de la peinture
![Page 106: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/106.jpg)
6 - Les évènements permettant de dessiner !(Uniquement en couleur noire pour commencer)
Quels sont les évènements ? (démo dessin dans l’app)• J’appuie mon doigt sur l’écran (je vais commencer
à dessiner)• Je déplace mon doigt sur l’écran (je dessine)• Je décolle mon doigt de l’écran pour arrêter le trait
en court (j’arrête de dessiner)
Traduction en évènements:• MouseMove• MouseLeftButtonDown• MouseLeftButtonUp
![Page 107: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/107.jpg)
6 - Le XAML
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Canvas Height="400" VerticalAlignment="Top" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseMove="Canvas_MouseMove" MouseLeftButtonUp="Canvas_MouseLeftButtonUp"> </Canvas> </Grid>
On crée les évènements sur notre zone de dessin : le canvas
![Page 108: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/108.jpg)
6 - Le code C#public partial class MainPage : PhoneApplicationPage{ // Constructor public MainPage() { InitializeComponent();
// Sample code to localize the ApplicationBar //BuildLocalizedApplicationBar(); }
private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) {
}
private void Canvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) {
}
private void Canvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) {
}…
![Page 109: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/109.jpg)
6 - Le code C#public partial class MainPage : PhoneApplicationPage{ // Constructor public MainPage() { InitializeComponent();
// Sample code to localize the ApplicationBar //BuildLocalizedApplicationBar(); }
private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) {
// On commence à dessiner }
private void Canvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) {
// On dessine un trait entre notre précédente position et la nouvelle
}
private void Canvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) {
// On arrête de dessiner
}…
![Page 110: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/110.jpg)
bool IsDrawing = false;
private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { IsDrawing = true; }
private void Canvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) { if (IsDrawing) {
Dessine(); } }
private void Canvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e){ IsDrawing = false;}
Commencer à dessiner ou s’arrêter : Déterminé par la propriété booléenne IsDrawing
![Page 111: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/111.jpg)
7 - Dessiner = ajouter des lignes void Dessine(Point oldPoint, Point newPoint) { Line line = new Line(); line.Stroke = new SolidColorBrush(Colors.Black);
line.X1 = newPoint.X; line.Y1 = newPoint.Y; line.X2 = oldPoint.X; line.Y2 = oldPoint.Y;
paint.Children.Add(line); }
A chaque changement de position, on tire un trait entre la position précédente et l’actuelle.On utilise une couleur noire pour l’instantLes traits sont ajoutés dans le Canvas (tout comme on a mis des contrôles TextBox, TextBlock, … dans une Grid dans d’autres exemples)
-> Reste à récupérer la position de la souris a fil des déplacements
![Page 112: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/112.jpg)
7 - Récupérer la position de la sourisDans un paramètre des évènements MouseLeftButtonDown et MouseMouse
private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e){ IsDrawing = true; OldPoint = e.GetPosition(paint); }
![Page 113: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/113.jpg)
public partial class MainPage : PhoneApplicationPage { Point OldPoint; bool IsDrawing = false;
public MainPage() { InitializeComponent(); }
private void Canvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { IsDrawing = true; OldPoint = e.GetPosition(paint); }
private void Canvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) { if (IsDrawing) { Point newPoint = e.GetPosition(paint); Dessine(OldPoint, newPoint); OldPoint = newPoint; } }
void Dessine(Point oldPoint, Point newPoint) { Line line = new Line(); line.Stroke = new SolidColorBrush(Colors.Black);
line.X1 = newPoint.X; line.Y1 = newPoint.Y; line.X2 = oldPoint.X; line.Y2 = oldPoint.Y;
paint.Children.Add(line); }
private void Canvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) { IsDrawing = false; }}
![Page 114: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/114.jpg)
8 - On améliore le pinceau Line GetLine() { Line line = new Line(); line.StrokeThickness = 15; line.StrokeStartLineCap = PenLineCap.Round; line.StrokeEndLineCap = PenLineCap.Round; line.Opacity = 0.5; line.Stroke = new SolidColorBrush(Colors.Black);
return line; }
void Dessine(Point oldPoint, Point newPoint) { Line line = new Line(); line.Stroke = new SolidColorBrush(Colors.Black);
line.X1 = newPoint.X; line.Y1 = newPoint.Y; line.X2 = oldPoint.X; line.Y2 = oldPoint.Y;
paint.Children.Add(line); }
Modifiez la méthode Dessine pour qu’elle utilise la méthode GetLine()
![Page 115: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/115.jpg)
9 - Changer la couleur du pinceauTrouver un moyen de détecter le clic souris sur les pots de peinture=> Il faut délimiter les 4 zones correspondant aux 4 pots de peinture
• Ajouter un contrôle Ellipse transparent au-dessus de chaque pot
• Traiter l’evt Click sur l’ellipse
![Page 116: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/116.jpg)
9 - Ajout des ellipses
Mettez un fond et contour transparents
![Page 117: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/117.jpg)
A vous !Mettez en place le changement de couleur du clic sur les pots de peinture
Indices:- Nommez vos ellipses pour que VS génère
automatiquement des noms d’evts pertinents (cf la prochaine étape ci-dessous)
- Ajoutez les évènements Click (MouseLeftButtonDown) sur chaque ellipse
- Ajoutez une propriété Couleur dans la classe MainPage
- Modifiez la couleur dans chaque evt MouseLeftButtonDown
- Utilisez la propriété Couleur dans la fonction GetLine
![Page 118: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/118.jpg)
10 – Effacer l’écran
A vous !Ajoutez la poubelle (effacer l’écran)
1. Ajouter l’image de la poubelle dans la page
2. Définir l’évènement clic sur l’image3. Dans le code C# de l’évènement
clic, effacer l’image : supprimer tous les enfants du contrôle Canvas
![Page 119: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/119.jpg)
Terminer l’application
Dans le manifest :• Ajouter les images pour les vignettes
et l’icone de l’application• Modifier le nom de l’application (tel
qu’il apparaitra sur le téléphone pour l’utilisateur)
![Page 120: Initiation au code : Ateliers en C# (applications desktop et mobile native)](https://reader035.vdocument.in/reader035/viewer/2022081414/54daf8e34a7959ef358b45c5/html5/thumbnails/120.jpg)
Bravo !Et merci…