Rock Mobile Docs

Expander

Inherits from Microsoft.Maui.Controls.ContentView

The expander allows you to display two stacked views. A header view and then a content view. When the Expander is collapsed, the content is hidden. When expanded, it's shown. And then when tapping on the header it will toggle the state of the Expander.

Before shell v6, animations were used to show and hide content. However, properties related to animations will no longer work in shell v6 and later.

Properties

PropertyTypeDescription
ContentViewThe content that will be displayed when expanded. This is the default property so it can be omitted when creating child elements.
ContentTemplateDataTemplateThis will also provide content to be displayed but it doesn't create the views until they are needed. If your expanded content is rather heavy you might consider using this to improve initial page load performance.
HeaderViewThe view that will make up the header of the expander. This is what will respond to tap events.
IsExpandedboolAllows you to set the initial state of the expander. Defaults to false.
DirectionExpandDirectionWhich direction the expander will expand in. Defaults to Down.
ExpandAnimationLengthintThe duration of the expand animation in milliseconds. Defaults to 250.
CollapseAnimationLengthintThe duration of the collapse animation in milliseconds. Defaults to 250.
ExpandAnimationEasingEasingThe easing function to use when performing the animation. Defaults to Linear.
CollapseAnimationEasingEasingThe easing function to use when performing the animation. Defaults to Linear.

Expand Direction

ValueDescription
DownExpands down below the header.
UpExpands up above the header.
LeftExpands to the left of the header.
RightExpands to the right of the header.

Example

<Rock:Expander>
    <Rock:Expander.Header>
        <Label Text="Tap for details" />
    </Rock:Expander.Header>
    <StackLayout>
        <Label Text="Some details about this event." />
        <Button Text="Register" StyleClass="btn btn-primary" />
    </StackLayout>
</Rock:Expander>