Expander Control in WPF


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>

1.gif

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"

2.gif


Below is the Image When you click the Expander control.

3.gif

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

4.gif

Thanks for reading my article!

Shakeer
 

Up Next
    Ebook Download
    View all
    Learn
    View all