Learn to use transform properties—rotate, scale, skew, translate—to modify gradient brushes.
- [Narrator] What you see in the Visual Studio property window depends on what you have selected in the Visual Studio designer or in the Visual Studio XAML editor. Right now when I'm clicking on this rectangle in this ellipse and I look in the brush section I see the brush that's applied for fill property and the brush that's apply for the stroke property. I see all the information here and then I if scrolled down here at the bottom there is this dropdown chevron which is called show advanced properties. And this is what I see other properties that are on the LinearGradientBrush.
The data here changes depending on which of the two brush types I have. If I switch to a radial gradient I get a different set of properties then when I have a linear gradient. You can also see different properties by choosing a different element in the XAML. For instance here in the Ellipse.Fill property is a LinearGradientBrush. When I select this element now I'm looking at properties on the LinearGradientBrush. So this is a lot like looking at the fill property and looking at the advanced view. Keep drilling down... When I click on the GradientStop...
Now I'm looking at properties that are just on the GradientStop. I like to point this out because occasionally what'll happen is you'll be working on an ellipse like this. Working with the brush. And then you're looking in your XAML and you click here and then you look at your property window and it's like "Where did the color window go?". You have to click back on the ellipse. To get it back. So you're looking at the fill property. So now that we talked about that now we can move on and look at some of these advanced properties.
Here's where you set the startpoint and the endpoint. It defaults to these values when use the Visual Studio property window. Just type in a new value here like zero and one. To switch the start and end point. This property, the relative to bounding box, has two values. If you pick absolute and look at your gradient brush now you see that the endpoint is marked 262.5 and 172.5. So it's using pixel coordinates now to specify the end point as opposed to relative coordinates where it uses values between zero and one.
When I switch back to relative to bounding box then it goes back to the ones and zero values. And you see what happened here? It switched me over to the LinearGradientBrush when I was doing that. So I want to click on the ellipse itself and then show advanced properties. Another thing that you can set here is called the SpreadMethod. If you're playing around you might not see much difference when you choose these three values. That's because if you're using the full width of the gradient this doesn't make any difference.
The SpreadMethod. So what we'll need to do is make a smaller starting and ending point. Now I'll set this back to pad. What's happening is the gradient is not starting until 40% of the way across and 60% of way across. So I just have this narrow band where the actual gradient interpolation is happening. So that only takes up a small percentage of the entire shape. So the SpreadMethod tells it what to do if you don't want it to go into this narrow band. I can do what's called a repeat.
And now it'll do the band. Pink to blue. And then it'll repeat pink to blue and so on. Or I can do reflect. Which it does blue to pink and then pink to blue and then blue to pink. Finally there's the ability to do what's called a transform. A transform is WPF is one way of modifying an element and making it larger or smaller. Make it move the the left or right. Changing the skew values and changing its rotation. And what I'll do here is do what is called a RelativeTransform.
I'll be changing the brush. I'll click on rotate. And then I can type in an angle here. 90 degrees. And that rotates the brush 90 degrees. You can see down here a gradient what's called the TransformGroup. Underneath my LinearGradientBrush and there's my rotate transform. You can also grab this circle here with your mouse and drag this around to see the angle. It's also possible to do what's called a scale.
So if these numbers get larger. I'm using my mouse wheel to make them smaller. That's compressing the bands. And then finally, let's take a look at this. This is called flip. This allows me to flip the y axis. Back and forth. Or the x axis. So it's just another way. Once you've got it all laid out and you've got the angles the way you want. Here you go to rotate, you get the angle you want. And then you decide you really just want to flip it 180 degrees you can go over here and do that.
- 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