Difference between Visibility.Collapsed and Visibility.Hidden

Question

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

Peltast

Is there a Performance diefferent between Hidden and Collapsed? Is there an instance for the object wich is collapsed? – Abner

@Abner 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. – Ability

https://mcmap.net/q/100757/-what-39-s-the-difference-between-visibility-hidden-and-visibility-collapse-in-flexbox/3597276 – Maure

Answer 1

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

Bagby

That means the width and height of control will set to zero if it was in collapsed. – Peltast

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. – Bagby

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. – Propagation

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 – Mindful

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. – Mae

@software is fun Did you work on a trojan horse or something like that? – Moton

@TheincredibleJan No. Worked on a project requiring automation and didn't want users to have to click a button. – Mindful

Answer 2

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:

Now change the second Label visibility to Hiddden.

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

Output Hidden:

As simple as that.

Engdahl

Thank you. BTW I think you should have set the death star visibility to collapsed. Then you have won the day. – Bathulda

Answer 3

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.

Sealer

I'm pretty sure this is wrong. My current application seems to load everything even if I set all my Controls to collapsed. – Prosaic

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) – Kiddy

I also bench-marked this, and found that a collapsed DataGrid does load data! – Dissimulation

Answer 4

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

Illogicality