Discover how to set the Shapes Fill and Stroke properties. Explore the solid color, gradient and image brushes.
- [Instructor] In WPF, you paint the parts of the UI with a brush. It's noted for shapes. In shapes you have two places that are paintable or two properties that you can paint with, that's the Fill property and the Stroke property. In this example, I have an ellipse that has neither one of them set, so, currently, you can't even see the ellipse here. But, of course, you can select it in the XAML editor and it shows up as selected or I can click with my mouse over here to select it. One simple way of changing the properties, what you've seen me do in lots of other demos, is type in "fill" and choose from this drop down list like that and now I've got two brushes.
One on the Stroke and one on the Fill. I'll make the Stroke thickness bigger so it's easier to see. That's one way of doing it, but I also like to work with the property editor in Visual Studios so let's use that for the rest of the demo. So, I'll select my ellipse, then I'll go to View and choose Properties, and, then, on my machine, I'm going to make this as tall as I can. I can also go to Solution Explorer, Auto Hide it so that the property window takes up a big space here.
So, now you see at the top is area called Brush and there is value for the Fill and the value for the Stroke. To turn off either of these properties, choose the item you want, and then click on this button. That means no brush. To add a brush, click here for the solid color brush. Same with the Stroke, turn it off, turn it on. Remember it's the last value, so it returns it to the previous value. And, then, once you have the solid color brush, then you can start using this editor to change the RGB value or you can use this to change the hue.
So, I can drag around in here 'til I get the hue that I want. Let's see, what do I have selected? I want to select this Fill. I'll drag down here 'til I get to a blue color and then I can move my mouse around in here to change the saturation, the value, and the contrast levels like this darkness of it 'til I get the color I want. I'm going to do the same thing with the Stroke. Another way of setting it is to type in hexadecimal value here or you can manipulate the RGB values directly, if you'd like. Another kind of brush you can work with is called the Gradient brush, so click here, I'll choose the Fill and then I'll click on Gradient brush and that creates a gradient that has two stops: dark on the top and light on the bottom.
You can see the gradient stops here: black and white. Now I'll do the same thing with the Stroke, but I want to reverse the direction, so I'll click on this button, Reverse gradient stops. So you see over here is I got a light at the top and dark in the bottom for the shape Stroke and the opposite for the Fill. And you can see already it's starting to have a three dimensional quality that you don't get with solid colors. 'Course, I'm not stuck with white and black.
Go back and pick the Fill, pick this black gradient stop here, and then I can dial in any other color that I want. I can also move these gradient stops and I can add new gradient stops by just clicking anywhere. And then I can do the same thing with this one, I can dial in any color I want for the new stop. If you're interested in working with some pre-defined colors, you can find them over here. Like if you find some color resources of your own in your project, you can find those here. Right now, I don't have any of those, so all I'm seeing is the Global System colors, meaning the colors that are part of the Windows Operating System.
So, I can choose this one here and that's using the Active Caption brush value for my computer which happens to be this blue color. Final thing we can do is we can use what's called a Tile brush. So, let me select this Fill here and click on Tile brush. Another way of thinking of this is I'm creating an Image brush here. So, I clicked here and then I have to go down to this image source and choose one of these images. Visual Studio looks through all the images I have in my project and I'll pick this flowers.jpeg file.
Just like that, you'll see what happened is it created a ellipse.Fill property and then created an Image brush in there and it's using that to paint the inside of this ellipse. And I can also paint the Stroke with any of these images so I'll click on the Stroke, go down here, do the same thing. Tile brush, Image Source, Tree Background. Now I get that, kind of, that tree wood grain look. Or I could choose, how 'about, the Splash screen.
It's a very bright color, but my point is that you can use any image you want to change either the Stroke or the Fill property. Let me switch this one back to a Gradient. That's a little better looking. And, now, the last thing we want to look at is, remember this is a Tile brush? That means that I can repeat the image, so let's do that. So, I will pick the Image brush, then I'll scroll down to this section where there's something called the Viewport, and I'll change this to 0.25.
And that's saying that this is the paintable area, and then I'm going to use this tile and reuse this tile to paint a copy of the tile in other places inside the Fill property. Right now, you can just see it's up here in the corner. It's not very useful at the moment, but I'll fix it by going to Tile Mode and saying Tile it. So, now you see it's repeating that picture. So, the bigger these numbers, the bigger the Tile pieces, so if I change this to, like, .40, you see that one of the dimensions of the Viewport is bigger.
That's nice. I can also do these other settings like Flip X, so now it's repeating the picture along the X axis. It's flipping it, you're seeing it come here and then it reverses it, and then reverses it again. You can also Flip on the Y axis, and you can Flip, my favorite, is to Flip on the XY and get all sorts of cool looking pictures this way. I'll set this back to .25 and close out the demo.
So, what we've seen here is that you paint with these brushes and there's a variety of these brushes we can use, from simple, solid Color brushes all the way up to fancy, tiled Image brushes.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family