Blog Arolla

WPF : Tester ses affichages avec le designer de Visual Studio (2013)

Vous développez des interfaces graphiques complexes, mais pour tester l’affichage, il faut absolument démarrer l’application, et ça, ça peut prendre du temps pour accéder à l’interface voulue ? Pas de problème, Visual Studio permet d’afficher des valeurs par défaut dans le designer !
Je vais partir d’un exemple simple : un ViewModel composé d’une liste de Models composés eux même de 2 champs.

On remerciera le générateur de classes de Visual studio de clarifier la situation

Je vais représenter ça dans ma fenêtre principale sous la forme d’une ListView.
Pour cela, j’ouvre mon application avec legacy important préférée :

Spoiler : c’est une démo

Étape 1 : Faire le lien entre notre ViewModel et notre Vue. Pour cela, on définit dans le XAML le namespace du ViewModel, puis on l’inscrit en tant que DataContext.
<Window x:Class="demoWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controller="clr-namespace:demoWPF"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<Controller:DemoViewModel/>
</Window.DataContext>

Effet sympa, avec le lien créé en étape 1, on débloque l’auto-complétion qui se fait sur les propriétés du DataContext dans le XAML :

Productivité : over 9000

Effet sympas numéro 2 : ça marche aussi pour les UserControls 🙂

Étape 2: On remplit les informations par défaut du ViewModel. Autre astuce, si vous ne voulez pas que ces informations polluent votre code, ajoutez le test de détection si vous êtes dans le designer comme suit :
public DemoViewModel()
{
if(DesignerProperties.GetIsInDesignMode(new DependencyObject()))
{
models = new List<DemoModel>() { new DemoModel(),new DemoModel()};
}
}

Étape3 : On remplit les informations de base du Model.
public DemoModel()
{
StrField1 = "field1";
StrField2 = "field2";
}

Étape 4 : On affiche dans une ListView.
<ListView ItemsSource="{Binding models}" Grid.ColumnSpan="2">
<ListView.View>
<GridView>
<GridViewColumn Header="Header1" DisplayMemberBinding="{Binding StrField1}"/>
<GridViewColumn Header="Header2" DisplayMemberBinding="{Binding StrField2}"/>
</GridView>
</ListView.View>
</ListView>

Étape 5 : On observe le résultat.

Santé, sobriété

Cet exemple était très basique, mais il permet de visualiser rapidement l’aspect de l’affichage.
Étape 6 : aller plus loin. Il ne faut pas s’arrêter là, cette technique permet de tester l’affichage basique de composants complexes. Il est possible aussi de tester ainsi de façon presque unitaire les différents cas d’affichage. Et qui a dit qu’on ne pouvait pas utiliser de mock plutôt que ton vrai ViewModel, et ainsi éviter de mélanger le code de l’objet qui part en PROD avec le code d’affichage ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *