HomeSearch

WPF Expander Control: Expanded, Collapsed

Use the WPF Expander control to show or hide controls. See the effect of ExpandDirection.

Expander.

An Expander control has an arrow button. When the arrow is clicked, the elements within the Expander are shown or hidden. The arrow "expands" the control so its sub-controls are visible. We use Expander with a TextBlock.

Example.

Please drag an Expander control to your WPF Window. Next, we can add elements inside the 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.

IsExpanded: I modified the IsExpanded attribute to be false. This means when the program is started, the description is not visible.

TextBlock: On the TextBlock, I modified the "Text" property and the "Margin" property—these are not important.

Example markup: XAML <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>

ExpandDirection.

One important option on the Expander is the 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.

Here: In the screenshot, I used an ExpandDirection of Right. The TextBlock appears to the right after the arrow is clicked.

Expanded, Collapsed.

Two events are key to the Expander control. The Expanded event is triggered when the arrow button is pressed. And the Collapsed event is run when the controls are hidden again. In Expanded, we get the Expander from the sender object.

Then: We assign the Window Title to the value of the Header attribute on the Expander element.

Collapsed: In this event handler, we set the Window Title to "Collapsed." I never said this program was useful.

Example markup 2: XAML <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"> Example code 2: C# 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"; } } }

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. We use the Expander to encapsulate these sub-controls, and show them only when required.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.