Expander, WPF

In WPF an Expander control has an arrow button. When the arrow is clicked, the elements within the Expander are shown or hidden.

When clicked, the arrow "expands" the control so its sub-controls are visible. This explains why the control is called an Expander.

An example

We can add elements inside an Expander—these will be hidden or shown by the Expander arrow. Here I added a TextBlock element to the Expander.

<Window x:Class="WpfApplication17.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Expander Header="Description"
                  HorizontalAlignment="Left"
                  Margin="10,10,0,0"
                  VerticalAlignment="Top"
                  IsExpanded="False"
                  Height="299"
                  Width="497">
            <TextBlock TextWrapping="Wrap"
                       Text="This is some text content."
                       Margin="5"/>
        </Expander>
    </Grid>
</Window>

Expanded, Collapsed

The Expanded event is triggered when the arrow button is pressed. And the Collapsed event is run when the controls are hidden again.

<Expander Header="Description"
          HorizontalAlignment="Left"
          Margin="10,10,0,0"
          VerticalAlignment="Top"
          IsExpanded="False"
          ExpandDirection="Right"
          Expanded="Expander_Expanded"
          Collapsed="Expander_Collapsed"
          Height="299"
          Width="497">
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication17
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Expander_Expanded(object sender, RoutedEventArgs e)
        {
            // ... Set Window Title to Expander Header value.
            var expander = sender as Expander;
            this.Title = expander.Header.ToString();
        }

        private void Expander_Collapsed(object sender, RoutedEventArgs e)
        {
            // ... Change Window Title.
            this.Title = "Collapsed";
        }
    }
}

ExpandDirection

This can be set to Down, Left, Right or Up. As you might expect, the arrow changes to point in the specified direction. Then, the content expands in that area.

An Expander helps reduce the visual complexity of some interfaces. If a section of controls is complex, it can be hidden when not needed.