BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Base Classes - UIElement - Visibility and Status

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.

IsVisible Property

Sometimes you will want to check if a control is visible, without needing to differentiate between is being hidden or collapsed. In these situations you can check the IsVisible property. This read-only property returns a Boolean value that is true if the control is visible and false otherwise.

To demonstrate, modify the XAML for the "IsVisible" button as follows:

<Button Margin="3" Click="IsVisible_Click">IsVisible</Button>

Now add some C# code to display the current value of the property:

private void IsVisible_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show(LeftPanel.IsVisible.ToString(), "IsVisible");
}

Run the program and try clicking the updated button for each of the three Visibility options. You should see that the property is true when the left StackPanel's Visibility is set to Visible, and false for Hidden or Collapsed.

Opacity Property

You can create some interesting effects by making controls partially transparent. The Opacity property can be set to a value between zero and one, using a double-precision floating point number. The default value of one makes a control completely opaque, whereas a value of zero hides the control from view. Values between these two limits vary the transparency of a control, allowing items behind it to be seen.

The Opacity value of a parent control is applied to its children automatically. If the children are also partially transparent, the effective opacity will be calculated by multiplying the two values. For example, you might have a StackPanel with an Opacity of 0.5 that contains a button that also has an Opacity of 0.5. The button will be rendered with an effective Opacity of 0.25.

To demonstrate, modify the "Opacity" button's XAML:

<Button Margin="3" Click="Opacity_Click">Opacity</Button>

Now add the following code. With each click of the button the Opacity of the StackPanel will be reduced by 0.25 until it is completely transparent.

private void Opacity_Click(object sender, RoutedEventArgs e)
{
    double opacity = LeftPanel.Opacity;
    opacity -= 0.25;

    if (opacity < 0)
    {
        opacity = 1;
    }

    LeftPanel.Opacity = opacity;
}

Run the program and try the button. Note that when the Opacity is zero the control is hidden completely. However, because the Visibility property is set to Visible, clicking the "IsVisible" button still shows true.

The following image shows the StackPanel with an Opacity of 0.5. You can see that the background colour of the panel seems faded, as do the labels and the "Click Me!" button. If another control had been positioned behind the StackPanel in the left cell, this would show through.

Left Panel with 0.5 Opacity

IsHitTestVisible Property

IsHitTestVisible is an interesting Boolean property. When set to its default value of true, the control behaves as you would expect in response to mouse events. If you change the property to false, mouse actions are completely ignored. This means that buttons cannot be clicked and mouse over animations are not played. If other controls appear behind the ones that have a false IsHitTestVisible, these may capture mouse events. This is useful for displaying watermarks or status messages in front of controls that you wish to remain responsive to clicks.

To demonstrate, let's first add a Click event to the "Click Me!" button:

<Button Margin="3" Click="ClickMe_Click">Click Me!</Button>

The button will show a message to indicate that the click was registered:

private void ClickMe_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Click!");
}

Now modify the XAML for the IsHitTestVisible button, as follows:

<Button Margin="3" Click="IsHitTestVisible_Click">IsHitTestVisible</Button>

We'll make the button toggle the property for the left StackPanel. As with Visibility, the property will be inherited by the panel's child controls.

private void IsHitTestVisible_Click(object sender, RoutedEventArgs e)
{
    LeftPanel.IsHitTestVisible = !LeftPanel.IsHitTestVisible;
}

Run the program and try clicking the "Click Me!" button to see the message. Click the "IsHitTestVisible" button before trying again. You should see that the click is ignored when the property is false. Also note that the button does not change appearance when the mouse pointer is moved within its boundaries.

25 July 2013