Binding Property Objects to WPF with Caliburn.Micro

Caliburn.Micro provides some powerful classes to help when working in WPF and I found it a very useful and rapid way to develop a WPF application for a client.

However, I found myself reproducing the same binding properties over and over (for example Foreground and Background colours for Labels, Buttons, TextBoxes, etc.). I thought that there must be a better way of handling the common properties for all these objects – rather than multiple Properties essentially doing the same thing. It seemed unlikely that there wasn’t a way of creating a class that could contain all the properties and be used to bind to the XAML objects.

The solution was suggested in this article by Colin Eberhardt.

Based on this I created the following class in the Models section of the project:

public class CommonControlProperties : PropertyChangedBase
{
 
    public CommonControlProperties()
        : this(new SolidColorBrush(Colors.Black), new SolidColorBrush(Colors.White))
    {
    }
 
    public CommonControlProperties(SolidColorBrush foreground, SolidColorBrush background)
    {
        Foreground = foreground;
        Background = background;
    }
 
    private SolidColorBrush _background;
    public SolidColorBrush Background
    {
        get { return _background; }
        set
        {
            _background = value;
            NotifyOfPropertyChange(() => Background);
        }
    }
 
    private SolidColorBrush _foreground;
 
    public SolidColorBrush Foreground
    {
        get { return _foreground; }
        set
        {
            _foreground = value;
            NotifyOfPropertyChange(() => Foreground);
        }
    }
      
}

This inherits Caliburn.Micro‘s PropertyChangedBase which provides the NotifyOfPropertyChange method. It implements only 2 properties for this example: Foreground and Background colours. Two constructors are provided – the basic just sets foreground to black and background to white by default, the second uses two SolidColorBrush items to set the foreground and background colours.

In the ViewModel I then declared an auto implemented Property of type CommonControlProperties:

public CommonControlProperties TestTextBox { get; set; }

This can be instantiated in the ViewModel constructor (or elsewhere):

TestTextBox = new CommonControlProperties();
OR
TestTextBox = new CommonControlProperties
{
    Background = new SolidColorBrush(Colors.Bisque),
    Foreground = new SolidColorBrush(Colors.Red)
};

Finally, the XAML code for the TextBox uses bindings to the ViewModel property and its relevant contained properties.

<TextBox x:Name="TestTextBox1" Background="{Binding TestTextBox.Background}" Foreground="{Binding TestTextBox.Foreground}" HorizontalContentAlignment="Left" Height="27" Margin="43,20,0,0" Grid.Row="3" TextWrapping="Wrap" Text="TextBox1" VerticalAlignment="Top" Width="132" FontSize="14" FontWeight="Bold"/>

This works as expected and allows a neat container for common properties that need to be bound to the XAML objects.

Obviously, this small class needs to be extended to contain all the properties that are useful for controlling the appearance of the visual Control.