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