ReactiveUI for WPF

Windows Presentation Foundation (WPF) is Microsoft's rich desktop application framework for Windows. ReactiveUI provides comprehensive support for WPF with reactive MVVM patterns that make desktop development more productive and maintainable.

Why ReactiveUI with WPF?

• Reactive Data Binding: Powerful binding with WhenAnyValue
• Dispatcher Integration: Automatic thread marshaling
• Command Support: ReactiveCommand with async/await
• View Activation: Lifecycle management for subscriptions
• Design-Time Support: ViewModel design data support
• Testable: Full unit testing without UI dependencies

Quick Links

Getting Started

• Installation Guide
• Compelling Example
• Guidelines

Features

• Data Binding
• Commands
• View Models
• ObservableEvents

Samples

• WPF Samples Repository
• GitHub for Visual Studio (Production App)

Platform-Specific Features

ReactiveWindow

public partial class MainWindow : ReactiveWindow<MainViewModel>
{
    public MainWindow()
    {
        InitializeComponent();
        ViewModel = new MainViewModel();
        
        this.WhenActivated(disposables =>
        {
            this.Bind(ViewModel, vm => vm.Name, v => v.NameTextBox.Text)
                .DisposeWith(disposables);
            
            this.BindCommand(ViewModel, vm => vm.SaveCommand, v => v.SaveButton)
                .DisposeWith(disposables);
            
            this.OneWayBind(ViewModel, vm => vm.IsLoading, v => v.LoadingIndicator.Visibility)
                .DisposeWith(disposables);
        });
    }
}

Dispatcher Scheduler

ReactiveUI automatically uses the Dispatcher:

// Automatically marshals to UI thread
Observable.Timer(TimeSpan.FromSeconds(1))
    .ObserveOn(RxSchedulers.MainThreadScheduler)
    .Subscribe(_ => UpdateUI());

Dependency Properties

Bind to WPF dependency properties:

this.WhenActivated(disposables =>
{
    this.Bind(ViewModel, vm => vm.Value, v => v.Slider.Value)
        .DisposeWith(disposables);
    
    this.OneWayBind(ViewModel, vm => vm.Text, v => v.TextBlock.Text)
        .DisposeWith(disposables);
});

Common Patterns

ReactiveUserControl

public partial class SearchControl : ReactiveUserControl<SearchViewModel>
{
    public SearchControl()
    {
        InitializeComponent();
        
        this.WhenActivated(disposables =>
        {
            this.Bind(ViewModel, vm => vm.SearchText, v => v.SearchBox.Text)
                .DisposeWith(disposables);
            
            this.BindCommand(ViewModel, vm => vm.SearchCommand, v => v.SearchButton)
                .DisposeWith(disposables);
        });
    }
}

ObservableEvents

Convert WPF events to observables:

using ReactiveMarbles.ObservableEvents;

this.WhenActivated(disposables =>
{
    // Mouse events
    this.Events().MouseMove
        .Throttle(TimeSpan.FromMilliseconds(100))
        .Subscribe(e => UpdateMousePosition(e.GetPosition(this)))
        .DisposeWith(disposables);
    
    // Window events
    this.Events().Closing
        .Subscribe(e => 
        {
            if (HasUnsavedChanges)
            {
                e.Cancel = !ConfirmClose();
            }
        })
        .DisposeWith(disposables);
});

Validation

public partial class EditViewModel : ReactiveValidationObject
{
    [Reactive]
    private string _email = string.Empty;
    
    [Reactive]
    private string _password = string.Empty;
    
    public EditViewModel()
    {
        this.ValidationRule(
            vm => vm.Email,
            email => email?.Contains("@") == true,
            "Please enter a valid email");
        
        this.ValidationRule(
            vm => vm.Password,
            password => password?.Length >= 6,
            "Password must be at least 6 characters");
        
        SaveCommand = ReactiveCommand.CreateFromTask(
            SaveAsync,
            this.IsValid());
    }
    
    [ReactiveCommand]
    private async Task Save() => await SaveAsync();
}

MVVM Patterns

View-ViewModel Connection

XAML:

<Window x:Class="MyApp.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MyApp.ViewModels"
        Title="My App" Height="450" Width="800">
    
    <Grid>
        <TextBox x:Name="NameTextBox" />
        <Button x:Name="SaveButton" Content="Save" />
    </Grid>
</Window>

Code-Behind:

public partial class MainWindow : ReactiveWindow<MainViewModel>
{
    public MainWindow()
    {
        InitializeComponent();
        ViewModel = new MainViewModel();
    }
}

Design-Time Data

public class DesignTimeMainViewModel : MainViewModel
{
    public DesignTimeMainViewModel()
    {
        Name = "Design Time Name";
        Items = new ObservableCollection<string> { "Item 1", "Item 2" };
    }
}

In XAML:

<Window xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="clr-namespace:MyApp.ViewModels"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance Type=vm:DesignTimeMainViewModel, IsDesignTimeCreatable=True}">

Advanced Features

Custom Controls

public class ReactiveButton : Button, IViewFor<ButtonViewModel>
{
    public static readonly DependencyProperty ViewModelProperty =
        DependencyProperty.Register(
            nameof(ViewModel),
            typeof(ButtonViewModel),
            typeof(ReactiveButton),
            new PropertyMetadata(null));
    
    public ButtonViewModel ViewModel
    {
        get => (ButtonViewModel)GetValue(ViewModelProperty);
        set => SetValue(ViewModelProperty, value);
    }
    
    object IViewFor.ViewModel
    {
        get => ViewModel;
        set => ViewModel = value as ButtonViewModel;
    }
}

Attached Behaviors

public static class TextBoxBehavior
{
    public static readonly DependencyProperty SelectAllOnFocusProperty =
        DependencyProperty.RegisterAttached(
            "SelectAllOnFocus",
            typeof(bool),
            typeof(TextBoxBehavior),
            new PropertyMetadata(false, OnSelectAllOnFocusChanged));
    
    public static bool GetSelectAllOnFocus(DependencyObject obj) =>
        (bool)obj.GetValue(SelectAllOnFocusProperty);
    
    public static void SetSelectAllOnFocus(DependencyObject obj, bool value) =>
        obj.SetValue(SelectAllOnFocusProperty, value);
    
    private static void OnSelectAllOnFocusChanged(
        DependencyObject d, 
        DependencyPropertyChangedEventArgs e)
    {
        if (d is TextBox textBox && (bool)e.NewValue)
        {
            textBox.Events().GotFocus
                .Subscribe(_ => textBox.SelectAll());
        }
    }
}

Collections with DynamicData

public partial class ItemListViewModel : ReactiveObject
{
    private readonly SourceCache<Item, int> _itemsCache;
    private readonly ReadOnlyObservableCollection<ItemViewModel> _items;
    
    public ReadOnlyObservableCollection<ItemViewModel> Items => _items;
    
    public ItemListViewModel()
    {
        _itemsCache = new SourceCache<Item, int>(x => x.Id);
        
        _itemsCache.Connect()
            .Transform(item => new ItemViewModel(item))
            .Filter(vm => vm.IsVisible)
            .Sort(SortExpressionComparer<ItemViewModel>.Ascending(x => x.Name))
            .ObserveOn(RxSchedulers.MainThreadScheduler)
            .Bind(out _items)
            .Subscribe();
    }
}

Performance Tips

1. Use Virtualization: For large lists, use VirtualizingStackPanel
2. Freeze Resources: Freeze brushes and other freezable resources
3. Throttle Events: Use Throttle for high-frequency events
4. Async Commands: Keep UI responsive with async operations
5. Proper Disposal: Always use WhenActivated

Testing

[WpfFact]
public async Task MainWindow_LoadsData()
{
    // Arrange
    var window = new MainWindow();
    window.ViewModel = new MainViewModel();
    
    // Act
    await window.ViewModel.LoadCommand.Execute();
    
    // Assert
    window.ViewModel.Data.Should().NotBeNull();
}

Styling

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="10,5" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{StaticResource PrimaryDarkBrush}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Best Practices

1. Use ReactiveWindow/ReactiveUserControl: For proper lifetime management
2. WhenActivated: Always wrap subscriptions
3. ObserveOn MainThread: Before updating UI
4. DisposeWith: Automatic cleanup
5. Design-Time Data: Better design experience

Common Issues

Issue: UI Not Updating

Solution: Ensure ObserveOn(RxSchedulers.MainThreadScheduler)

backgroundOperation
    .ObserveOn(RxSchedulers.MainThreadScheduler)
    .Subscribe(result => UpdateUI(result));

Issue: Memory Leaks

Solution: Always use WhenActivated

this.WhenActivated(disposables =>
{
    // All subscriptions here are automatically disposed
});

Community Resources

• WPF Samples
• GitHub for Visual Studio (Real App)
• ReactiveUI Slack

Related Topics

• Installation
• Data Binding
• ObservableEvents
• Commands