#507 – Expander Control Lets you Expand/Collapse a Set of Controls

You can use an Expander control to hide a set of controls.  When you click on the Expander, the hidden controls are shown.  When you click again, they are hidden again.

The Expander control is a ContentControl, so contains a single child element.  This is typically a panel control, so that you can then include multiple controls in the panel.

    <StackPanel>
        <Expander Header="Goals" Margin="10" >
            <StackPanel Orientation="Vertical">
                <CheckBox Content="Read Ulysses"/>
                <CheckBox Content="Visit Bruges"/>
                <CheckBox Content="Take out the trash"/>
            </StackPanel>
        </Expander>
        <Label Content="Next guy in vertical StackPanel is down here"/>
    </StackPanel>

Notice that when the Expander is expanded, it takes up more room in the container (a StackPanel in this example) and other child elements are shifted.