Difference between Hidden and Collapse

While doing code, developers always find problems on what might be the difference between the concept of Hiding an element and Collapsing an element. Every UIElement has two visibility states, you can do Collapsed or you can do Hidden. Hidden and collapsed are two similar approach in which the UIElement will not be visible to the user. In this article I am going to show how both of the concepts are different in WPF, and later on we will relate the same with ASP.NET.

Notion of Hidden and Collapsed

Hidden means hiding an object but the area in which the object will be placed will be remain expanded. This means, when the object is hidden, the placeholder will remain intact with the same size which the actual object will require when it is placed on the same portion.

Collapsed on the other hand, removes the space of the placeholder, and thus when an object is collapsed, the subsidiary objects will move towards the object and hence the empty space will be filled up with other UIElements. (It depends on the layout you choose).

Demonstration

In the above 2 pictures of the sample application, you can see there are 4 boxes, Box1, Box2, Box3 and Box4. The first window will appear when we write the following code :

<StackPanel Orientation="Vertical">
    <Border Background="Goldenrod" Width="50" Height="50">
        <TextBlock Text="Box1"></TextBlock></Border>
    <Border Background="SlateBlue" Width="50" Height="50">
        <TextBlock Text="Box2"></TextBlock>
    </Border>
    <Border Background="SaddleBrown" Width="50" Height="50">
       <TextBlock Text="Box3"></TextBlock>
    </Border>
    <Border Background="LemonChiffon" Width="50" Height="50">
      <TextBlock Text="Box4"></TextBlock>
    </Border>
</StackPanel>

Now if you make a slight adjustment to the code to hide and collapse the boxes in the middle so that it turns to the image next to it. Lets make Box2 as Hidden and Box3 as Collapsed. 

<StackPanel Orientation="Vertical">
    <Border Background="Goldenrod" Width="50" Height="50">
        <TextBlock Text="Box1"></TextBlock></Border>
    <Border Background="SlateBlue" Width="50" Height="50" Visibility="Hidden">
        <TextBlock Text="Box2"></TextBlock>
    </Border>
    <Border Background="SaddleBrown" Width="50" Height="50" Visibility="Collapsed">
       <TextBlock Text="Box3"></TextBlock>
    </Border>
    <Border Background="LemonChiffon" Width="50" Height="50">
      <TextBlock Text="Box4"></TextBlock>
    </Border>
</StackPanel>

The 2nd Box as been made as Hidden, reserves its portion, while Box3 leaves its portion. Thus Box 4 can move up a bit to make room in place of Box 3 but it cannot move up to Box2 as Hidden will not collapse the space where the Box2 will appear.

In Relation with HTML

In HTML elements, UI objects can be made invisible using either of the two CSS properties. You can either make Visibility:hidden or display:none.
display:none  makes the object hidden while the other object will fill up the space just like what we have just discussed with Collapsed.  On the other hand visibility:hidden will make the object hidden while the space for its allocation remains reserved as we have discussed in case of Hidden.

In the above figure, you can see how the text behaves when we click on the radiobuttons to make the object hidden or collapsed using javascript.

The code looks like :

<script type="text/javascript">
        function DoHandle(stat) {
            var elem = document.getElementById('btn');
            if (elem) {
                switch (stat) {
                    case 'collapse':
                        elem.style.visibility = 'collapse'; // Does not work in most cases.
                        elem.style.display = 'none';        //alternate that works
                        break;
                    case 'hidden':
                        elem.style.visibility = 'hidden'; //works in most cases
                        elem.style.display = 'block';
                        break;
                    case 'visible':
                        elem.style.visibility = 'visible'; //works in most cases
                        elem.style.display = 'block';
                        break;
                }
            }
        }
    </script>
   <p>
      The Button <input type="button" value="The Button" id="btn" style="clear:none;"/> will remain expanded. 
      <br />
      <input type="radio" name="rd" value="Collapse" onclick="javascript:DoHandle('collapse');"/> Collapse
      <input type="radio" name="rd" value="Hidden" onclick="javascript:DoHandle('hidden');"/> Hidden
      <input type="radio" name="rd" value="Visible" onclick="javascript:DoHandle('visible');"/> Visible
    </p>

Thus you can see how I did make the object hidden or collapsed and how the UI gets modified.

Download Sample - 214 KB

Thank you for reading this post. I hope you like it.