Expander Control

The Expander Control provides an expandable container to host any content. You can show or hide this content by toggling a Header.

You can use these properties :

  • Header
  • HeaderTemplate
  • IsExpanded (define if the content is visible or not)

You can also use these events :

  • Expanded (fires when the expander is opened)
  • Collapsed (fires when the expander is closed)

Syntax


<controls:Expander Header="Header of the expander"
                   IsExpanded="True">
    <Grid Height="250" Background="#FFF5F1D9">
        <TextBlock HorizontalAlignment="Center"
                   TextWrapping="Wrap"
                   Text="This is the content"
                   VerticalAlignment="Center" />
    </Grid>
</controls:Expander>       

Example Image

Expander animation

Example Code

Expander Sample Page

Default Template

Expander XAML File is the XAML template used in the toolkit for the default styling.

Requirements (Windows 10 Device Family)

Device family Universal, 10.0.10586.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls

API