Ce que je vais vous présenter à travers cet article n’est pas apparu avec la bêta 2 de Visual Studio 2010 mais a été introduit dans Blend 3. Pour les fans du MVVM, vous me comprendrez si je vous dis que ça serait sympa d’avoir un rendu du designer avec un ViewModel non vide ou de pouvoir utiliser le Binding Builder en cas d’injection du DataContext par le code ? Réjouissez-vous cela est possible. En effet, il est possible de signaler au designer que nous souhaitons utiliser une certaine instance pour notre DataContext quand nous l’utilisons, ces propriétés seront ignorées au moment de la compilation.

Pour commencer, vous pouvez trouver des templates de projet dans la galerie de Visual Studio supportant WPF et Silverlight, tous les exemples de cet article proviennent de ces projets.

Le namespace « Design Time »

Pour avoir accès aux propriétés « Design Time », il est nécessaire de déclarer le namespace se trouvant dans le schéma http://schemas.microsoft.com/expression/blend/2008, voici comment le fais Visual Studio 2010 par défaut :

xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
xmlns:d=http://schemas.microsoft.com/expression/blend/2008 mc:Ignorable="d"

Par défaut, ces namespaces ne sont pas déclarés, soit vous les déclarez à la main, soit vous jouez avec le nouveau bouton apparu sous VS 2010, en bas à droite de la fenêtre dans le designer :

Il permet de passer le mode de dimensionnement de la fenêtre d’automatique à une taille fixe et inversement. Pour le mode auto, le designer rajoute des propriétés « Design Time »: d:DesignHeight="300" d:DesignWidth="400", il rajoute au passage notre fameux namespace.

Les propriétés d:DesignHeight et d:DesignWidth

Ces deux propriétés n’ont pas l’air comme ça, mais elles sont primordiales pour utiliser le designer dans un contexte de fenêtre au dimensionnement automatique.
En effet, elles permettent de définir la taille qui est utilisée par le designer. Imaginez sans ces propriétés, comment le designer dessinerait la fenêtre si sa taille est automatique et non fixée.

La propriété d:DataContext

OMG ! Cette propriété est magique, elle vous permet de définir un DataContext qui sera utilisé seulement par le designer.

La markup extension d:DesignInstance

<Grid d:DataContext="{d:DesignInstance local:Person, CreateList=True, IsDesignTimeCreatable=True}">

La markup extension d:DesignInstance permet de définir un type d’instance pour le DataContext du designer. Elle possède trois propriétés :

• Type : Le type de l’instance cible de notre DesignInstance.
• CreateList :
  True si l’instance à associer au DataContext est une liste du type Type.
• IsDesignTimeCreatable :
  True pour que le designer instancie réellement la classe sinon il se base sur la réflexion pour le Binding Builder. Donc à mettre à False si vous n’avez pas de constructeur par défaut.

Une fois ceci fait, le Binding Builder marche parfaitement :

La markup extension d:DesignData

Celle-ci permet d’aller un peu plus loin, elle permet de définir un DataContext sous forme XAML. Exemple :

PersonSampleData.xaml
<local:Person xmlns:local="clr-namespace:DesignTimeDemo"
Age="20" Email="vive@dot.net" FirstName="Vincent" LastName="BOUZON" />

Le fichier doit avoir ses propriétés sous Visual Studio 2010 :


Puis on l’utilise de cette manière :
<Grid d:DataContext="{d:DesignData Source=../SampleData/PeopleCollectionSampleData.xaml }" Grid.Row="1" Margin="7">


Voici le résultat de notre fenêtre dans le designer avec le DataContext construit à l’aide du fichier source :

DesignerProperties

Pour finir, cette classe permet de savoir au niveau du code si nous sommes dans le designer ou non, vous pouvez la trouver dans le namespace System.ComponentModel.
Vous pouvez donc modifier votre constructeur en fonction de si la classe est construite par le designer ou nom. Pan exemple, vous pouvez créer un constructeur par défaut pour votre ViewModel qui sera utilisable seulement par le designer.

Un exemple très barbare à ne pas faire, mais à méditer :

public MyListViewModel()
{
if (DesignerProperties.IsInDesignTool == false)
throw new Exception();
}



Conclusion

Le « Design Time » introduit avec Blend 3 et maintenant supporté par Visual Studio 2010 est vraiment puissant, il ne faut pas hésiter à l’utiliser. Pour ceux qui n’ont pas encore franchis le pas d’installer la bêta 2 de Visual Studio 2010, je vous invite à le faire. Que du bonheur de l’utiliser, bien loin de la bêta 1 qui n’était vraiment pas fluide ! Vous pouvez le trouver ici : http://msdn.microsoft.com/en-us/vstudio/default.aspx. En passant, aimez-vous le nouveau design de la plate-forme MSDN ? Moi j’adore !

Il y a une semaine, je me suis rendu au MSP Days pendant 2 jours dans les locaux de Microsoft à Paris, pour faire court, j’ai rencontré que du bon monde, des employées Microsoft super sympa qui nous ont mis tout de suite à l’aise, des locaux magnifiques et surtout des étudiants passionnés comme moi. Voici une petite liste des blogs de MSP que j’ai pu rencontrer et ceux dont je connais leurs blogs (si j’en oublie, un petit mail pour me le dire) :

• http://blogs.dotnet-france.com/julienc/
• http://blogs.dotnet-france.com/matthieud/
• http://blogs.dotnet-france.com/bertrandv/
• http://blog.christophermaneu.fr/
• http://www.ocourtois.fr/
• http://danstoncloud.com/blogs/william/
• http://www.pierretrehorel.fr/

Sinon saviez-vous que Word 2007 pouvait publier directement dans Wordpress ? Beaucoup mieux que le WYSIWYG de base. Pour finir, vous avez pu remarquer que je suis beaucoup moins actif sur mon blog, la raison est que cette année je deviens STA (SUPINFO Teaching Assistant) à SUPINFO, je me prépare donc à donner des cours la matière.NET. Ne vous en faites pas, à côté je me forme encore plus chaque jour, j’ai plein d’idées d’articles.

Pour les Lyonnais, n’oubliez pas le 2 novembre 2009, Microsoft est à Lyon pour les Microsoft Days !