Expander

An Expander allows a user to view a header and expand that header to see further details, or collapse a section up to a header. The Expander control provides a way to present content in an expandable area that resembles a window and includes a header.

Setting the direction of the expanding content area

You can set the content area of an Expander control to expand in one of four directions: Down, Up, Left, or Right by using the ExpandDirection property. When the content area is collapsed, only the Expander header and its toggle button appear. A Button control that displays a directional arrow is used as a toggle button to expand or collapse the content area. When expanded, the Expander tries to display all of its content in a window-like area.

Controlling the size of an Expander in a panel

If an Expander control is inside a layout control that inherits from Panel, such as StackPanel, don't specify a Height on the Expander when the ExpandDirection property is set to Down or Up. Similarly, don't specify a Width on the Expander when the ExpandDirection property is set to Left or Right.

When you set a size dimension on an Expander control in the direction that the expanded content is displayed, the Expander takes control of the area that is used by the content and displays a border around it. The border shows even when the content is collapsed. To set the size of the expanded content area, set size dimensions on the content of the Expander, or if you want scrolling capability, on the ScrollViewer that encloses the content.

When an Expander control is the last element in a DockPanel, Windows Presentation Foundation (WPF) automatically sets the Expander dimensions to equal the remaining area of the DockPanel. To prevent this default behavior, set the LastChildFill property on the DockPanel object to false, or make sure that the Expander is not the last element in a DockPanel.

Creating scrollable content

If the content is too large for the size of the content area, you can wrap the content of an Expander in a ScrollViewer to provide scrollable content. The Expander control doesn't automatically provide scrolling capability.

When you place an Expander control in a ScrollViewer, set the ScrollViewer dimension property that corresponds to the direction in which the Expander content opens to the size of the Expander content area. For example, if you set the ExpandDirection property on the Expander to Down (the content area opens down), set the Height property on the ScrollViewer control to the required height for the content area. If you instead set the height dimension on the content itself, ScrollViewer doesn't recognize this setting and therefore doesn't provide scrollable content.

Using the alignment properties

You can align content by setting the HorizontalContentAlignment and VerticalContentAlignment properties on the Expander control. When you set these properties, the alignment applies to the header and also to the expanded content.

Styles and templates

You can modify the styles and templates for the Expander control to give the control a unique appearance. For more information, see What are styles and templates? and How to create a template for a control.

Content property

The content property of the Expander is Content, which represents the content displayed in the expanded area of the control.

Parts

The Expander control has the following named part:

Visual states

The following table lists the visual states for the Expander control.

See also

• Expander
• ExpandDirection
• What are styles and templates?
• How to create a template for a control