ViewModel: Commands

Commands are an alternative to using Click events on most controls. In the following examples we will create a simple command which will open a URL from an input. It's recommended to read the wiki page about setting up a viewmodel, as we need the viewmodel system for this. You find the article by clicking here.

Creating a new command

First of all we will need our command. For this we will extend the "BaseCommand" class from the "Tasty.ViewModel.Commands" namespace:

public class OpenUrlCommand : CommandBase
{
}

Now we need to override the "CanExecute(...)" and "Execute(...)" methods.

"CanExecute(...)" gets called by WPF every time the UI updates, the parameter is the same as in "Execute(...)" and can be used to enable or disable the control bound to this command, based on the parameter.

"Execute(...)" is called once the user clicks on the control. Please note that commands are executed after the Click event on controls!

public class OpenUrlCommand : CommandBase
{
    public override bool CanExecute(object parameter)
    {
        return base.CanExecute(parameter);
    }

    public override void Execute(object parameter)
    {
        base.Execute(parameter);
    }
}

The last step now is to change our overridden methods. As mentioned above, we want to open an URL with this command, so we'll do something like this:

public class OpenUrlCommand : CommandBase
{
    public override bool CanExecute(object parameter)
    {
        // Here we combine checking the parameter type and parsing the parameter to a string
        if (parameter is string url)
        {
            // If we received a string we'll check if the string isn't empty, null or just exists out of white spaces
            return !string.IsNullOrWhiteSpace(url);
        }

        // If we didn't receive a string return false, disabling the control
        return false;
    }

    public override void Execute(object parameter)
    {
        // Checking and parsing parameter to string
        if (parameter is string url)
        {
            // With Process.Start(...) we can not only start new programs, but also open an URL in the standard webbrowser
            System.Diagnostics.Process.Start(url);
        }
    }
}

Binding your command to the view

ViewModel

Now that we've set up our command, we can finally start binding it to the view. First of all we will need a viewmodel, in this example we'll create a simple viewmodel with one bindable property "Url" (string) and our command.

public class ExampleViewModel : ViewModelBase
{
    private string mUrl;
    // This is where we initialize our command. You can also move the initialization into the constructor
    private OpenUrlCommand mOpenUrlCommand = new OpenUrlCommand();

    public string Url
    {
        get => mUrl;
        set
        {
            mUrl = value;
            InvokePropertyChanged();
        }
    }

    // This is the property we will bind the control command to
    // In this case we just need a getter as we don't change the variable
    public OpenUrlCommand OpenUrlCommand => mOpenUrlCommand;
}

View binding

We're almost done! The only thing left to do is bind our command to a control, and for this we'll use a simple WPF application with an input and a button. (This example has been pulled from the Tasty.Samples example application)

<UserControl x:Class="Tasty.Samples.Controls.ViewModelExample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             <!-- Replace "Tasty.Samples.ViewModel" with the namespace where your viewmodel is -->
             xmlns:vm="clr-namespace:Tasty.Samples.ViewModel"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.DataContext>
        <!-- Replace "ExampleViewModel" with the name of your viewmodel -->
        <vm:ExampleViewModel/>
    </UserControl.DataContext>
    <DockPanel VerticalAlignment="Center">
        <TextBlock Text="URL: "/>
        <!-- The "Command" binding is our command, and in "CommandParameter" we bind to the property we wish to hand over to the command -->
        <!-- Please note that we use "UpdateSourceTrigger=PropertyChanged". This forces bindings to update as soon as the property changes. -->
        <!-- The default value for "UpdateSourceTrigger" is "LostFocus", which means binding updates only happen when the bound control looses focus (e.g. the user clicks away) -->
        <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding Url, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" Content="Open URL"/>
        <TextBox Text="{Binding Url, UpdateSourceTrigger=PropertyChanged}"/>
    </DockPanel>
</UserControl>

With all this set up our application is ready to go!

---

Next up: Mediators