Expander

Inherits from Xamarin.Forms.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.

What makes this nice is that the Expander uses an animation to show and hide the content. This provides a much nicer user experience versus just having the content suddenly appear or disappear.

Properties

Property	Type	Description
Content	View	The content that will be displayed when expanded. This is the default property so it can be omitted when creating child elements.
ContentTemplate	DataTemplate	This 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.
Header	View	The view that will make up the header of the expander. This is what will respond to tap events.
IsExpanded	bool	Allows you to set the initial state of the expander. Defaults to false.
Direction	ExpandDirection	Which direction the expander will expand in. Defaults to Down.
ExpandAnimationLength	int	The duration of the expand animation in milliseconds. Defaults to 250.
CollapseAnimationLength	int	The duration of the collapse animation in milliseconds. Defaults to 250.
ExpandAnimationEasing	Easing	The easing function to use when performing the animation. Defaults to Linear.
CollapseAnimationEasing	Easing	The easing function to use when performing the animation. Defaults to Linear.

Expand Direction

Value	Description
Down	Expands down below the header.
Up	Expands up above the header.
Left	Expands to the left of the header.
Right	Expands 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>