Stéphanie Hertrich – Microsoft @stepheMicrosoftMichel Rousseau – Microsoft @rousseau_michel

Coding : InitiationAteliers en C#

« Coding » Initiation – MSFT et Girls In Tech Paris

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• …

L’agenda des cours

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

Les apps que l’on va créer

Atelier 1 (3 cours): De l’application console vers WPF

« Choisis un nombre »

Les apps que l’on va créerAtelier 2 (3 cours): De WPF vers Windows Phone

Finger Paint« Choisis un nombre »

Atelier 1 : Application « de bureau »

« Coding » Initiation

Atelier 1 (3 cours)Bases d’algorithmie:• les

variables• If-then-else• les boucles• les

fonctions

Application console en C#, puis en WPF

Agenda de l’atelier

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• ..

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

Préparation au dev

Démarrer Visual Studio

Création du projet console

Création du projet console 1/2

Création du projet console 2/2

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 !

Anatomie d’une solution Visual Studio

Solution- Projet 1

- Fichier1.cs- Fichier2.cs- …

- Projet 2- Fichier1.cs- Fichier2.cs- …

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

Du code source à l’application

Code source (C#)

Assembly(.exe, .dll)Compilatio

n

.Net Framework Assembly

3rd partyAssembly

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

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

Le code

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 }

}}

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)

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

Utilisation des méthodes de la classe consoleConsole.ReadKey();

// Les paramètresConsole.WriteLine("Who are you ?");Console.ReadLine();

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// …

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());

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);}

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

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)

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);

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à

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);

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(); }

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;}

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);

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;}

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

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); }

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); }

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

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; } }

BonusLe jeu du pendu

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…

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 !

De la console vers WPFhttp://1drv.ms/1cbtWCO

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#

Ajout d’un projet WPF dans la solution (1/2)

Ajout d’un projet WPF dans la solution (2/2)

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)

MainWindows.xaml

• Affichez la toolbox (view/toolbox) pour voir la liste de contrôles disponibles

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

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

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

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

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)

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();

} }

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) { }

}

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

Déclencher une NouvellePartie

public MainWindow() { InitializeComponent(); NouvellePartie(); }

private void btNouvellePartie_Click(object sender, RoutedEventArgs e) { NouvellePartie(); }

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(); }

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(); }

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; }

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"; } }

YouWin

private void YouWin() { tbInfo.Text = "C'est gagné !!"; btValider.IsEnabled = false; }

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); }

De WPFvers WPF redesignépar Michel Rousseauhttp://1drv.ms/1cbtWCO

Stéphanie Hertrich – Microsoft @stepheMicrosoftMichel Rousseau – Microsoft @rousseau_michel

Atelier 2 : Application mobile native sous Windows Phone

« Coding » Initiation

De WPF vers Windows Phone

4 parties

Introduction

Atelier 1 : Algorithmie

Atelier 3 : Site Web

Atelier 2 : Application mobile native

1 cours

3 cours

3 cours

3 cours

Windows Phone 8http://www.windowsphone.com/fr-fr/features

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

Outils de l’émulateur

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

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>

Et le design dans tout ça ?

• Sélectionnez le fichier

MainPage.xaml• Click droit « ouvrir

dans Blend »

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

Ajouter un fond

• Copier/Coller les assets (police + png)• Modifier le Background du LayoutRoot

Modifier la police

• Sélectionner les contrôles TextBox et TextBlock• Modifier la police

Ajouter une marge

Sélectionner le stackpanel et lui affecter une margin top de 130

Tada !

Quelques spécificités de Windows Phone• Les vignettes dynamiques

Les vignettes, le manifest

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

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); }

Soumission de l’app sur le Store Windows Phone

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)

• Description de l’application

• Gratuit, Payant, …• Ajouter images

promotionnelles pour le store

• …

http://www.windowsphone.com/fr-fr/store/app/jeu-git-coding/2ad310f0-7ef7-4e94-b4be-d4d87a04f105

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

FingerPaintPour Windows Phone

FingerPaint

DIY en 10 étapes simples…

https://fingerpaint.codeplex.com/

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/

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)

1 - Création du projet Windows Phone

Set as startup project

2 - Copier les assets

3 - Définir le fond d’écran

Dans le fichier XAML, sélectionner le control LayoutRoot et modifier sa propriété Background

4 - Modifier les titres

- Text- Foreground

5 – Créer la zone de dessinJe souhaite délimiter une zone : j’ajoute un contrôle simple : Canvas.

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

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

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

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) {

}…

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

}…

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

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

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); }

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; }}

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()

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

9 - Ajout des ellipses

Mettez un fond et contour transparents

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

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

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)

Bravo !Et merci…