Change whether an element is visible on the screen with the Visibility property. When set to Visible, the element is shown on the screen and partakes of normal UI events. When set to Hidden or Collapsed, the element is not visible.
- [Instructor] There will be times when you want to change the visibility of an element on the screen. In WPF you use the visibility property to change that value. If you are familiar with other UI frameworks, you've probably seen a property called visible. It's usually a Boolean and when you say visible equal true, you can see the element and when you said visible equals false, you cannot see the element. In WPF, the visibility property actually has three states. They are listed here on these three buttons. Visible, hidden, and collapsed.
Let's talk about the difference between these three values. Visible means what you think it means, the element's visible on the screen, the pixels are visible and the element also partakes in the layout pass in the UI. So it's been given a size and a position on the screen. When you mark an element as hidden, its pixels are no longer visible, but it still partakes in the layout process, which means it's been given a location and a size on the screen. You just can't see it. When you mark something as collapsed, the pixels are not visible and it doesn't partake in the layout process.
That means as far as the layout engine is concerned, this element doesn't even exist. Let me show you a practical example. I've got a stack panel here. This contains four letter boxes and they're marked here and I've also got a wrap panel on the bottom that contains four letter boxes and you can see here on the stack panel, the third letter box, the letter box C has its visibility set to visible, which is the default, which means you can see it. I'll now switch this to the hidden value.
When you look at it in the designer, you'll see that it's no longer visible, but there's still a blank spot in here inside the stack panel that's reserved for that element. In other words, this D letter box is not going to move up into that location. I'm going to change this to collapsed. Now, the C letter box is no longer considered in the layout instead of the stack panel. It says okay I'm going to put this D letter box right below the letter box B.
Change this back to visible. So here's the way I think of it. You use visible and hidden when you want to toggle the visibility of an element or a part of the screen on and off, but you don't want to trigger any layouts and you don't want any other parts of the UI changing position. You use collapsed when you want to hide something and you do want to make more room for some of the other elements on the screen to start appearing where the user can see them. I'll demonstrate this also in code.
What I'll do is I'll programmatically change the visibility property for the C letter box in the stack panel and in the wrap panel and to do that, I'll go to my code behind. It's real simple code. Here I've got ChangeLetterBox1's visibility set to whatever the value is for ChangeLetterBox2's visibility and then I'm assigning that to this enumeration value, which is Visibility.Visible and for the second event handler, I'm setting it to hidden and for the third, I'm setting it to collapsed.
Now, let's run the app. Everything's visible. I'll click on Hidden. You'll see that there's this empty spot in both the wrap panel and the stack panel. Now it's visible. This is what I mean. The UI's not moving around on the screen. But when I click on Collapsed, you'll see that the items are changing position.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels