expander.md

description
REFERENCE - Built-in Controls

import ExpanderClosedScreenshot from '/img/reference/controls/expander/expander-closed.png'; import ExpanderOpenedScreenshot from '/img/reference/controls/expander/expander-opened.png';

Expander

The expander control has a header area (always visible) and a collapsible content section that can contain a single child control.

Useful Properties

You will probably use these properties most often:

Property	Description
Expander.Header	Defines what appears in the header area.

Example

<Expander VerticalAlignment="Top">
    <Expander.Header>
        Hidden Search
    </Expander.Header>
    <Grid RowDefinitions="*,*" ColumnDefinitions="150,*">
        <TextBlock Grid.Row="0" Grid.Column="0"
                   VerticalAlignment="Center">Search</TextBlock>
        <TextBox Grid.Row="0" Grid.Column="1"
                 Watermark="Search text" Width="200" />
        <TextBlock Grid.Row="1" Grid.Column="0"
                   VerticalAlignment="Center">Case sensitive?</TextBlock>
        <CheckBox Grid.Row="1" Grid.Column="1" />
    </Grid>
</Expander>

More Information

:::info For the complete API documentation about this control, see here. :::

:::info View the source code on GitHub Expander.cs :::