TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

WPF Expander Control: Expanded, Collapsed

This WPF example uses the Expander control. An Expander shows, or hides, its sub-controls. It has a Header and an IsExpanded property.

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.

Based on:

.NET 4.5

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.

TextBlock

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.

Window

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.


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf