Thursday, November 28, 2013

WPF : Making art with maths and SetPixel




Have you ever tried to create bitmap images with c# ?

Reading or writing pixels is very very easy...
Each pixel has RGBA value that can you can read or write.

R : the Red component of the pixel
G : the Green component of the pixel
B : the Blue component of the pixel
A : the Alpha (transparency level) component of the pixel

Each component can have a value between 0 and 255 in decimal (base 10) and between 00 and FF in hexadecimal (base 16).


This sample code use simple math function to calculate random colors for pixels.


You can move the slider to apply a multiply factor to animate the generated bitmap.


This is a really simple sample but you can quite easily apply filters or draw fractals for exemple !


You can download the source code of this sample project (VS2012 / C#)
WpfArtWithMath.zip











Read More

Monday, November 11, 2013

WPF : Easy Text To Speech (speech synthesis from text)



There is two way to generate speech from text with WPF :

- Using the Windows System.Speech library that comes with .net framework 3.5
- Using a distant web service such as Google Text2Speech API


In this article, we will focus on the second way to do that, that means we will call Google REST web services to generate a MP3 file from a sample text.
We will use nAudio (http://naudio.codeplex.com) to play the resulting MP3 file into our application.

Ok, let's start !

The Google API URL to call is : 
http://translate.google.com/translate_tts?tl=[CULTURE]&q=[YOUR_TEXT]

For example : 
http://translate.google.com/translate_tts?tl=en&q=Hello+world


Culture can be : en, fr

Here is a list of the supported languages :
English, Afrikaans, Albanian, Catalan, Chinese (Mandarin), Croatian, Czech, Danish, Dutch, Finnish, Greek, Hungarian, Icelandic, Indonesian, Latvian, Macedonian, Norwegian, Polish, Portuguese, Romanian, Russian, Serbian, Slovak, Swahili, Swedish, Turkish, Vietnamese, Welsh, Haitian Creole, French, Italian and German...

Your text must be string with %20 or + instead of spaces (ex : &q=Hello%20world or &q=Hello+world)

Keep in mind that an URL shouldn't be more than 255 caracters otherwise it can be truncated by routers, proxies...

More info about that API :
http://techcrunch.com/2009/12/14/the-unofficial-google-text-to-speech-api

The c# code is quite simple, it just make an HTTP call to the Google URL and save or play the resulting audio stream.


Have fun with that :)

You can download the source code of this sample project (VS2012 / C#) :
WPFText2Speech.zip



Read More

Saturday, October 12, 2013

WPF : Découverte de MVVM Light Toolkit

 
 
Dans un article précédent nous avons décortiqué un projet ultra minimaliste pour démarrer en douceur avec le pattern MVVM en WPF.

Nous n'avions utilisé aucun framework MVVM tiers, nous avions juste créé nous même 2 petits helpers MVVM : RelayCommand et ObservableObject(=ViewModelBase).


MVVM Light apporte quand même des choses bien pratiques en plus :)
Je vais tacher de vous en donner un petit aperçu...



En quelques lignes, MVVM Light apporte les possibilités suivantes :

  • Une classe ViewModelBase déjà faite et apportant plus de possibilités
  • Une classe RelayCommand déjà faite avec possibilité de passer un paramètre à la commande
  • La possibilité de rediriger simplement un évènement vers une commande (EventToCommand)
  • Un ServiceLocator qui permet mieux découpler la vue et le vue modèle
  • Un IoC simple pour faire de l'injection de dépendance et avoir un couplage mou entre la vue, le vue modèle et le modèle
  • Un système de messenging pour faire communiquer étages qui ne se connaissent pas forcément (ex : le vue modèle ne connait pas la vue)
  • D'autres choses encore qui sortent du cadre de cette article...

J'ai volontairement repris exactement le même projet que dans l'article précédent, pour que vous puissiez bien voir les quelques changements à apporter pour utiliser MVVM Light :





Voici les quelques changements que j'ai essayé de vous commenter de façon simple et rapide :

ViewModelBase
Le vue modèle VoirContactViewModel hérite désormais du ViewModelBase de MVVM Light (et non plus de ObservableObject)
Dans le Set de chacune des propriétés d'un contact défini dans le vue modèle :
Avant : OnPropertyChanged("xxx");
Après : RaisePropertyChanged(() => xxx);
(c'est mieux d'avoir à taper xxx sous forme de propriété plutôt que sous forme de magic string "xxx", moins de risque de mal taper, mauvaise casse...)


RelayCommand
Dans le vue modèle VoirContactViewModel, au niveau du relayage des commandes :

Avant :
ChargerContactCommand = new RelayCommand(ChargeContact);

Après :
VoirContactCommand = new RelayCommand<RoutedEventArgs>(VoirContact);

(C'est juste la syntaxe qui change un peu car le RelayCommand de MVVM Light supporte le passage d'un paramètre


ServiceLocator
Dans la vue VoirContactView, la façon de déclarer le binding entre la vue et le vue modèle à un peu changé étant donné que c'est maintenant le service locator qui va donner le vue modèle à la vue.


Avant :
<Window.DataContext><viewmodel:VoirContactViewModel /></Window.DataContext>

Après :
DataContext="{Binding VoirContactVM, Source={StaticResource Locator}}"

(C'est désormais le ServiceLocator qui va gérer la distribution des vues modèles aux vues de façon centralisée et par injection de dépendance)
 

Messenging
Une fois qu'un contact est affiché à l'écran par la vue, une MessageBox s'affiche "Le contact xxx a été affiché avec succès..."
C'est le vue modèle VoirContactViewModel qui ordonne à la vue VoirContactView d'afficher cette MessageBox alors que le vue modèle n'a aucune connaissance de la vue qui l'utilise.
Comment ça peut fonctionner alors ? Via le système d'envoi de messages de MVVM Light !
N'importe quel étage peut s'abonner à un message et recevoir ce message envoyé par un autre étage.


VoirContactView.xaml.cs :
// La vue s'abonne au message afficheMessageRetour
// c'est le view model qui va déclencher l'envoi du message
Messenger.Default.Register<Contact>(this, "afficheMessageRetour",
AfficheMessageRetour);


VoirContactViewmodel.cs :
// Le vue modèle déclenche l'envoi du message "afficheMessageRetour"

// pour communiquer avec la vue
Messenger.Default.Send(contact, "afficheMessageRetour");



Voilà ! Vous avez ainsi un nouveau projet ultra simple pour démarrer en douceur avec MVVM Light !


Site de MVVM Light Toolkit : http://www.galasoft.ch/mvvm


Télécharger MVVM Light Toolkit sur CodePlex : http://mvvmlight.codeplex.com



Vous pouvez télécharger le code source du projet (VS2012 / C#) :

WPF_MVVMLightSample.zip


Conseil : Utilisez nuget pour télécharger et référencer rapidement MVVM Light Toolkit dans vos projets :) Voir l'article ici...









MVVM Light Toolkit a été créé par Laurent Bugnion, un MVP Microsoft de renom...
http://www.galasoft.ch



Read More

Monday, September 30, 2013

WPF : Débuter en douceur avec MVVM !




Vous avez entendu parler du pattern MVVM (Modèle / Vue / Vue Modèle) et vous avez envie de démarrer un nouveau projet sur de bonnes bases ?

Voici un petit projet minimaliste qui pose la structure d'un projet MVVM en WPF...

Ce projet est volontairement minimaliste et le plus commenté possible (commentaires en français) pour vous permettre de comprendre le découpage et le principe sans vous polluer l'esprit avec trop de fioritures :)



Ce sample est très simple, en cliquant sur "Charger contact" il permet d'afficher aléatoirement une fiche contact. Si le contact est un homme, le fond sera bleu, si c'est une femme, le fond sera rose (cliquez plusieurs fois sur le bouton)




Ce sample n'utilise pas de Framework MVVM tiers (l'utilisation de MVVM Light Toolkit fera l'objet d'un futur article), juste 2 classes helpers sont utiles pour faire du MVVM :

  • ObservableObject.cs : Une version améliorée de ViewModelBase qui implémente INotifyPropertyChanged (OnPropertyChanged) mais qui permet en plus de vérifier le nom des propriétés tapées à la main et de lancer une exception si un nom de propriété inexistante a été saisie dans le code du ViewModel.

    But de ce helper : Toutes vos vues modèles doivent hériter de ObservableObject pour pouvoir utiliser OnPropertyChanged (notification de changement de la valeur de la propriété pour mise à jour du binding entre la vue et le vue modèle)

  • RelayCommand.cs : Cette classe permet s'associer simplement une commande à une action et d'utiliser éventuellement la propriété CanExecute.

    But de ce helper : Souvenez vous qu'en MVVM on n'utilise pas d'evénéments (ex : clic bouton) dans le code behind de la vue (pas de découpage sinon) mais à la place des commandes qui vont pointer vers une méthode du vue modèle. Ce RelayCommand permet de relayer une commande entre la vue et le vue modèle.

Quelques explications :

La vue : 
La vue se nomme VoirContactView.xaml + (.xaml.cs) et se trouve dans le sous dossier "View".
Si vous regarder le code behind de cette vue, il est... complètement vide !
C'est l'objectif de MVVM, séparer complètement la présentation (la vue) du code métier (le vue modèle) et des données (le modèle).
Interdiction d'utiliser des événements avec les contrôles posés dans le XAML, ici on travaille avec des commandes (c'est pas plus compliqué !)

Le modèle : 
Le modèle se compose de la classe métier Contact.cs et du service ServiceContact.cs et se trouve dans le sous dossier Model.
Le ServiceContact va nous permettre de gérer tout ce qui est possible de faire sur des contacts (création, lecture, modification, suppression, c'est à dire le CRUD). Seule la lecture a été implémentée dans cet exemple.
C'est dans ce service que vous allez pouvoir effectuer vos remontées de la base de données.

Le vue modèle :
Le vue modèle se nomme VoirContactViewModel.cs et se trouve dans le sous dossier ViewModel.
Pour que des données de test puissent s'afficher dans le designer XAML de Visual Studio, un autre vue modèle a été créé à part (DesignVoirClientViewModel.cs) et permet juste dans Visual Studio de pouvoir afficher un jeu de données de test.
Ces 2 vues modèles implémente une interface commune nommée : IVoirClientVueModel.cs
(En effet, ces 2 vues modèles doivent exposer les mêmes méthodes, elles doivent donc respecter un contrat, c'est à dire une interface)

Les commandes :
C'est par le biais de la commande ChargeContactCommand que la vue va pouvoir demander une action au vue modèle. Cette commande va appeller la méthode ChargeContact() du vue modèle qui va appeler la méthode Charger() du modèle.

Conclusion :

Voici un petit projet très simple permettant de montrer le découpage d'un projet WPF basé sur MVVM.
Même si coder en MVVM ne necessite pas obligatoirement l'utilisation d'un framework MVVM, nous verrons dans un prochain article qu'un framework comme MVVM Light Toolkit permet de faciliter certains aspects et d'ouvrir d'autres possibilités comme le messaging par exemple...



Vous pouvez télécharger le code source du projet (VS2012 / C#) :
WPF_SimpleMVVM_sans_framework.zip




Read More

Wednesday, September 18, 2013

Visual Studio : Adoptez NuGet Package Manager !



Prenez donc un nugget, vous allez adorer :)

NuGet est un addon à Visual Studio 2010, 2012, 2013 qui permet d'ajouter des librairies .net tierces en 3 clics à un projet.

Avant NuGet, il fallait aller sur le site de l'éditeur de la librairie, télécharger la bonne version (je suis sous VS2010, 2012, 2013 ? Mon projet est en .net 2.0, 3.0, 3.5, 4.0 ou 4.5 ? La dernière build c'est la laquelle ?), bref y'a des fois où ça pouvait être un peu laborieux...

Avec NuGet, ouvrez un projet ou une solution, allez n'importe quand dans le menu Outils -> Gestionnaire de package de bibliothèques -> Gérer les packages Nuget pour la solution.




Dans la zone de recherche tapez le nom de la librairie que vous cherchez ou naviguez dans les libraries affichées, je suis sur que vous allez en découvrir certaines que vous ne connaissiez pas :)

Vous avez même des infos sur le nombre de téléchargements et sur les dépendances éventuelles... 10 téléchargements ? Elle sent pas bon cette lib :)

Une fois votre librairie trouvée,  cliquez sur "Installer" et Studio vous demande dans quel projet de la solution en cours vous souhaitez ajouter ces nouvelles références...


Il vous demande d'accepter les conditions générales d'utilisation de cette librairie.


Vous avez accepté, il télécharge les divers éléments de la librairie et les dépose dans un dossier physique "packages" à la racine de votre projet.




Dans Visual Studio, voilà ce que vous aviez avant et ce que vous avez après...


Franchement, c'est simple, rapide, clair, propre, pourquoi s'en priver ?
Read More


SNOOP est un petit utilitaire génial pour tous les développeurs WPF qui permet de débugger l'arbre visuel XAML directement lors de l'exécution de votre application !

C'est grosso modo l'équivalent du F12 de Internet Explorer (Outils de développement qui permet d'inspecter l'état du DOM, des CSS, du javascript...) mais porté dans le monde WPF...

Très pratique pour éviter les fuites de mémoire (Memory Leaks) par exemple lorsqu'on injecte sans s'en rendre compte une grappe de nœuds XAML plusieurs fois dans le même container en pensant remplaçer la grappe précédente alors qu'en faite vous cumulez indéfiniment ces grappes...

Téléchargez gratuitement SNOOP sur codeplex : http://snoopwpf.codeplex.com

Puis suivez les quelques étapes suivantes :

1. Lancer votre exe WPF
2. Lancez SNOOP
3. Cliquez sur l’icône "Refresh" pour que SNOOP détecte l'instance de votre application et sélectionnez là dans la liste déroulante.
4. Maintenant glissez déposez la deuxième icône représentant une cible sur votre application


5. Maintenant survolez la fenêtre de votre application tout en maintenant les touches CTRL+SHIFT de gauche et sélectionnez la zone XAML à inspecter. Les propriétés du nœuds (contrôle StackPanel, Grid, TextBlock...) XAML apparaissent alors dans l'inspecteur de SNOOP...


Vous pouvez inspecter les noeuds XAML mais aussi debugger un Binding qui ne fonctionne pas, bref un très bon outil pouvant même vous aider à debugger de façon légère et non intrusive votre appli en production chez un client !
Read More