Post
Ask Question

Visibility=Collapsed Vs Visibility=Hidden In WPF

Let me begin this article with good news! Mahesh & I have recently released a book on WPF & C#, It has everything that you need to build an industry level application in WPF.  Back to business, Hidden vs. Collapsed. Let me explain this feature with a simple example. 

Say you have the following window with 3 buttons, Every control has an attribute named "Visibility" which accepts either of these three values. 1. Visible, 2. Collapsed,  3. Hidden. 

If you don't specify anything by default it will take "Visible". As you can see in the following image all 3 buttons are visible and 2 of them don't even have a Visibility set. See listing 1 for clarification.


Figure 1: Visibility="Visible" 

Figure 1 is output of the following listing 1. The first and third button don't even have Visibility set, still they are visible, but for the second button we are explicitly specifying the value of Visibility to be "Visible", by doing so we are overriding its value with its default value. It's like assigning 0 to int value.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button x:Name="ButtonSave"  
          Margin="0 10 0 0"
          Height="20"        
          Width="100"        
          Content="Save"/>      
    <Button x:Name="ButtonReset" 
          Margin="10"
          Visibility="Visible"
          Height="20"        
          Width="100"        
          Content="Reset"        
          Grid.Row="1"/>
    <Button x:Name="ButtonCancel"        
          Height="20"        
          Width="100"        
          Content="Cancel"        
          Grid.Row="2"/>
</Grid>

Listing 1: Visibility="Visible" 

Now let's change the Visibility to "Collapse" for the second button. see line number 8 in the following code snippet.

<Button x:Name="ButtonSave"  
       Margin="0 10 0 0"
       Height="20"        
       Width="100"        
      Content="Save"/>
<Button x:Name="ButtonReset" 
       Margin="10"
       Visibility="Collapsed"
       Height="20"        
       Width="100"        
       Content="Reset"        
      Grid.Row="1"/>
<Button x:Name="ButtonCancel"        
       Height="20"        
       Width="100"        
       Content="Cancel"        
       Grid.Row="2"/>

Listing 2: Visibility="Collapsed"

Now look at the output, suddenly the reset button has disappeared, well that's exactly what we wanted to achieve. Reset button is invisible. 


Visibility="Collapsed"

Now the question is what would happen if I change the value to "Hidden"? See line number 3 in the following snippet.

<Button x:Name="ButtonReset" 
        Margin="10"
        Visibility="Hidden"
        Height="20"        
        Width="100"        
        Content="Reset"        
        Grid.Row="1"/>

Listing 3: Visibility="Hidden"

Now observe the output, we have hidden the Rest button but we left the place vacant. 


 Visibility="Hidden"

Conclusion

In nutshell, Visibility="Collapsed" means tag is not rendered on the screen itself, hence space is vacant which is filled by its next control on Visual tree.

Where Visibility="Hidden" means control is rendered it occupies the space it just not visible on the screen.

You can learn more about WPF and its working in depth by downloading WPF SIMPLIFIED, we are covering almost everything that you need to learn about from WPF to presentation logic and presentation logic to data access in WPF.


Similar Articles