WPF Expander Control


The expander control reminds me of the FAQ pages on some websites. It’s like an accordian. They have a list of questions down the page and when you click on them they expand to reveal more information below. You can hide/show a piece of content. This would usually be a piece of text, but thanks to the flexibility of WPF, it can be used for any type of mixed content like texts, images and other WPF controls. The Content of the Expander can only be one control, but nothing prevents you from making this a StackPanel for example, which can then hold as many child controls as you want it to. This allows you to host rich content inside your Expander, from text and images to a ListView or any other WPF control.

The Expander defines the IsExpanded property and Expanded/Collapsed events. It enables you to control the direction to which the expansion happens with an ExpandDirection property.

Below is a screenshot of a small sample project and the XAML and code-behind.

<Window x:Class="ExpanderControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ExpanderControl"
        mc:Ignorable="d"
        Title="ExpanderControl" Height="450" Width="600">
    <StackPanel>
        <Expander Margin="10">
            <Expander.Header>
                <DockPanel VerticalAlignment="Stretch">
                    <Rectangle Fill="Green" DockPanel.Dock="Left" Height="8" Width="8"/>
                    <TextBlock FontStyle="Italic" Foreground="Green"
                               Text=" What is an Expander Control in WPF?"></TextBlock>
                </DockPanel>
            </Expander.Header>
            <TextBlock TextWrapping="Wrap" FontSize="14">
        The Expander control is a bit like GroupBox but it has a button that enables the user to expand
                and collapse the inner content. By default, Expander is <Span FontWeight="Bold">collapsed.</Span> 
                Expanders can have headers and 
                this header has a DockPanel that has a Rectangle and a TextBlock inside it. 
                What you are reading right now is text inside a TextBlock with TextWrapping set to Wrap.
                The FontSize is set to 14.<LineBreak /><LineBreak /> 
                Here is the really cool part. You don't have to have just plain text here. You could
                have a CheckBox for example. As a side note, I was able to put 2 line breaks in this text with
                &lt;LineBreak 	&#47;&gt;. How was I able to show the less than, slash and greater than symbols?
                I used HTML character entities (they use ampersand and a semi-colon). How was I able to make the 
                word collapsed bold in the above paragraph? <LineBreak />
                &lt;Span FontWeight="Bold"&gt;collapsed.&lt;&#47;Span&gt;
            </TextBlock>
        </Expander>
        <Expander Margin="10">
            <Expander.Header>
                <DockPanel VerticalAlignment="Stretch">
                    <Rectangle Fill="Green" DockPanel.Dock="Left" Height="8" Width="8"/>
                    <TextBlock FontStyle="Italic" Foreground="Green"
                               Text=" Where can I learn more about Expander?"></TextBlock>
                </DockPanel>
            </Expander.Header>
            <TextBlock TextWrapping="Wrap" FontSize="14">
                  You can look at this site, begincodingnow.com or try online.
                For example there is an introductory article at WPF Tutorial.
                <Hyperlink NavigateUri="https://www.wpf-tutorial.com/misc-controls/the-expander-control/" 
                           RequestNavigate="Hyperlink_RequestNavigate">
                The Expander Control (at wpf-tutorial.com)
            </Hyperlink>
                
            </TextBlock>
        </Expander>
        <Expander Margin="10">
            <Expander.Header>
                <DockPanel VerticalAlignment="Stretch">
                    <Rectangle Fill="Green" DockPanel.Dock="Left" Height="8" Width="8"/>
                    <TextBlock FontStyle="Italic" Foreground="Green"
                               Text=" Another question..."></TextBlock>
                </DockPanel>
            </Expander.Header>
            <TextBlock TextWrapping="Wrap" FontSize="14">
            </TextBlock>
        </Expander>
    </StackPanel>
</Window>

Below is the expander control.

using System.Windows;
using System.Windows.Navigation;
using System.Diagnostics;
namespace ExpanderControl
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        public void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
        {
            Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
            e.Handled = true;
        }
    }
}