How to add command to a Switch in Xamarin.Forms

Why using a Command?

The MVVM pattern is recommended when you develop your Xamarin projects to have a maximum of code reuse between the different platforms. The problem with some graphical components of Xamarin.Forms is that they do not all have the ability to use a Command to communicate with the ViewModel associated with it. Today I’m going to show you an example with the Switch component and how to add the ability to use a Command instead of the default event to get more reusable code.

Let’s implement it!

The idea behind adding the ability to use a Command for your component is to use Behavior. 

So first of all, let’s create a new class called SwitchBehavior:

public class SwitchBehavior : Behavior<Switch>{ }

This class will implement a new behavior to our Switch component.

Now let’s add a new BindableProperty to define our 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); }
}

The goal of the next step is to fire this Command when the Switch’s status changed. To do that we need to subscribe to the Toggled event of the Switch then, we need to create a new property called Bindable, this will represent the Switch that is currently using this behavior:

public Switch Bindable { get; private set; }

To subscribe to the Toggled event of the Bindable object we need to override two methods:

OnAttachedTo where we will subscribe to Toggled and BindingContextChanged changed events.

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

And to avoid creating memory we need to unsubscribe and destroy Bindable object the inside the OnDetachingFrom method: 

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

Let’s implement the OnBindingContextChanged method: 

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

Final step we can link the Command with the ToggledEventArgs in the OnSwitchToggled:

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

You will find full source code in this Github repository.

Happy coding !

You liked this tutorial ? Leave a star in the associated Github repository!

Do not hesitate to follow me on Twitter to not miss my next tutorial!