Expander, WPF. In WPF an Expander control has an arrow button. When the arrow is clicked, the elements within the Expander are shown or hidden.
Control notes. When clicked, the arrow "expands" the control so its sub-controls are visible. This explains why the control is called an Expander.
An example. We can add elements inside an Expander—these will be hidden or shown by the Expander arrow. Here I added a TextBlock element to the Expander.
Note I modified the "Header" attribute of the Expander element. The Expander here shows a description when it is clicked.
Detail I modified the IsExpanded attribute to be false. This means when the program is started, the description is not visible.
Detail On the TextBlock, I modified the "Text" property and the "Margin" property—these are not important.
<Window x:Class="WpfApplication17.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>
<Expander Header="Description"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
IsExpanded="False"
Height="299"
Width="497">
<TextBlock TextWrapping="Wrap"
Text="This is some text content."
Margin="5"/>
</Expander>
</Grid>
</Window>
Expanded, Collapsed. The Expanded event is triggered when the arrow button is pressed. And the Collapsed event is run when the controls are hidden again.
Info In Expanded, we get the Expander from the sender object. We assign our Title to the value of the Header attribute on the Expander.
Detail In this event handler, we set the Window Title to "Collapsed." I never said this program was useful.
<Expander Header="Description"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
IsExpanded="False"
ExpandDirection="Right"
Expanded="Expander_Expanded"
Collapsed="Expander_Collapsed"
Height="299"
Width="497">using System.Windows;
using System.Windows.Controls;
namespace WpfApplication17
{
/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
// ... Set Window Title to Expander Header value.
var expander = sender as Expander;
this.Title = expander.Header.ToString();
}
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
// ... Change Window Title.
this.Title = "Collapsed";
}
}
}
ExpandDirection. This can be set to Down, Left, Right or Up. As you might expect, the arrow changes to point in the specified direction. Then, the content expands in that area.
A summary. An Expander helps reduce the visual complexity of some interfaces. If a section of controls is complex, it can be hidden when not needed.
Dot Net Perls is a collection of tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Sep 25, 2022 (edit).
