Expander Control in WPF

The Expander control is like a GroupBox but with the additional feature to collapse and expand its content.

The Expander control is like a GroupBox but with the additional feature to collapse and expand its content. It derives from HeaderedContentControl so it has a Header property to set the header content, and a Content property for the expandable content.

It has a IsExpanded property to get and set if the expander is in expanded or collapsed state.

In collapsed state the expander takes only the space needed by the header. In expanded state it takes the size of header and content together.

Creating Expander Control .Xaml

Expander can be created by using Expander Element.

<Expander Header="Click here to see Image" Width="250" Foreground="Blue" >            

</Expander>

Header Property: Header Property is used for setting the content or text of a Expander Element.

<Expander Header="Expander Header Text">            

</Expander>

<Window x:Class="ExpanderWPF.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>
        <StackPanel Background="AntiqueWhite">
            <Expander Header="Click here to see Image" Width="250" Foreground="Blue" >             
                    <Image Source="G:\ImageName.jpg"  Width="200"/>                              
            </Expander>
        </StackPanel>
    </Grid>
</Window>

By default the Expander Bullet button FlowDirection is LeftToRight.You can set the Expander Bullet direction to Right by setting FlowDirection Property to RightToLeft.

  <Expander Header="Click here to see Image" FlowDirection="RightToLeft" >                 
  </Expander>

Below is the Image of FlowDirection="RightToLeft"

Below is the Image When you click the Expander control.



Setting ScrollBar in Expander Control

You can set the ScrollBar in Expander Control by using ScrollBarViewr Element as follows

  <Expander Header="Click here to see Image" Width="250" Foreground="Blue" >                 

    <ScrollViewer Height="150">
        <Image Source="G:\ImageName.jpg" Width="200"/>

    </ScrollViewer>               

  </Expander>

Below is the Image of Expander with ScrollViewer



Thanks for reading my article!

Shakeer