There is another way to show or hide an element, this can be done with the Visibility property. This video looks at the three visibility values—visible, Hhdden, and collapsed—and shows how each value impacts hit testing.
- [Instructor] There's another way to show or hide an element. This can be done by using the visibility property. For this demonstration, I'm using the VisibilityPage.xaml file. Let's talk about the way I've constructed this XAML for this. I have StackPanel that contains three grids. Inside each of the grids is an ellipse and a text block that helps us identify which ellipse. So obviously things like the A ellipse, B ellipse and C ellipse but really I'm talking about the grid that contains the ellipse and also that text block.
The role of the StackPanel is that when it has children, it tries to arrange each element immediately below its predecessor which is doing very well. You can see that the B ellipse is right below the A ellipse and the C ellipse is right below the B ellipse. Now I'm changing the visibility of this grid. So I'll go to the grid number two. Let's say visibility equal and I'll choose the default value which is visible. Nothing changes because it was visible before and it's still visible.
Next, I'll look at changing it to hidden. Now it does disappear. So this is a lot like setting the opacity level to zero but there are some subtle differences which we'll talk about in a minute. What I've done is I've set the visibility property to hidden so that turns off the pixels for the grid and its children. But, as far as the StackPanel is concerned, it's still a child and it's reserving a spot for it. When I set it to Collapsed however, now it's not visible as far as the pixels are concerned. You can set it to Collapse.
You're telling that WPF ellipses to not even consider this element when it comes to arranging the screen. So as far as the StackPanel is concerned, it doesn't even have the second ellipse. So it stacks the C ellipse immediately below the A ellipse. Now let's talk about the difference between opacity and visibility equal hidden. For this demonstration, I'll use the HitTestPage and then I'll run the application. Click on Hit Test. Then I'll click on the B ellipse on both sides of the screen.
So when you click here, you'll see that I'm updating this text block here with a new string. It's the same for this B ellipse. So the point is both these grids that contain the B ellipse have mouse event handler setter updating the screen. Return back to Visual Studio and select this first grid, the one on the left side and set its visibility to hidden. Then for the grid on the right side of the screen, I'll set it to opacity equal to zero.
So from Visual Studio perspective, they look exactly the same. Now I'll run the app and see if there's any differences in render. So I'll click over here where the opacity equal zero, ellipse is leaving. You see that as far as the event system is concerned, there is still an ellipse there that's reacting to that event handler. When I go over here, nothing happens. Now you have to trust me that I'm actually clicking with my mouse button because, you can tell here there's nothing happening on the screen.
So the point is one of the differences between opacity equal zero and visibility equal hidden is whether or not is considered for Hit Testing from the operating system and from your WPF application. For this next demonstration, I'll use the code in this HideAnimationPage. So this is what I want to have happened. I want to be able to fade out this B ellipse. Then when it's faded away, I want to set the visibility of its container to collapse so that all the other items on the page will fit inside the StackPanel.
We already got that code set up you can see on the grid itself. The grid that contains the ellipse and the text block. I've got a MouseLeftButtonUp event handler. The code behind I call them method FadeOut and this is the same code that I had in the opacity video. This is what it looks like. Click on grid. It fades out and then it collapses up phase C ellipse. Now if you're happy with that, I'll do it again. I'll choose Hit Test and then Hide Animation so it resets that page.
If you're happy with that quick collapse, then we're good but we could also modify that and then make it, so that it shrinks it down in size. That's what I'll do for the final demo in this video. So I'll go to the grid. I kind of transform. This is going to be what's called the LayoutTransform. Then inside the transform, I'll specify what's called the ScaleTransform.
This allows me to apply a change before the layout pass is happening. That's why it's called the layout transform. So I will scale the grid smaller. Every time I scale it a little bit smaller, the layout engine in WPF will recognize that I've made a change to the size or something that affects the layout so it will then re-render the UI. That means that the StackPanel get notified about that and it can then make the space a little bit smaller where the ellipse is currently living. Now I also need to modify some code.
So I'll go over to the code behind. I'll copy this animation. Paste it here. It's going to be another double animation. Now it says this is going to go from one to zero. I'll change the name of this one to sizeanimation.
No, I forget the equal sign here. That's what I needed. Then I will go down here into the bottom of the method. I'll say grid transformation. You'll say grid transform to begin animation. And the thing I want to animate is the ScaleTransform. I need to use the System media name space.
So that creates the animation that scales the x value. Then I'll just copy this. Change that to scale y property. This grid transform, I put it on the wrong grid. It should go on the middle grid. Success.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family