Photo par pxhere.com

Comment ajouter une command à un Switch en Xamarin.Forms

Le modèle MVVM est recommandé lorsque vous développez vos projets Xamarin, mais certains composants graphiques tels que le Switch ne correspondent pas exactement à ce modèle.

Posted by Damien Aicheh on May 17, 2019 · 4 mins

Pourquoi utiliser une Command ?

Le pattern MVVM est recommandé quand vous développez vos projets Xamarin pour avoir un maximum de code réutilisable entre les différentes plateformes. Le problème avec certains composants graphiques de Xamarin.Forms es qu’ils n’ont pas tous la possibilité d’utiliser une Command pour communiquer avec le ViewModel qui lui est associé. Aujourd’hui, je vais vous montrer un exemple avec le composant Switch et comment ajouter la possibilité d’utiliser une Command  au lieu de l’évènement par défaut pour avoir plus de code réutilisable.

Mettons-le en œuvre !

L’idée derrière l’ajout de la possibilité d’utiliser une Command pour votre composant est d’utiliser un Behavior.

Tout d’abord, créons une nouvelle classe appelée SwitchBehavior :

public class SwitchBehavior : Behavior<Switch>{ }

La classe va implémenter un nouveau comportement pour notre Switch.

Maintenant ajoutons une nouvelle BindableProperty pour définir notre Command :

public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(SwitchBehavior), null);

public ICommand Command
{
    get { return (ICommand)GetValue(CommandProperty); }
    set { SetValue(CommandProperty, value); }
}

Le but de l’état suivante est de déclencher cette Command quand le statut du Switch change. Pour cela vous devez souscrire à l’évènement Toggled du Switch ensuite, nous devons créer une propriété appelée Bindable, qui représentera le Switch qui utilise actuellement ce comportement :

public Switch Bindable { get; private set; }

Pour vous abonner à l’événement Toggled de l’objet Bindable, nous devons redéfinir deux méthodes :

OnAttachedTo où nous nous abonnerons aux événements modifiés Toggled et BindingContextChanged.

protected override void OnAttachedTo(Switch bindable)
{
    base.OnAttachedTo(bindable);
    Bindable = bindable;
    Bindable.BindingContextChanged += OnBindingContextChanged;
    Bindable.Toggled += OnSwitchToggled;
}

Et pour éviter de créer une fuite mémoire, nous devons nous désabonner et détruire l’objet Bindable à l’intérieur de la méthode OnDetachingFrom :

protected override void OnDetachingFrom(Switch bindable)
{
    base.OnDetachingFrom(bindable);
    Bindable.BindingContextChanged -= OnBindingContextChanged;
    Bindable.Toggled -= OnSwitchToggled;
    Bindable = null;
}

Implémentons la méthode OnBindingContextChanged:

private void OnBindingContextChanged(object sender, EventArgs e)
{
    OnBindingContextChanged();
    BindingContext = Bindable.BindingContext;
}

Dernière étape, nous pouvons relier la Command à l’évenement ToggledEventArgs dans le OnSwitchToggled:

private void OnSwitchToggled(object sender, ToggledEventArgs e)
{
    Command?.Execute(e.Value);
}

Vous trouverez un exemple de code sur ce répertoire Github.

Happy codding !

Vous avez aimé ce tutoriel ? Laissez une étoile sur le répertoire Github associé !

N'hésitez pas à me suivre sur pour ne pas rater mon prochain tutoriel !