Category Archives: ReactiveUI

ReactiveUI Property Name to Field Mapping Convention Override

In a previous post I described how you can use the ReactiveUI framework to bind properties to both INotifyPropertyChanged and make them Observable to Reactive Extensions (Rx).

The default binding behaviour of the RaiseAndSetIfChanged helper is to assume that a property named “MyProperty” has a backing field called “_MyProperty”. This is not a common convention, and whilst you can explicitly override this behaviour in RaiseAndSetIfChanged, it’s extra work.

Fortunately, the framework offers a way of modifying the default mapping behaviour by binding a different function to RxApp.GetFieldNameForPropertyNameFunc.

Here are a couple of example functions that implement alternative behaviours. The first of which maps to _propertyName and the latter, simply topropertyName.

                /// Maps property name MyProperty to field name _myProperty.
                Func<string, string> UnderscoreFirstToLowerBehaviour = x =>
                {
                        char[] arr = x.ToCharArray();
                        arr[0] = char.ToLower(arr[0]);
                        return '_' + new String(arr);
                };

                /// Maps property name MyProperty to field name myProperty.
                Func<string, string> FirstToLowerBehaviour = x =>
                {
                        char[] arr = x.ToCharArray();
                        arr[0] = char.ToLower(arr[0]);
                        return new String(arr);
                };

To use one of these behaviours, all you need do is call the following once during app startup:

RxApp.GetFieldNameForPropertyNameFunc = underscoreFirstToLowerBehaviour;

Given this is executed on each notification, I guess the second coding style is more optimal!

p.s. I’m not sure these are the fastest implementations of these conversions, and I’m not going to benchmark, however I did base the code on http://www.dotnetperls.com/uppercase-first-letter who did do some benchmarking on similar code.

Using ReactiveUI to Integrate INotifyPropertyChanged & IObservable

ReactiveUI offers some great helper functionality for integrating Reactive Extensions into your WPF user interfaces.

One of these is the ReactiveObject base class, which when derived from, grants your classes access to the ‘RaiseAndSetIfChanged’ helper function.

This conveniently wires up your properties to INotifyPropertyChanged/IObservable, so in one step you have a class that can be bound directly to your xaml AND observed using Rx.

	class Person : ReactiveObject
	{
		string _Name;
		public string Name
		{
			get { return Name; }
			set { this.RaiseAndSetIfChanged(x => x.Name, value); }
		}
	}

By convention ReactiveUI expects the backing field to have the same name as the property, but with an underscore prepended. So if you want a different backing field name, you have to explicitly reference it in RaiseAndSetIfChanged:

	class Person : ReactiveObject
	{
		string _name;
		public string Name
		{
			get { return _name; }
			set { this.RaiseAndSetIfChanged(x => x.Name, x=> x._name, value); }
		}
	}

The obvious question is then, ‘how do we subscribe to changes on these properties?’. The secret is to use the ReactiveObject base class function ObservableForProperty.

In the example below, we are doing something a little more complex that simply watching one property. Instead we are observing two properties containing cash amounts, and automatically updating a total when either changes.

	class Dividend : ReactiveObject
	{
		decimal _AnnouncedAmt;
		public decimal AnnouncedAmt
		{
			get { return _announcedAmt; }
			set { this.RaiseAndSetIfChanged(x => x.AnnouncedAmt, value); }
		}

		decimal _ForecastAmt;
		public decimal ForecastAmt
		{
			get { return _forecastAmt; }
			set { this.RaiseAndSetIfChanged(x => x.ForecastAmt, value); }
		}

		decimal _TotalAmt;
		public decimal TotalAmt
		{
			get { return _totalAmt; }
			set { this.RaiseAndSetIfChanged(x => x.TotalAmt, value); }
		}

		public Dividend()
		{
			Observable
				.Merge(	this.ObservableForProperty(x => x.AnnouncedAmt),
						this.ObservableForProperty(x => x.ForecastAmt))
				.Subscribe(_ =>  TotalAmt = AnnouncedAmt + ForecastAmt);
		}
	}

You’ll notice that the lambda parameter in the subscribe is an ‘_’, this is a functional programming convention for naming parameters that are not used in the lambda function.

There are a couple of advantage with this approach:

  • Clean and simple property get/set methods. The alternative implentation would either have to update the total in the setters, or even more verbosely, and unlikely in practise, listen on the INotifyPropertyChanged interface.
  • External code can also bind to changes on these properties. We’ve implemented the Observer pattern with very little code or overhead

ReactiveObject makes a great base class to derive your MVVM view models from.