maui-404977-utility-controls-expander.md
The DevExpress DXExpander component for .NET MAUI is a container that can expand and collapse any content in both horizontal and vertical directions.
Download and install the DevExpress.Maui.Core package from the DevExpress NuGet Gallery to obtain the DXExpander component. For more information on how to build your first .NET MAUI app, refer to the following help topic: Get Started.
The following code snippet adds a DXExpander instance to a ContentPage:
<ContentPage ...
xmlns:dx="http://schemas.devexpress.com/maui">
<dx:DXDockLayout StretchLastItem="False">
<dx:DXButton
dx:DXDockLayout.Dock="Top"
ButtonType="Accent"
Content="Show/Hide"
Command="{Binding Source={x:Reference expander}, Path=Commands.ToggleExpandState}" />
<dx:DXExpander
x:Name="expander"
dx:DXDockLayout.Dock="Bottom"
VerticalExpandMode="FromStartToEnd">
<dxc:DXToolbar ItemAlignment="Center">
<dxc:ToolbarText Content="Toolbar"/>
</dxc:DXToolbar>
</dx:DXExpander>
</dx:DXDockLayout>
</ContentPage>
Use the IsExpanded property to specify whether content is visible (in the expanded state). If you want to stretch content to occupy the entire available space within the container, enable the StretchContent property.
To expand and collapse content at runtime, call the SetIsExpanded(Boolean, Boolean) method. This method changes the IsExpanded property value, and has an optional parameter that enables animation effects.
You can also use the ToggleExpandState command to change the DXExpander state.
Use HorizontalExpandMode and VerticalExpandMode properties to define horizontal and vertical animation effects applied to the control during expand and collapse operations. The ExpandMode enum lists the following values:
FromStartToEnd - reveals content from start to end.
FromEndToStart - reveals content from end to start.
FromCenter - reveals content from its center to its edges.
None - no animation effect (animation in another direction may be enabled).
To play an animation when the control is displayed for the first time, enable the AllowStartupAnimation property.
Use the following properties to expand and collapse a DXExpander component with the opacity animation effect:
AllowOpacityAnimationGets or sets whether to show and hide content with the opacity animation effect. This is a bindable property.ExpandedOpacityGets or sets the control opacity in the expanded state. This is a bindable property.CollapsedOpacityGets or sets the control opacity in the collapsed state. This is a bindable property.AnimationDurationGets or sets the duration of the animation. This is a bindable property.