WPF Solid Color Brushes


This entry is part 2 of 5 in the series WPF Brushes

Microsoft in their website article Using brushes to paint backgrounds, foregrounds, and outlines says: “A SolidColorBrush paints an area with a single Color, such as red or blue. This is the most basic brush. There are three ways in XAML to define a SolidColorBrush and the solid color it specifies: predefined color names, hexadecimal color values, or the property element syntax”.

Predefined Color Names

Microsoft says: “You can use a predefined color name, such as Yellow or Magenta. There are 256 available named colors. The XAML parser converts the color name to a Color structure with the correct color channels. The 256 named colors are based on the X11 color names from the Cascading Style Sheets, Level 3 (CSS3) specification, so you may already be familiar with this list of named colors if you have previous experience with web development or design.” We have a Windows Presentation Foundation project at this site that you can use to practice with. It’s called WPF ListBox Colors. Feel free to use this code to create your own Windows project.

Hexadecimal Color Values

You can use a hexadecimal format string to declare precise 24-bit color values with 8-bit alpha channel for a SolidColorBrush. Two characters in the range 0 to F define each component value, and the component value order of the hexadecimal string is: alpha channel (opacity), red channel, green channel, and blue channel (ARGB). For example, the hexadecimal value “#FFFF0000″ defines fully opaque red (alpha=”FF”, red=”FF”, green=”00″, and blue=”00″). Here, FF is the largest hexadecimal number you can have, while 00 is the lowest.

Property Element Syntax

Microsoft says: “You can use property element syntax to define a SolidColorBrush. This syntax is more verbose than the previous methods, but you can specify additional property values on an element, such as the Opacity. For more info on XAML syntax, including property element syntax, see XAML overview and XAML syntax guide. In the previous examples, you never even saw the string “SolidColorBrush” appear in the syntax. The brush being created is created implicitly and automatically, as part of a deliberate XAML language shorthand that helps keep UI definition simple for the most common cases. The next example creates a Rectangle and explicitly creates the SolidColorBrush as an element value for a Rectangle.Fill property. The Color of the SolidColorBrush is set to Blue and the Opacity is set to 0.5.”

Convert Color String to a Color in C# Code

If you find the need to convert a color string such as Blue, Red, Cyan, Magenta, Azure, and so on to a Color, you could try the code below, modifying it to suit your needs. Replace the string “Blue” and replace the object to your specific named object.

object.Color = (Color)ColorConverter.ConvertFromString("Blue")

Color of a Shape in XAML and C#

If you are working with XAML and all you need to do is set the color of a shape, for example, it is very easy. We use Fill. Here below is some code to display a small gray triangle pointing to the right, which could be your “play” or “forward” button.

<Polygon x:Name="shapeRight" Points="0,0 18,10 0,20" Fill="DarkSlateGray"/>

Since the color is set in XAML, when the program starts it will display as a dark-grey color. If you want to change that in C# code, you first need to create a solid color brush. Below is the code you can use to do this.

// Create a SolidColorBrush with a blue color to fill the triangle with
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
// Describes the brush's color using RGB values. Each value has a range of 0-255.
mySolidColorBrush.Color = Color.FromArgb(255, 0, 150, 255);
shapeRight.Fill = mySolidColorBrush;

As a demo, let’s go back to the original dark slate gray. We want to use C# code to change the color of the arrow as we did in the above listing, but this time we want to use the color name “DarkSlateGray”. Here’s how we do that.

mySolidColorBrush.Color = (Color)ColorConverter.ConvertFromString("DarkSlateGray");
shapeRight.Fill = mySolidColorBrush;

Extension Method

Here is a more advanced way of changing the color of the shape in C# code. It uses an extension method. Here is how you use the extension method to change the color of the right arrow (triangle).

shapeRight.Fill = "#FFFF7F50".ToBrush();

ToBrush() is our homemade extension method that I found on StackOverflow. Below is the code. This code is a partial listing of the code behind of our XAML.

using System.Windows.Media;

namespace ExaminingScriptures1
{
    public static class Extensions
    {
        public static SolidColorBrush ToBrush(this string HexColorString)
        {
            return (SolidColorBrush)(new BrushConverter().ConvertFrom(HexColorString));
        }
    }
    public partial class MainWindow : Window
    {
Series Navigation<< WPF Brushes IntroductionWPF Linear Gradient Brushes >>