Data Binding

One-way and two-way binding, value converters, and animated color properties.

Try in Playground

Overview

TerminalNinja supports the WPF binding model with {Binding Path} expressions, INotifyPropertyChanged, and IValueConverter. Binding modes include OneWay, TwoWay, and OneTime. 

<!-- One-way binding -->
<TextBlock Text="{Binding HeaderText}" />

<!-- Two-way binding with ListBox -->
<ListBox ItemsSource="{Binding Items}"
         SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />

<!-- Animated color binding -->
<TextBlock Background="{Binding BackgroundColor}" />

<!-- Command binding -->
<Button Text="Update" Command="{Binding UpdateCommand}" />

ViewModel (C#)

Properties use ViewModelBase.SetProperty for change notification. The animated color uses a 16ms timer with the OKLCH color space.

public class DataBindingViewModel : ViewModelBase, IDisposable
{
    public string HeaderText { get; set => SetProperty(ref field, value); } = "Data Binding Demo";

    public Color BackgroundColor
    {
        get;
        set
        {
            if (value.Equals(field)) return;
            field = value;
            OnPropertyChanged();
        }
    } = Color.FromOklch(Oklch.FromColor(Color.Green) with { H = 120 });

    public string? SelectedItem
    {
        get;
        set
        {
            if (SetProperty(ref field, value))
                SelectionText = value != null ? $"Selected: {value}" : "No selection";
        }
    }

    private readonly Timer _colorTimer;

    public DataBindingViewModel()
    {
        _colorTimer = new Timer(_ =>
        {
            BackgroundColor = Color.FromOklch(
                Oklch.FromColor(Color.Green) with { H = DateTime.Now.Millisecond / 10d % 360 });
        }, null, TimeSpan.Zero, TimeSpan.FromMilliseconds(16));
    }

    public void Dispose() => _colorTimer.Dispose();
}

Key Concepts