.NET 4.0+

WPF Base Classes - UIElement - Visibility and Status

by Richard Carr, published at http://www.blackwasp.co.uk/UIElementVisibility.aspx

The twenty-second part of the Windows Presentation Foundation Fundamentals tutorial looks further at the UIElement type, which is a base class of WPF layout controls, as well as other WPF controls. This article describes visibility and status properties.

UIElement

In the previous article in this series we started to examine the UIElement class. This is a base class for all of the WPF layout controls that we've seen in the tutorial and for many other controls, some of which we'll investigate in future instalments. UIElement provides a large number of methods, properties and events for controls, each relating to user interactivity. We've already seen the keyboard events of this class. In this article we will look at the visibility and status properties.

The visibility properties allow you to specify how a control is displayed or to check whether or not a control can be seen. You can show and hide controls and change how screen space is allocated. You can also make controls semi-transparent, allowing items that are positioned behind them to appear. The status properties let you enable or disable controls, or make them ignore mouse events.

To demonstrate the properties we need a sample project. Create a new WPF application project in Visual Studio, naming the project, "UIElementVisibilityDemo". Once the solution is ready, replace the XAML in the automatically created window with that shown below:

<Window x:Class="UIElementVisibilityDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UIElement Demo"
        Width="250"
        Height="170">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel Name="LeftPanel" Width="100" Background="HotPink">
            <Label>Label 1</Label>
            <Label>Label 2</Label>
            <Label>Label 3</Label>
            <Button Margin="3">Click Me!</Button>
        </StackPanel>
        
        <StackPanel Grid.Column="1">
            <Button Margin="3">Visibility</Button>
            <Button Margin="3">IsVisible</Button>
            <Button Margin="3">Opacity</Button>
            <Button Margin="3">IsHitTestVisible</Button>
            <Button Margin="3">IsEnabled</Button>
        </StackPanel>
    </Grid>
</Window>

The above XAML creates a window containing a two-cell Grid. The left cell holds several Labels and a button within a StackPanel. We'll be accessing the visibility and status properties of this panel to demonstrate their use. The right cell contains five buttons that represent the five properties that we will be investigating.

Visibility Property

A commonly used UIElement property is Visibility. As the name suggests, the property determines if the user will be able to see the control. Unlike the Visible property of Windows Forms, it is not Boolean. Instead there are three possible options, defined in the Visibility enumeration. They are:

• Visible. The control is visible to the user. When the control is rendered it will be given an appropriate amount of space that is dependent upon the type of control, the size and alignment properties and the positioning of other controls.
• Hidden. When set to Hidden, the control is not shown. However, the space where it would otherwise appear is reserved. Toggling the property between Hidden and Visible shows and hides the control but does not affect the rendering of other controls positioned around it.
• Collapsed. When the property is set to Collapsed, the control is hidden and the space it would appear in is not reserved. The window is displayed as if the control is not present at all. Toggling between Collapsed and Visible may cause other controls to be moved and resized, depending upon the layout you have designed.

To demonstrate this property we'll use the first button in the right-hand Grid cell. Change the XAML for this button as follows to register the Click event.

<Button Margin="3" Click="Visibility_Click">Visibility</Button>

Now switch to the code behind the window and add the following method. This cycles the left-hand StackPanel through the three available Visibility states when the button is clicked:

private void Visibility_Click(object sender, RoutedEventArgs e)
{
    var visibility = LeftPanel.Visibility;

    switch (visibility)
    {
        case Visibility.Visible: LeftPanel.Visibility = Visibility.Hidden; break;
        case Visibility.Hidden: LeftPanel.Visibility = Visibility.Collapsed; break;
        case Visibility.Collapsed: LeftPanel.Visibility = Visibility.Visible; break;
    }
}

When you run the program the left panel is initially visible. This causes the right cell to be sized to fit the remaining area. If you click the Visibility button once, the left StackPanel and all of its child controls are hidden. The remaining visible controls are unaffected, as the space required for the hidden StackPanel is still reserved.

The window appears as follows:

Clicking the button for a second time changes the StackPanel's Visibility to Collapsed. As the space for the control is no longer reserved, the StackPanel in the right cell increases in size to fill the window. The buttons within this StackPanel expand accordingly, as shown below: