This video compares the differences between an element opacity and a transparency channel as defined using Windows Presentation Format color.
- [Instructor] In WPF, you have two ways to indicate that you want to be able to see through an element. You can set the opacity property on the element or you can change the alpha channel on the color. For this example, I'm using a number of ellipses on this window. I've set up Visual Studio, so I've got Visual Studio docked on the right side of the screen, I've collapsed all the extra windows and I've switched over from this normal split view into the text only view. So I can look at the designer or I can look at the text.
Then over here, I've run the application by pressing F5 in Visual Studio and I've docked it to the left side of the screen. All the ellipses on this example are similar. They're the same size, they have the same stroke and the same stroke thickness. What I'm changing on the first three ellipses is the value here for the fill. On this first ellipse, I'm changing the alpha channel to FF, which means it's a fully opaque blue color. On the second ellipse, I've set the alpha channel to 33, which is approximately 20%, which means it's about 80% transparent.
As you can see, some of the wood grain on the background image is showing through. The thing to note is that the stroke is still fully opaque. On this third example, I've set the alpha channel to 00. That means this is being painted with a transparent brush. In all three of these cases, the stroke was not affected by what I was setting in the fill. The opacity property, on the other hand, is used to change the see-throughness of the entire element. In this example, you can see how I got opacity set to one, then .6, .2 and 0.
This runs a range from zero to one. In this case it's 20% opaque. You can see through the fill and you can see through the stroke. So the differences between these two is if you want the entire element to be see-through, then use the opacity, if you just want portions of the UI element to be see-through, then set the color. You find the color that you want to be transparent, let's say on a button or a list box, you paint that with a solid color brush with the alpha channel set to a transparent level, and then you'll be able to see through that part of the control.
Another thing to consider when you're working with the alpha channel is the transparency affects the hit test. What that means is when you're clicking on something or mousing over something, are we considered to be mousing over or clicking on the ellipse, or one of the elements that's behind it? So in this example, I've got an image behind these three ellipses. In this first ellipse, I set the fill alpha channel to FF. When I click on this item, nothing happens. But if I click on the image right next to it, you'll see that it updates this string here on the bottom of the screen.
Click on the ellipse, nothing happens, click on the image, it updates this string. Over here, I've set the alpha channel to 00 and that means it's transparent. But I want you to see that when I click here, nothing happens. So a transparent brush is still considered to be hit testable. So WPF, make sure that when you touch this item, you're touching the ellipse and not the image behind it. Over here, on the other hand, I've set fill equal to null, which means there's no brush at all here.
Now when I click in the center of this ellipse, you'll see it updates the timestamp, because I'm able to click through that, because I'm actually clicking on the image now, because there's no brush in the way.
- 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