Animate visibility property of UI Element in WPF

There are three state of visibility in WPF. It's values are Visible, Collapsed and Hidden. Visibility property gets or sets the visibility of a UIElement.
  • 4570
Download Files:
 

Animate  visibility property 
Visibility is property available both for Silverlight and WPF. Visibility property gets or sets the visibility of a UI Element. An element's Visibility property actually isn't Boolean but rather a three-state System.Windows.Visibility enumeration. Its values and meanings are as follows:

  1. Visibleâ€"The element is rendered and still occupy space in a WPF layout. It is default value.
  2. Collapsedâ€"The element is invisible and does not occupy space in  a WPF layout.
  3. Hiddenâ€"The element is invisible yet still occupy space in a WPF layout.

A Collapsed element effectively has a size of zero, whereas a Hidden element retains its original size.
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 occupy same size which the actual object will require when it is placed on the same portion.
Collapsed  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 UI Elements.

here is example to
 demonstrate all these 3 values using figure and code:

visibility.gif

MainWindow.Xaml

<Window x:Class="WpfApplication5.MainWindow"
        xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
        xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
        Title="MainWindow" Height="400" Width="200">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="94*" />
            <RowDefinition Height="267*" />
        </Grid.RowDefinitions>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="70"Background="CadetBlue" Margin="2,12,0,0">
            <Button Visibility="Collapsed">Collapsed Button</Button>
            <Button>Below the Collapsed Button</Button>
        </StackPanel>
        <StackPanel HorizontalAlignment="Left" Margin="2,25,0,170"  Width="150" Height="70"Background="Brown" Grid.Row="1">
            <Button Visibility="Hidden">Hidden Button</Button>
            <Button >Below Hidden Button</Button>
        </StackPanel>
        <StackPanel HorizontalAlignment="Left" Margin="2,151,0,46"  Width="150" Height="70"Background="Chocolate" Grid.Row="1">
            <Button Visibility="Visible" >Visible Button</Button>
            <Button >Below Visible Button</Button>
        </StackPanel> 
    
</Grid>
</
Window> 
First stack panel has two button. First button use UI Element visible collapsed, this element is invisible and does not occupy space that is reason second button move toward and occupy it's place.
Second stack panel has also two button.  First button use UI Element visible hidden, this element is invisible and occupy space that is reason second button does not move toward. It's still remain on it's place.
Third stack panel has also two button,  First button use UI Element visible Visible, this element is visible and occupy space that is reason second button does not move toward.
In simple term:

  1. Visible: Display the element.
  2. Hidden: Do not display the element, but reserve space for the element in layout.
  3. Collapsed: Do not display the element, and do not reserve space for it in layout.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.