UWP Development, Command Binding

Command binding in UWP (Universal Windows Platform) development is an important concept that connects the user interface (UI) with the application’s business logic. Commands define actions associated with UI elements (such as buttons and menus), facilitating easy interaction between code and the UI through data binding. This article will provide a detailed explanation of the concept of command binding, how to use it, example code, and how to effectively develop UWP applications using commands.

1. What is a Command?

A command is a class that defines actions the user can perform in the UI. In UWP, classes that implement the ICommand interface are used as commands. Commands provide two basic functionalities:

  • Execute: Handles the conditions under which the command can be executed.
  • CanExecute: Determines whether the command can currently be executed.

For example, the action of saving a file can be defined as a command when the ‘Save’ button is clicked. Once the command is defined, it can be bound to UI elements to execute the command.

2. ICommand Interface

The ICommand interface includes two events and two methods:

  • Execute(object parameter) – Called when the command is executed.
  • CanExecute(object parameter) – Determines whether the command can be executed.
  • CanExecuteChanged – An event that occurs when the command’s status changes.

You can create custom commands by implementing this interface. Below is a simple example of implementing the ICommand interface:

using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Predicate _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action execute, Predicate canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}


3. Principles of Command Binding


Using command binding in UWP allows for updating the application’s state based on user input by linking commands associated with UI elements. For instance, you can bind a command to a button’s Command property to perform a specific action when the button is clicked.


4. Binding Commands in XAML


In XAML, the Command property can be used to bind UI elements to commands. It is used in the following structure:


<Button Content="Save" Command="{Binding SaveCommand}" />



In the code above, SaveCommand is a command defined in the ViewModel. The ViewModel is connected to the UI through data binding. Typically, the MVVM (Model-View-ViewModel) pattern is used to define the ViewModel.


5. Understanding the MVVM Pattern


The MVVM pattern is a fundamental architecture that defines the structure of UWP applications. MVVM consists of three components:


    

  • Model: Defines data and business logic.
    • 

  • View: Interacts with the user through UI elements.
    • 

  • ViewModel: Mediates interaction between the View and Model, providing data binding.
    • 



By using the MVVM pattern, you can separate UI code from business logic, making maintenance easier and testing more straightforward.


6. Example: Creating a Simple Notepad App


Below, we implement a simple notepad app to explain command binding. This app provides functionality to add and delete notes.


6.1 Defining the Model


public class Note
{
    public string Content { get; set; }
}



6.2 Defining the ViewModel


using System.Collections.ObjectModel;

public class NotesViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Note> Notes { get; set; } = new ObservableCollection<Note>();
    
    public ICommand AddNoteCommand { get; }

    public NotesViewModel()
    {
        AddNoteCommand = new RelayCommand(AddNoteExecute);
    }

    private void AddNoteExecute(object content)
    {
        Notes.Add(new Note { Content = content as string });
    }

    // Implementation related to INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}



6.3 Defining the XAML UI


<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    DataContext="{StaticResource NotesViewModel}">

    <StackPanel>
        <TextBox x:Name="NoteInput" Width="300" />
        <Button Content="Add Note" Command="{Binding AddNoteCommand}" CommandParameter="{Binding Text, ElementName=NoteInput}" />
        <ListBox ItemsSource="{Binding Notes}" DisplayMemberPath="Content" />
    </StackPanel>
</Page>



6.4 Overall Code Structure


When you combine all of the above code blocks into one, it looks like this:


using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;

public class Note
{
    public string Content { get; set; }
}

public class NotesViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Note> Notes { get; set; } = new ObservableCollection<Note>();
    
    public ICommand AddNoteCommand { get; }

    public NotesViewModel()
    {
        AddNoteCommand = new RelayCommand(AddNoteExecute);
    }

    private void AddNoteExecute(object content)
    {
        Notes.Add(new Note { Content = content as string });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Predicate _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action execute, Predicate canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}


7. Conclusion


Command binding is an essential technique in UWP development, enabling smooth interaction between the UI and business logic. By using the MVVM pattern, the application structure can be kept clean, and user experience can be enhanced through the utilization of commands and data binding. Based on the content explained in this article, I hope you add various commands to your UWP applications for a better development experience.


References