How to use Expander Control: WPF

Expander control is most often used to represent data in a hierarchical view, in which a parent can be expanded or collapsed. It can only be used to expand or collapse a single item whether it is textbox, label or a grid (having multiple child controls). Just drag-n-drop it from the toolbox or write <Expander/> in XAML code to add an expander.

It has a symbol (left of the control) to expand or collapse the data contained in it. As in Visual Studio the toolbox have some categories of control i.e. Common controls and all controls which can be shown using this expander control. The following code is used to show an expander with three items:

<Expander Header="Labels">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="First Label"/>
<Label Grid.Row="1" Content="Second Label"/>
<Label Grid.Row="2"  Content="Third Label"/>
</Grid>
</Expander>

It will show an expander with header Labels and it is collapsed by default:

To expand these labels just click on the icon on the left and this will expanded. To expand this by default you have to set IsExpanded property to true.

In the above code, I have used a grid view as the child element of the expander, you can use as you want. In the image the labels are just below the header. We can put some space using the margin property of the controls, as in our visual studio toolbox.

Expand direction can also be changed according to the user by using ExpandDirection property. If we want some function to be execute when it is expand then we can write that in the expanded event of this control.

private void Expander_Expanded(object sender, RoutedEventArgs e)
{
MessageBox.Show("It is Expanded");
}

The above code will show a message each time when the control is expanded.