302

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

SliverNinja - MSFT
  • 29,007
  • 10
  • 98
  • 161
Sauron
  • 15,788
  • 40
  • 119
  • 171
  • 4
    Is there a Performance diefferent between Hidden and Collapsed? Is there an instance for the object wich is collapsed? – Bulli Aug 17 '12 at 08: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 Sep 07 '18 at 08:42

3 Answers3

445

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

Deantwo
  • 879
  • 9
  • 17
Razzie
  • 29,772
  • 11
  • 60
  • 74
  • 2
    That means the width and height of control will set to zero if it was in collapsed. – Sauron May 20 '09 at 08: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 May 20 '09 at 08: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 Jan 23 '12 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 – software is fun Apr 30 '15 at 14:58
  • In Chrome, we had to use
    to get the whitespace to disappear. "Collapsed" isn't a visibility option. "Collapse" is a value, but the space was still there.
     – Praxiteles Aug 23 '16 at 06:27
61

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.

Kylo Ren
  • 7,647
  • 4
  • 36
  • 57
7

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.

scsfdev
  • 333
  • 1
  • 4
  • 13
  • 3
    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 Jul 14 '16 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 Oct 12 '16 at 07:39
  • I also bench-marked this, and found that a collapsed DataGrid does load data! – E Mett Apr 15 '21 at 07:30