Design avec Blend en utilisant MVVM Light

Dans cet article nous verrons comment effectuer le design d’une vue avec Blend en utilisant MVVM Light. Par défaut lorsque l’on crée une nouvelle vue dans une application, on lui assigne aussi son ViewModel qui sera utilisé lors de l’exécution pour fournir les informations aux composants de cette vue. Or, lors de la phase de design, ce ViewModel ne peut pas fournir ces informations, certains composants se retrouvent par conséquent vides, rendant impossible l’utilisation de Blend par exemple. L’objectif de cet article est de voir comment créer un ViewModel spécifique pour le design qui permettra de fournir des données statiques à la vue.

Designer son application

Après avoir composé sa vue, on passe généralement à sa mise en page. Si la vue ne comporte que des composants simples, le designer sera exploitable. Par contre, avec des composants comme les listes, on obtient le résultat suivant (un écran vide) :

En effet, pour effectuer le rendu de la liste, le designer a besoin d’avoir un échantillon de données. C’est ce que l’on va lui fournir en créant un ViewModel spécifique pour le design.

Création du ViewModel pour le design

Prenons comme exemple le ViewModel ci-dessous :

public class MainViewModel : NavigationViewModelBase, IMainViewModel
{
private ObservableCollection<SummaryItems> SummaryItems;
private Visibility firstPanoItemVisibility;
private ObservableCollection<Items> Items;

public ObservableCollection<SummaryItems> SummaryItems
{
get { return SummaryItems; }
set
{
SummaryItems = value;
RaisePropertyChanged(() => SummaryItems);
}
}

public ObservableCollection<Items> Items
{
get { return Items; }
set
{
Items = value;
RaisePropertyChanged(() => Items);
}
}

public Visibility FirstPanoItemVisibility
{
get { return firstPanoItemVisibility; }
set
{
firstPanoItemVisibility = value;
RaisePropertyChanged(() => FirstPanoItemVisibility);
}
}
}

La première chose à faire est d’extraire une interface qui contiendra l’ensemble des propriétés bindées dans le xaml. Dans notre cas voici le résultat :

public interface IMainViewModel
{
ObservableCollection<SummaryItems> SummaryItems { get; set; }
ObservableCollection<Items> Items { get; set; }
Visibility FirstPanoItemVisibility { get; set; }
}

Ensuite il faut créer son ViewModel qui servira au design. L’objectif est d’implémenter l’interface précédemment créée et de remplir dans le constructeur les différentes propriétés avec des données fictives. Voici ce que cela peut donner :

public class DesignMainViewModel : IMainViewModel
{
public DesignMainViewModel()
{
SummaryItems = new ObservableCollection<SummaryItems>();
SummaryItems.Add(new SummaryItems(new Subscription("id","titre","url","icon","url"), null));
Items = new ObservableCollection<Items>();
FirstPanoItemVisibility = Visibility.Visible;
}

public ObservableCollection<SummaryItems> SummaryItems { get; set; }
public ObservableCollection<Items> Items { get; set; }
public Visibility FirstPanoItemVisibility { get; set; }
}

Dernière étape : faire en sorte que le bon ViewModel soit utilisé au bon moment. Pour cela il faut modifier le ViewModelLocator. Dans ce dernier, il est possible de déterminer si l’on se trouve ou non en mode design. En fonction de cela on enregistrera dans le conteneur IoC l’un des deux ViewModels. Voici le résultat :

public ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

if (ViewModelBase.IsInDesignModeStatic)
{
SimpleIoc.Default.Register<IMainViewModel, DesignMainViewModel>();
}
else
{
SimpleIoc.Default.Register<IMainViewModel, MainViewModel>();
}
}

Résultat

Comme on peut le constater dans la capture ci-dessous, la liste affiche maintenant un élément. On peut ainsi définir à l’aide par exemple de Blend les différentes caractéristiques de cet élément :

Cette technique vous permettra de gagner du temps car l’ajustement des marges, couleurs et autres paramètres se fait bien plus rapidement en utilisant Blend par exemple qu’en modifiant manuellement le xaml.