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 Layout Controls - Expander

The twelfth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF layout controls. This instalment's control is the Expander. It allows its children to be hidden or displayed with a single click.

IsExpanded Property

The Expander control includes a Boolean property named, "IsExpanded". This is true when the control is in its expanded state and false whilst collapsed. You can add the property to the XAML if you want your Expander to be expanded when first viewed. You can also change the property from code to programmatically expand or collapse the control. You might decide to do this from event code behind the window or using data binding, which we'll examine in later articles in the WPF Fundamentals tutorial.

<Expander Header="Show More Information" Grid.Row="1" Grid.Column="1" IsExpanded="True">

ExpandDirection Property

The most common style, and therefore the default option, for an expander organises the control so that the header appears at the top with the expanding area beneath. However, you can change the behaviour to expand upwards or to the left or right instead. You do this by changing the ExpandDirection property. Valid options are Left, Right, Up or Down.

Try changing the XAML for the Expander as shown below. This causes the child controls to appear above the expander.

<Expander Header="Show More Information" Grid.Row="1" Grid.Column="1" ExpandDirection="Up">

The results are as follows. Note that the direction of the arrow on the Expander's button is also changed to shown the new direction of expansion and contraction.

WPF Expander ExpandDirection Example (Expanded)

Expand and Collapse Events

If you need to detect when the user expands or collapses an Expander, and you are using the event model rather than data binding, you can subscribe to the Expanded and Collapsed events. These are raised when the user interacts with the control. You can determine which Expander was used because a reference to the control is passed to the event handler code in the sender parameter.

To subscribe to these events, modify the XAML for the Expander as follows. If you type this XAML, rather than copy and paste it, you might find that Visual Studio wants to provide names for the events automatically and create template code for the handlers. In this case, use the names shown below.

<Expander Header="Show More Information"
          Grid.Row="1"
          Grid.Column="1"
          Expanded="Expand"
          Collapsed="Collapse">

With the XAML in place, we need to add the event code. Switch to the C# class for the window and add the following methods. The first is executed when the Expander is expanded. The second runs when the control is collapsed. In each case the sender object passed to the method is cast as an Expander so that the Header property can be updated.

private void Expand(object sender, RoutedEventArgs e)
{
    ((Expander)sender).Header = "Show Less Information";
}

private void Collapse(object sender, RoutedEventArgs e)
{
    ((Expander)sender).Header = "Show More Information";
}

Try running the program again to see the results.

7 May 2013