Exécuter une commande depuis n’importe quel évènement
Pour faire suite à un précédent billet, je vais décrire comment exécuter une commande depuis n’importe quel évènement émis par un contrôle graphique. J’utilise pour cela : le pattern MVVM et le SDK Expression Blend (disponible gratuitement ici). Le SDK propose des extensions sous forme de behaviors (triggers et actions) qui permettent de décoreller encore d’avantage la vue du viewmodel. En l’occurrence, l’utilisation d’InvokeCommandAction laisse au designer la possibilité d’utiliser les contrôles de son choix pour exécuter une commande, et ce sans intervention d’un développeur.
La solution exemple fournie fonctionne avec WPF4 ou Silverlight 4.
Le principe est le suivant :
- Dans mon viewmodel, initialiser et exposer une propriété de type ICommand
public DelegateCommand<string> MyCommand { get; set; }
public ViewModel()
{
this.MyCommand = new DelegateCommand<string>(MyCommand_Execute);
}
void MyCommand_Execute(string text)
{
…
}
- S’assurer que le projet référence bien les assemblies suivantes (SDK Blend) :
- System.Windows.Interactivity
- Microsoft.Expression.Interactions
- Sur le contrôle utilisé pour déclencher la commande, associer un EventTrigger à l’évènement souhaité, et une InvokeCommandAction bindée à la commande exposée précédemment. Dans le projet exemple fourni, j’associe l’exécution de la commande à l’évènement ValueChanged d’un Slider.
…xmlns:i=https://schemas.microsoft.com/expression/2010/interactivity…
<Slider
<i:Interaction.Triggers>
<i:EventTrigger EventName="ValueChanged">
<i:InvokeCommandAction
Command="{Binding MyCommand}"
CommandParameter="{Binding Text, ElementName=textBox}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Slider>
Notez que de nombreuses autres triggers et actions sont disponibles dans le SDK Blend et qu’il est possible (et très simple) d’écrire ses propres ses propres extensions.
Depuis Expression Blend
Les heureux utilisateurs de Blend n’auront même pas à utiliser leur clavier ! Voici la procédure à suivre pour effectuer l’association décrite précédemment :
- Ouvrez la vue puis dans la barre d’outils, recherchez InvokeCommandAction (dans la section Behaviors)
- Glissez InvokeCommandAction sur le slider pour que l’action apparaîsse en dessous
- Sélectionnez l’action, et dans l’onglet Propriétés, sélectionnez
- L’évènement déclencheur (EventName=ValueChanged)
- La commande, qui est dans le Data Context, est sélectionnable par l’icône Data bind
- Le paramètre de la commande, que l’on peut également data binder (par le carré). Dans l’exemple, il s’agit de la propriété Text de la TextBox
- Et voilà tout !
- L’évènement déclencheur (EventName=ValueChanged)
