Expander
Last updated
Last updated
Inherits from
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.
Content
The content that will be displayed when expanded. This is the default property so it can be omitted when creating child elements.
ContentTemplate
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
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
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
The easing function to use when performing the animation. Defaults to Linear.
CollapseAnimationEasing
The easing function to use when performing the animation. Defaults to Linear.
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.