This tutorial looks at the brushes available in the Microsoft Visual Studio's Windows Presentation Foundation API. It also explores the color types.
- [Instructor] I think it's a good idea to start this course by talking about the classes and structures that we'll see throughout the course. I'm talking about the brushes and the colors. In WPF, when you want to paint an area of the screen, you use a brush. All the brushes in WPF derive from this abstract class called Brush. You'll find that many of the elements that you use in your UI have properties that are typed as Brush. For instance, the rectangle has a Fill property that is type Brush. And what that means, is that you can take any of these derived classes, and paint that area of the screen using those particular brushes.
The most common brush that you'll see in WPF is this one, SolidColorBrush. Use this brush when you want to paint an area of the screen with a single color. Now, you can take a look at the brush itself, and you'll see that it only has one interesting property, that Color property. The base class has a couple of interesting properties, like the Opacity value. I'll talk about opacity and transparency a little bit later in the course. This is also where you can specify what are called transformations of the brush. There are some other brushes in WPF that work with colors, I'm showing them here.
They're called gradient brushes, and there's two of them, LinearGradientBrush and RadialGradientBrush, and both of these derive from this abstract class GradientBrush. You use a gradient brush when you want to paint an area of the screen with bands of color, so you'll see that in the GradientBrush abstract class, there's a property called GradientStops. And if I looked at the GradientStop class, which goes in that collection, you'll see that it has a property called Color, and a property called Offset. This is where you specify the color for the band, then you specify in the LinearGradientBrush the starting and end points of the linear gradient brush, and then how many bands you want, or how many gradient stops.
And then in the RadialGradientBrush, you would specify the property like the Center. Radial gradient brushes is used for when you want to have rings of color. Speaking of color, there are many classes and types that work with Color. I'm showing them on this class diagram too. This is the one you look at first, it's called the Color struct. And you'll see it has properties like A, B, G, and so on. Think of the Color structure as a way of building a color, you can supply the blue channel or the green channel, and have it build up the color, and then use that color and assign it to the Color property.
If you'd rather not build it up yourself, you can use the Colors class, which is filled with pre-defined colors. WPF also supports the concept of color profiles, they use the ColorContext class to set profiles using the ProfileUri. The ColorConverter is useful when you have a string value in your xaml and you want to convert that string value into the actual Color class. And in relationship to that, there's also something called the BrushConverter, which works very similarly; you take a string value in your xaml, and it turns it into a brush.
I'll talk about the difference between those as we go through the course. What we see on this screen, on this class diagram, are all of the Color-related classes, and if you've worked in some other UI frameworks, you may be familiar with the color values for setting properties. WPF uses a more sophisticated system. Remember, I said you have this base class here. Let's go take a look at some of the other classes it derived from this, called tile brushes. They're over here in this class diagram. The TileBrush derives from the abstract Brush class, and the idea behind the tile brush, is when you want to paint with a pattern on the screen.
The most common brush that you'll see used in the tile brushes is this one, the ImageBrush. Specify an ImageSource, and then, when you paint with that brush, it'll use the pixels from that image. If you've worked in WPF at any length of time, you've seen the Image element as you're putting an image up on the screen? The ImageBrush takes the data from that image, and uses that to paint part of the screen. So you can repeat the image many places on the screen without having to have multiple images. You'll find in the TileBrush base class, properties like Viewbox and TileMode, and Stretch, this is where you specify how the repeating pattern will work.
And then, one of the really fascinating areas in WPF is these other two brushes, the VisualBrush and the DrawingBrush. The VisualBrush allows me to pick a visual from the visual tree, and then paint with that. What I can do here is I can pick an image element on my visual tree, and set that as my visual, there's a property in here called Visual. I point that to my image, and then I basically created an image brush. It's taking the image, and it's painting with that, so you probably won't do that, you'll use ImageBrush instead.
But what if I picked a different element in the tree? What if i picked a button? If I picked a button, and said, that's my visual, now I can start painting with the pixels that are typically shown on the button. And the most common use for this is to create things like a reflection. Or, what if i have a video player, there's something called a media element, what if I put a media element on the screen, in my visual tree, and I tell my VisualBrush to use the pixels that are being painted in the media element? Now when the video's playing, I can paint other parts of my screen with that video. Finally, there's something called the DrawingBrush.
The idea of drawing is that there are certain classes in WPF that are drawing related, or think of them as shapes, lines, ellipses, rectangles, and things like that. So I could build a drawing out of a group of shapes, and then assign that collection of shapes to my DrawingBrush, and now I can start painting my screen with the pixels that are rendered from that drawing. Though I could take a circle, and put another concentric circle inside of that, and another circle inside that, now I've got a bull's eye, and I can use that as a paintbrush to paint other parts of my screen.
- Working with brushes
- Painting properties
- Painting in code
- Working with RGB channels
- Using hexadecimal values
- Setting opacity and transparency
- Editing color in the Visual Studio Color Editor
- Using gradient brushes
- Decorating with tiled brushes
- Adding brushes and colors to resources
- Working with opacity masks