.NET 4.0+

WPF Layout Controls - Expander

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

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.

The Expander

The Expander is a standard WPF layout control. The control has two states. In the collapsed state, which is the default, a small header and a button are visible but the child control of the Expander is hidden. When the user clicks the button the Expander grows in order to show its child control. This behaviour makes Expanders particularly useful for hiding information that is not essential, whilst allowing it to be viewed by interested users.

Expander Example

Let's create a simple example. Create a new WPF application project in Visual Studio named, "ExpanderDemo" and replace the XAML of the default window with that shown below.

There are two key aspects to the Expander element in the first example. Firstly, note the use of the Header property. The text in the property will be shown in the Expander in both its expanded and collapsed states. The TextBlock control, which is the Expander's child control, will not be visible initially, as Expanders are collapsed by default.

<Window x:Class="ExpanderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Error"
        Width="370"
        Height="190">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Label FontFamily="Wingdings" FontSize="40" Content="N"/>
        <Label Grid.Column="1"
               FontSize="15"
               FontWeight="Bold"
               VerticalAlignment="Center">Your password is invalid.</Label>
        
        <Expander Header="Show More Information" Grid.Row="1" Grid.Column="1">
            <TextBlock Margin="24 6 0 0">
                Passwords must meet the following requirements.<LineBreak/>
                1. Length must be 12 characters or more.<LineBreak/>
                2. Must include letters, numbers and symbols.<LineBreak/>
                3. Must include upper and lower case letters.
            </TextBlock>
        </Expander>
    </Grid>
</Window>

If you run the program the output appears as shown below:

If you click on the Expander's button or header content the control expands to show the TextBlock hidden within:

Header Property

The Header property can be initialised with plain text, as shown in the above example. For more complex headers, you can replace the Header attribute in the XAML with its equivalent property element syntax. This involves adding extra XML elements for the property and permits you to incorporate any single control in the header. For complex arrangements this may be a layout control with its own children.

Try replacing the Expander's declaration with the following XAML. This shows the same text but applies a colour and a bold effect to the word, "More".

<Expander Grid.Row="1" Grid.Column="1">
    <Expander.Header>
        <TextBlock>
            Show <Run FontWeight="Bold" Foreground="Blue">More</Run> Information
        </TextBlock>
    </Expander.Header>

When you run the updated program the results are as follows: