.NET MAUI Accordion Animation

Telerik .NET MAUI Accordion provides an option to set the animation when expanding/collapsing an accordion item.

Animation while expanding/collapsing

To enable or disable the animation you need to use the IsAnimationEnabled property of RadAccordion. By default, the Animation is enabled.

You can also customize the duration and easing through AnimationDuration and AnimationEasing properties.

• AnimationDuration(int)—Defines the duration of the animation while expanding/collapsing the AccordionItem. The default value is 500.
• AnimationEasing(Microsoft.Maui.Easing)—Specifies animation acceleration over time. The default value is Easing.Linear.

Example

The snippet below shows how the AnimationDuration, AnimationEasing properties can be applied:

<telerik:RadAccordion CanCollapseAllItems="True"
                      CanExpandMultipleItems="True"
                      AnimationDuration="1500"
                      AnimationEasing="{Static Easing.SpringOut}"
                      Spacing="5">
    <telerik:AccordionItem HeaderText="Attachments" IsExpanded="True">
        <telerik:AccordionItem.Content>
            <Button Text="Attach files" FontSize="20" Margin="10" />
        </telerik:AccordionItem.Content>
    </telerik:AccordionItem>
    <telerik:AccordionItem HeaderText="Comments">
        <telerik:AccordionItem.Content>
            <Label Text="Add your comment here" Margin="30" />
        </telerik:AccordionItem.Content>
    </telerik:AccordionItem>
    <telerik:AccordionItem HeaderText="Rating">
        <telerik:AccordionItem.Content>
            <telerik:RadShapeRating x:Name="rating" Margin="20" />
        </telerik:AccordionItem.Content>
    </telerik:AccordionItem>
</telerik:RadAccordion>

The image below shows the result after running the snippet:

And the RadAccordion when all items are collapsed:

For the Accordion Animation example refer to the SDKBrowser Demo Application.

See Also

• AccordionItem
• Expand and Collapse states
• Item spacing