Converters and Commands

Analogy categoryAnalogies

Value Converters: Transforming Data for Display

An IValueConverter implements a Convert method (source-to-target, for display) and a ConvertBack method (target-to-source, for TwoWay bindings), letting a binding transform a raw value before it reaches the UI. A typical example is a BoolToColorConverter that turns an IsOverdue boolean into a Color, referenced in XAML as {Binding IsOverdue, Converter={StaticResource BoolToColorConverter}}.

🏏

Cricket analogy: A value converter is like a scorer translating raw ball data into 'SIX' on the board — the underlying integer 6 is converted into the right visual representation, just as IsOverdue:true converts into a red color.

Commanding: Binding Button Taps to ViewModel Logic

ICommand, implemented via MAUI's Command/Command<T> or CommunityToolkit.Mvvm's [RelayCommand], lets a Button.Command bind directly to a ViewModel method instead of wiring up a Clicked event handler in code-behind. The Command's CanExecute predicate can also disable the Button automatically — for example, disabling a Save button while a form is invalid or a save operation is already in flight.

🏏

Cricket analogy: A Command bound to a button tap is like a captain's hand signal that triggers a specific fielding change — the ViewModel's logic runs the moment the gesture occurs, without code-behind wiring the event manually.

Passing Parameters with CommandParameter

When a command needs to know which item triggered it — say, deleting a specific row in a CollectionView — CommandParameter binds a value (often the item itself via {Binding .}) that MAUI passes as the argument to the command's Execute method, so a single DeleteCommand defined once on the ViewModel can act on whichever item's delete button was actually tapped.

🏏

Cricket analogy: CommandParameter is like a coach passing a specific player's name to a substitution command, so the ViewModel knows exactly who to swap rather than acting on a generic 'substitute' instruction.

csharp

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        => (bool)value ? Colors.Red : Colors.Green;

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException("OneWay-only converter: no ConvertBack needed.");
}

// ViewModel command with parameter
[RelayCommand]
private async Task DeleteItem(TaskItem item)
{
    Items.Remove(item);
    await _repository.DeleteAsync(item.Id);
}

xml

<Label Text="OVERDUE"
       TextColor="{Binding IsOverdue, Converter={StaticResource BoolToColorConverter}}" />

<Button Text="Delete"
        Command="{Binding DeleteItemCommand}"
        CommandParameter="{Binding .}" />

Register converters once as page or app-level resources (<ContentPage.Resources>) rather than instantiating a new one per binding. Use ConverterParameter to make a single converter reusable across slightly different display needs, such as choosing between two color pairs.

A converter used only in a OneWay binding can safely throw NotImplementedException from ConvertBack, but if the same converter is accidentally applied to a TwoWay binding — for instance on an Entry — that exception will surface at runtime the moment the user edits the value.

IValueConverter's Convert method transforms a source value for display; ConvertBack reverses it for TwoWay bindings.
Converters are referenced in XAML via Converter={StaticResource Name} and are typically registered as page or app resources.
ICommand (via Command, Command<T>, or [RelayCommand]) binds a Button's Command property to ViewModel logic.
A command's CanExecute predicate can automatically enable/disable the bound control.
CommandParameter passes contextual data, often the bound item itself, into the command's Execute method.
ConverterParameter allows a single converter class to be reused with slightly different behavior per binding.
A converter used only OneWay can throw from ConvertBack, but this becomes a runtime bug if misapplied to TwoWay.