327

What are differences between Visibility.Collapsed and Visibility.Hidden in WPF?

Improve this question
3
  • 4
    Is there a Performance diefferent between Hidden and Collapsed? Is there an instance for the object wich is collapsed?
    – Bulli
    Commented Aug 17, 2012 at 8:35
  • @Bulli Yes there is a performance difference, an invisible control will still be subject to the layouting pass, whereas a collapsed control will not be layouted. So for example a large grid can negatively affect performance when its Visibility is Invisible.
    – Marius Herzog
    Commented Sep 7, 2018 at 8:42
  • stackoverflow.com/q/42252682/3597276
    – Michael Benjamin
    Commented Aug 17, 2021 at 13:02

4 Answers 4

Reset to default
479

The difference is that Visibility.Hidden hides the control, but reserves the space it occupies in the layout. So it renders whitespace instead of the control. Visibilty.Collapsed does not render the control and does not reserve the whitespace. The space the control would take is 'collapsed', hence the name.

The exact text from the MSDN:

Collapsed: Do not display the element, and do not reserve space for it in layout.

Hidden: Do not display the element, but reserve space for the element in layout.

Visible: Display the element.

See: http://msdn.microsoft.com/en-us/library/system.windows.visibility.aspx

Improve this answer
7
  • 3
    That means the width and height of control will set to zero if it was in collapsed.
    – Sauron
    Commented May 20, 2009 at 8:33
  • 31
    Well, in terms of layout, yes. It does of course more than setting width and height to zero. When Visibility is collapsed, the control can't have focus, you can't navigate to the control using the TAB key, etcetera, all of which still can if it would have a height and width of zero. But again, in terms of layout, you could say that.
    – Razzie
    Commented May 20, 2009 at 8:45
  • 3
    I've found that using Hidden (and then Visible) with the WebBrowser control gives me very inconsistent results. Using Collapsed (then Visible) seems to work better.
    – Ternary
    Commented Jan 23, 2012 at 19:24
  • is a collapsed control still "active". I am using a web browser control but don't want to show it however I need it to navigate o different pages and do stuff
    – GettingStarted
    Commented Apr 30, 2015 at 14:58
  • In Chrome, we had to use <div style="display: none"> to get the whitespace to disappear. "Collapsed" isn't a visibility option. "Collapse" is a value, but the space was still there.
    – Praxiteles
    Commented Aug 23, 2016 at 6:27
71

Visibility : Hidden Vs Collapsed

Consider following code which only shows three Labels and has second Label visibility as Collapsed:

 <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
    <StackPanel.Resources>
        <Style TargetType="Label">
            <Setter Property="Height" Value="30" />
            <Setter Property="Margin" Value="0"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1" />
        </Style>
    </StackPanel.Resources>
    <Label Width="50" Content="First"/>
    <Label Width="50" Content="Second" Visibility="Collapsed"/>
    <Label Width="50" Content="Third"/>
</StackPanel>

Output Collapsed:

Collapsed

Now change the second Label visibility to Hiddden.

<Label Width="50" Content="Second" Visibility="Hidden"/>

Output Hidden:

Hidden

As simple as that.

Improve this answer
1
  • Thank you. BTW I think you should have set the death star visibility to collapsed. Then you have won the day.
    – BenKoshy
    Commented Oct 18, 2023 at 0:21
8

Even though a bit old thread, for those who still looking for the differences:

Aside from layout (space) taken in Hidden and not taken in Collapsed, there is another difference.

If we have custom controls inside this 'Collapsed' main control, the next time we set it to Visible, it will "load" all custom controls. It will not pre-load when window is started.

As for 'Hidden', it will load all custom controls + main control which we set as hidden when the "window" is started.

Improve this answer
3
  • 4
    I'm pretty sure this is wrong. My current application seems to load everything even if I set all my Controls to collapsed.
    – Tim Pohlmann
    Commented Jul 14, 2016 at 13:44
  • 1
    I am facing an issue coming from Collapsed. When collapsed is used e.g. Interaction.Behaviors are not loaded until Visibility is changed to Visible. Thus if you creates some kind of proxy using behaviors to access WPF control from VM, this will not work until control is set to be Visible (or Hidden)
    – user2126375
    Commented Oct 12, 2016 at 7:39
  • 1
    I also bench-marked this, and found that a collapsed DataGrid does load data!
    – E Mett
    Commented Apr 15, 2021 at 7:30
2

In one sentence: A hidden control still occupies space but a collapsed one does not.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.