.NET 4.0+

WPF Brushes - Solid Colour

by Richard Carr, published at http://www.blackwasp.co.uk/SolidColorBrush.aspx

The one hundred and thirty-fifth part of the Windows Presentation Foundation Fundamentals tutorial is the first to look at the brushes provided by WPF. Brushes are used to set the colours for controls and drawings. The first brush type produces a solid block of colour.

Brushes

Many WPF controls and classes use one or more brush properties. These determine the colours used when rendering the controls. For example, the Background and Foreground properties of controls and the Fill and Stroke properties of shapes use brushes.

There are several types of brush that you can apply to controls and their constituent parts. In this article we will look at the most basic, which applies a solid colour to an item. Over the next few articles I'll describe some of the more complex brushes. These allow you to create smooth gradients and patterns.

To demonstrate the use of brushes we need a simple project. Create a new WPF application in Visual Studio named, "BrushDemo". Once loaded, replace the XAML in the main window with the following:

<Window x:Class="BrushDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Brush Demo" Height="150" Width="250">
    <StackPanel Margin="4">
        <TextBlock>Name</TextBlock>
        <TextBox Name="MyTextBox" />
        <TextBlock>Password</TextBlock>
        <PasswordBox />
        <Button Width="100" HorizontalAlignment="Right">Login</Button>
    </StackPanel>
</Window>

The XAML creates a window with two TextBlocks, a TextBox, a PasswordBox and a Button.

Applying Solid Colours with XAML

You can set the brushes used by controls in XAML. For solid colours, you can provide the brush as a string that describes the colour. There are two options. Firstly, you can specify a colour name from the list of WPF colours. You can also provide the colour using a hex code.

There are two formats for hex codes. The first allows you to define a colour using three bytes, each as a two-digit hexadecimal value. The first byte represents the amount of red in the colour, the second the green level and the third is for blue. The three, two-digit values are concatenated and preceded by a hash symbol. For example, the following hex code creates a pink colour by mixing the highest level of red with no green and some blue.

In WPF, you can also include an alpha channel. This determines how opaque or transparent the colour should be. If set to the maximum value, the colour is opaque. Setting the value to zero means that the brush is completely transparent. All other values make the colour partially transparent, allowing the controls behind the affected item to show through. To add an alpha channel, you use four bytes. The first is the alpha, the others are for the red, green and blue elements. The following code would produce a semi-transparent version of the pink used above.

Let's apply some brushes. Update the XAML for the window to the code below. This adds a background colour to the window using a named colour. The text of the text blocks and the background of the button are also set using such brushes. The background colour of the textbox is set using an RGB hex code. The password box uses an ARGB hex code to produce a semi-transparent red.

<Window x:Class="BrushDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Brush Demo" Height="150" Width="250"
        Background="DarkBlue">
    <StackPanel Margin="4">
        <TextBlock Foreground="Yellow">Name</TextBlock>
        <TextBox Name="MyTextBox" Background="#FF0000" />
        <TextBlock Foreground="Yellow">Password</TextBlock>
        <PasswordBox Background="#80FF0000" />
        <Button Width="100" HorizontalAlignment="Right" Background="BlueViolet">Login</Button>
    </StackPanel>
</Window>

The window now appears as shown below. Note the transparent red of the PasswordBox allows the blue to show through, giving a purple result.

Applying Solid Colours with Code

When you want to change a brush from code, you can't set it using a string. You must use an object of a type that is derived from the Brush class. For a basic, single colour, you can set properties to a SolidColorBrush instance.

To demonstrate, we'll capture the button's Click event and change a brush from code. Modify the button, as follows, to register the event.

<Button Width="100" HorizontalAlignment="Right" Background="BlueViolet" Click="Button_Click">
    Login
</Button>

If you want to use one of the named colours, you can obtain a SolidColorBrush from one of the static properties of the Brushes class. One such property exists for every named colour. Let's change the colour of the text box's background to light blue, using this method. Add the following code behind the window.

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyTextBox.Background = Brushes.LightBlue;
}

Run the program and click the button to see the colour change.

If you want to use a custom colour, perhaps with an alpha channel value, you can create your own SolidColorBrush instance. To do so, instantiate a new object, passing the desired colour, as a Color structure, to the SolidColorBrush constructor.

To demonstrate, update the click event code, as follows:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyTextBox.Background = new SolidColorBrush(Color.FromRgb(0, 255, 0));
}

Run the program again to see the result. When you click the button, the text box's background will become green.