Export (0) Print
Expand All

SimpleExpander

This page applies to WPF projects only

The expander is a headered content control that displays both a header and a collapsible window, which displays content. You can title an expander in Microsoft Expression Blend by modifying the Header property. You can place content in an expander by double-clicking the expander and then drawing an object in it. If you want to place multiple objects into an expander, you have to first add in a layout panel such as a Grid or Canvas. An expander also can display text by default; you can edit the text by right-clicking the expander, and then clicking Edit Text. To view the expander on the artboard while it is expanded, you can right-click the expander in the Objects and Timeline panel, and then click Expand Expander.

The artboard view of a SimpleExpander control

Cc294637.c43eef70-9797-41b2-af94-b3470f88c6c6(en-us,Expression.40).png

Breaking down the control template

The SimpleExpander control template consists of the following items:

  • A Grid layout panel   Required to hold the multiple children within the expander. The Grid layout panel is also used because it makes it easier for an application user interface (UI) designer to add more objects to the template. The Grid layout panel is divided into two areas: the Border area that represents the header, and the ExpandSite area that represents the content.

  • A Border element   Used because it includes a BorderThickness property that can be template-bound to the BorderThickness property of the expander control to which this template is applied.

  • A ToggleButton element   Contained within the Border object, expands and collapses the expander.

  • A ContentPresenter element   Contained within the Border object, automatically bound to the Header property of the expander control to which this template is applied.

  • A ContentPresenter under the ExpandSite area   Used to display the Content property of the expander to which this template is applied. Both ContentPresenter objects must be present to make the expander work as expected.

Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the items in the Triggers panel to view the properties that are changed when a trigger is active. For example, in the SimpleExpander template, when the IsExpanded property becomes True, the ExpandSite area becomes visible.

Brushes used

The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleExpander template:

  • The Background property is set by using the LightBrush when no trigger is active, and by using the DisabledBackgroundBrush when IsEnabled is False.

  • The BorderBrush property is set by using the NormalBorderBrush when no trigger is active, and by using the DisabledBorderBrush when IsEnabled is False.

  • The Background property of the Border object is set by using the NormalBrush when no trigger is active.

  • The Background property of the ExpandSite object is set by using the WindowBackgroundBrush when no trigger is active.

  • The BorderBrush property of the ExpandSite object is set by using the SolidBorderBrush when no trigger is active.

  • The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.

Best practices and design guidelines

  • In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new objects that are added to the artboard end up as child objects of the layout panel.

  • Because the expander has two ContentPresenter objects (one for the header and one for the content), the ContentPresenter in the header has to be explicitly set to the class of the control. To do this, set the ContentSource property of the ContentPresenter object (in the Border node of the template) to Header.

  • The ToggleButton object uses a separate template named ExpanderToggleButton. To modify this, right-click the ToggleButton object, point to Edit Template, and then click Edit Current or Edit Copy. The ToggleButton is connected to the rest of the expander by a binding between IsChecked on the ToggleButton and IsExpanded on the expander. For this property to be correctly updated, you have to keep this binding, because the two-way binding allows you to programmatically expand the expander.

  • By default, the ExpandSite area is collapsed and is made visible by a trigger. Because the trigger references the ExpandSite object by name, you have to also update the IsExpanded trigger if you change or replace the ExpandSite object.

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft