Key Features

The purpose of this help article is to show you the key features of the RadAccordion control.

Collapsed/expanded States

In the Accordion control each item provides a header that expands when clicked, showing more information. The control is designed in such a way that opening one AccordionItem automatically closes the previously displayed content.

There is always only one expanded item at a time indicated by IsExpanded property.

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 could 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 (Xamarin.Forms.Easing): Specifies animation acceleration over time. The default value is Easing.Linear.

Spacing between items

Through Spacing(double) property you could specify the distance between the Accordion items. The default value is 0.

Example

The snippet below shows how to set the AnimationDuration, AnimationEasing and Spacing properties:

<telerikPrimitives:RadAccordion AnimationDuration="1500"
                                AnimationEasing="SpringOut"
                                Spacing="5">
    <telerikPrimitives:AccordionItem HeaderText="Attachments" IsEnabled="True">
        <telerikPrimitives:AccordionItem.Content>
            <Button Text="Attach files" FontSize="20" Margin="10" />
        </telerikPrimitives:AccordionItem.Content>
    </telerikPrimitives:AccordionItem>
    <telerikPrimitives:AccordionItem HeaderText="Comments">
        <telerikPrimitives:AccordionItem.Content>
            <Label Text="Add your comment here" Margin="30" />
        </telerikPrimitives:AccordionItem.Content>
    </telerikPrimitives:AccordionItem>
    <telerikPrimitives:AccordionItem HeaderText="Rating">
        <telerikPrimitives:AccordionItem.Content>
            <telerikInput:RadShapeRating x:Name="rating" Margin="20"/>
        </telerikPrimitives:AccordionItem.Content>
    </telerikPrimitives:AccordionItem>
</telerikPrimitives:RadAccordion>

A sample Key Features example can be found in the Accordion/Features folder of the SDK Samples Browser application.

See Also

In this article
Not finding the help you need? Improve this article