Article
06/13/2011

Visibility

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets the user interface (UI) visibility of an element.

<object Visibility="Visible"  .../>
-or-
<object Visibility="Collapsed"  .../>

value = object.Visibility
object.Visibility = value

Property Value

Type: Visibility Enumeration

A value of the enumeration that states the current visibility of the object.

This property is read/write. The default value is Visible.

Managed Equivalent

Visibility

Remarks

If the value of the Visibility property for an element is not Visible, the element does not participate in input events, is not in a tab sequence, and is excluded during hit testing.

Note:
The value of IsHitTestVisible is ignored when an object is not set to Visible. IsHitTestVisible is a settable property that enables you to disable hit-testing for elements that otherwise can be hit-tested because of their Visibility and Background property values.

Visibility uses an enumeration rather than a simple Boolean because it is based on the Windows Presentation Foundation (WPF) Visibility property, which uses a three-state model of Visible, Hidden, and Collapsed. In the WPF model, Hidden denotes a visibility state where the object should not render but should still occupy space in a WPF layout. Silverlight 1.0 does not support a Hidden visibility state, but it still uses the Visibility enumeration values that remain (Visible and Collapsed). If you are importing XAML UI definitions from WPF, you might need to change the cases where Visibility is declared as Hidden to use those XAML definitions in Silverlight 1.0.

Example

The following XAML example shows how to set the Visibility property of a TextBlock to Visible.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  Background="Wheat">
  <TextBlock
    Text="Click me!"
    Visibility="Visible"
    Canvas.Left="20"
    FontSize="24"
    MouseLeftButtonUp="onMouseLeftButtonUp" />
</Canvas>

The following JavaScript example shows how to set the Visibility property of the TextBlock to Collapsed.

function onMouseLeftButtonUp(sender, mouseEventArgs)
{
    // TextBlock collapsed.
    sender.visibility = "Collapsed";
    // The IsHitTestVisible property is ignored during hit-testing;
    // it is still set to true for an element whose Visibility is Collapsed, has null or Transparent Brush, or Opacity=0.
    alert(sender.isHitTestVisible);
}