Class SfAccordion

Represents a collapsible accordion control that displays a list of expandable items.

Inheritance

System.Object

AccordionLayout

SfAccordion

Inherited Members

AccordionLayout.InvalidateMeasure()

Namespace: Syncfusion.Maui.Toolkit.Accordion

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class SfAccordion : AccordionLayout, IParentThemeElement, IThemeElement, IKeyboardListener

Remarks

The SfAccordion control allows you to organize content into collapsible sections called items. Each item can be expanded or collapsed to show or hide its associated content.

Constructors

SfAccordion()

Initializes a new instance of the SfAccordion class and initializes the default values of its members.

Declaration

public SfAccordion()

Fields

AnimationDurationProperty

Identifies the AnimationDuration bindable property.

Declaration

public static readonly BindableProperty AnimationDurationProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The AnimationDurationProperty determines the duration of animations within the control.

AnimationEasingProperty

Identifies the AnimationEasing bindable property.

Declaration

public static readonly BindableProperty AnimationEasingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The AnimationEasingProperty determines the easing function used for animations in the control.

AutoScrollPositionProperty

Identifies the AutoScrollPosition bindable property.

Declaration

public static readonly BindableProperty AutoScrollPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The AutoScrollPositionProperty determines the automatic scroll position within the control.

ExpandModeProperty

Identifies the ExpandMode bindable property.

Declaration

public static readonly BindableProperty ExpandModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ExpandModeProperty determines the mode of expansion or collapse behavior within the control.

HeaderIconPositionProperty

Identifies the HeaderIconPosition bindable property.

Declaration

public static readonly BindableProperty HeaderIconPositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The HeaderIconPositionProperty determines the location of the header icon within the control. This bindable property is read-only.

ItemSpacingProperty

Identifies the ItemSpacing bindable property.

Declaration

public static readonly BindableProperty ItemSpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ItemSpacingProperty determines the spacing between items within the control.

ItemsProperty

Identifies the Items bindable property.

Declaration

public static readonly BindableProperty ItemsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ItemsProperty determines the collection of items contained within the control.

Properties

AnimationDuration

Gets or sets the duration of the animation when expanding or collapsing the AccordionItem.

Declaration

public double AnimationDuration { get; set; }

Property Value

Type	Description
System.Double	A duration, in milliseconds, for the expand and collapse animation. The default value is 200 milliseconds.

Remarks

The animation duration determines how long it takes for accordion items to transition between expanded and collapsed states, enhancing the user experience by providing a smooth visual effect.

Examples

Here is an example of how to set the AnimationDuration property:

XAML
C#

<syncfusion:SfAccordion AnimationDuration="1000">
</syncfusion:SfAccordion>

var accordion = new SfAccordion();
accordion.AnimationDuration = 1000;

AnimationEasing

Gets or sets the ExpanderAnimationEasing function applied to the animation when expanding or collapsing an item in the accordion.

Declaration

public ExpanderAnimationEasing AnimationEasing { get; set; }

Property Value

Type	Description
ExpanderAnimationEasing	An ExpanderAnimationEasing value that specifies the easing function for the expansion and collapse animations. The default value is Linear.

Remarks

An easing function determines the speed progression of an animation, allowing for effects such as acceleration and deceleration.

Examples

Here is an example of how to set the AnimationEasing property:

XAML
C#

<syncfusion:SfAccordion AnimationEasing="SinIn">
</syncfusion:SfAccordion>

var accordion = new SfAccordion();
accordion.AnimationEasing = ExpanderAnimationEasing.SinIn;

AutoScrollPosition

Gets or sets the value to specify the scroll position of the expanded AccordionItem.

Declaration

public AccordionAutoScrollPosition AutoScrollPosition { get; set; }

Property Value

Type	Description
AccordionAutoScrollPosition	An AccordionAutoScrollPosition value that specifies how the expanded item is scrolled into view. The default value is MakeVisible.

Remarks

The AccordionAutoScrollPosition property determines the scroll behavior for an expanded accordion item, ensuring that it is appropriately positioned within the visible area of the control.

Examples

Here is an example of how to set the AutoScrollPosition property:

XAML
C#

<syncfusion:SfAccordion AutoScrollPosition="Top">
</syncfusion:SfAccordion>

var accordion = new SfAccordion();
accordion.AutoScrollPosition = AccordionAutoScrollPosition.Top;

ExpandMode

Gets or sets a value that indicates whether an end-user can expand a single or multiple accordion items.

Declaration

public AccordionExpandMode ExpandMode { get; set; }

Property Value

Type	Description
AccordionExpandMode	An AccordionExpandMode value that organizes the expand and collapse state of the accordion items. The default value is Single.

Remarks

The AccordionExpandMode property allows the accordion to be configured so that either only a single item can be expanded at a time, or multiple items can be expanded simultaneously.

Examples

Here is an example of how to set the ExpandMode property:

XAML
C#

<syncfusion:SfAccordion ExpandMode="Multiple">
</syncfusion:SfAccordion>

var accordion = new SfAccordion();
accordion.ExpandMode = AccordionExpandMode.Multiple;

HeaderIconPosition

Gets or sets the ExpanderIconPosition of the header icon in the AccordionItem.

Declaration

public ExpanderIconPosition HeaderIconPosition { get; set; }

Property Value

Type	Description
ExpanderIconPosition	An ExpanderIconPosition value that determines the position of the header icon. The default value is End.

Remarks

The ExpanderIconPosition property allows customization of the position of the header icon within the accordion item.

Examples

Here is an example of how to set the HeaderIconPosition property:

XAML
C#

<syncfusion:SfAccordion HeaderIconPosition="Start">
</syncfusion:SfAccordion>

var accordion = new SfAccordion();
accordion.HeaderIconPosition = ExpanderIconPosition.Start;

Items

Gets or sets the collection of AccordionItem in the SfAccordion control.

Declaration

public ObservableCollection<AccordionItem> Items { get; set; }

Property Value

Type	Description
System.Collections.ObjectModel.ObservableCollection<AccordionItem>	An observable collection of AccordionItem that represents the items contained in the accordion. The default value is null.

Remarks

Allows the inclusion of multiple accordion items within the SfAccordion control, where each item can have customized headers and content areas.

Examples

Here is an example of how to define items within the SfAccordion control:

XAML
C#

<syncfusion:SfAccordion>
    <syncfusion:SfAccordion.Items>
        <syncfusion:AccordionItem>
            <syncfusion:AccordionItem.Header>
                <Grid>
                    <Label TextColor="#495F6E"
                           Text="Cheese burger"
                           HeightRequest="50"
                           VerticalTextAlignment="Center" />
                </Grid>
            </syncfusion:AccordionItem.Header>
            <syncfusion:AccordionItem.Content>
                <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF">
                    <Label TextColor="#303030"
                           Text="Hamburger accompanied with melted cheese. The term itself is a portmanteau of the words cheese and hamburger. The cheese is usually sliced, then added a short time before the hamburger finishes cooking to allow it to melt."
                           VerticalTextAlignment="Center" />
                </Grid>
            </syncfusion:AccordionItem.Content>
        </syncfusion:AccordionItem>
    </syncfusion:SfAccordion.Items>
</syncfusion:SfAccordion>

var sfAccordion = new SfAccordion();
var accordionItem = new AccordionItem();
var headerGrid = new Grid();
var headerLabel = new Label
{
    TextColor = Color.FromArgb("#495F6E"),
    Text = "Cheese burger",
    HeightRequest = 50,
    VerticalTextAlignment = TextAlignment.Center
};
headerGrid.Children.Add(headerLabel);
accordionItem.Header = headerGrid;

var contentGrid = new Grid { Padding = new Thickness(10) };
var contentLabel = new Label
{
    TextColor = Color.FromArgb("#303030"),
    Text = "Hamburger accompanied with melted cheese. The term itself is a portmanteau of the words cheese and hamburger. The cheese is usually sliced, then added a short time before the hamburger finishes cooking to allow it to melt.",
    VerticalTextAlignment = TextAlignment.Center
};
contentGrid.Children.Add(contentLabel);
accordionItem.Content = contentGrid;

sfAccordion.Items.Add(accordionItem);

ItemSpacing

Gets or sets the spacing between the items in the SfAccordion.

Declaration

public double ItemSpacing { get; set; }

Property Value

Type	Description
System.Double	A System.Double value representing the space between each accordion item. The default value is 6.0d.

Remarks

The spacing property determines the amount of space that appears between adjacent accordion items.

Examples

Here is an example of how to set the ItemSpacing property:

XAML
C#

<syncfusion:SfAccordion ItemSpacing="10.0">
</syncfusion:SfAccordion>

var accordion = new SfAccordion();
accordion.ItemSpacing = 10.0;

Methods

BringIntoView(AccordionItem)

Brings the specified AccordionItem into view by scrolling.

Declaration

public void BringIntoView(AccordionItem item)

Parameters

Type	Name	Description
AccordionItem	item	The AccordionItem to scroll into view.

CreateLayoutManager()

Method used to create the accordion layout manager.

Declaration

protected override ILayoutManager CreateLayoutManager()

Returns

Type	Description
Microsoft.Maui.Layouts.ILayoutManager	An instance of Syncfusion.Maui.Toolkit.Accordion.AccordionLayoutManager for this control.

MeasureOverride(Double, Double)

Method used to measure the accordion layout children based on width and height value.

Declaration

protected override Size MeasureOverride(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint	The maximum width request of the layout.
System.Double	heightConstraint	The maximum height request of the layout.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	The required size of the layout.

OnChildAdded(Element)

Invoked when a child element is added to the layout.

Declaration

protected override void OnChildAdded(Element child)

Parameters

Type	Name	Description
Microsoft.Maui.Controls.Element	child	The child Microsoft.Maui.Controls.Element that has been added.

OnCommonThemeChanged(String, String)

Method invokes at whenever common theme changes.

Declaration

public void OnCommonThemeChanged(string oldTheme, string newTheme)

Parameters

Type	Name	Description
System.String	oldTheme	Represents the old theme.
System.String	newTheme	Represents the new theme.

OnControlThemeChanged(String, String)

Method invokes when control theme changes.

Declaration

public void OnControlThemeChanged(string oldTheme, string newTheme)

Parameters

Type	Name	Description
System.String	oldTheme	Represents the old theme.
System.String	newTheme	Represents the new theme.

OnHandlerChanged()

Raised when handler gets changed.

Declaration

protected override void OnHandlerChanged()

OnPropertyChanged(String)

Called whenever a property value changes of SfAccordion.

Declaration

protected override void OnPropertyChanged(string propertyName = null)

Parameters

Type	Name	Description
System.String	propertyName	The name of the property that changed.

RaiseCollapsedEvent(Int32)

Raises the collapsed event for the specified item index.

Declaration

protected void RaiseCollapsedEvent(int index)

Parameters

Type	Name	Description
System.Int32	index	The index of the item that has collapsed.

RaiseCollapsingEvent(Int32)

Raises the collapsing event for the specified item index.

Declaration

protected bool RaiseCollapsingEvent(int index)

Parameters

Type	Name	Description
System.Int32	index	The index of the item that is collapsing.

Returns

Type	Description
System.Boolean	A boolean value indicating whether the collapsing action should be canceled.

RaiseExpandedEvent(Int32)

Raises the expanded event for the specified item index.

Declaration

protected void RaiseExpandedEvent(int index)

Parameters

Type	Name	Description
System.Int32	index	The index of the item that has expanded.

RaiseExpandingEvent(Int32)

Raises the expanding event for the specified item index.

Declaration

protected bool RaiseExpandingEvent(int index)

Parameters

Type	Name	Description
System.Int32	index	The index of the item that is expanding.

Returns

Type	Description
System.Boolean	A boolean value indicating whether the expanding action should be canceled.

Events

Collapsed

Occurs when an AccordionItem is collapsed.

Declaration

public event EventHandler<ExpandedAndCollapsedEventArgs> Collapsed

Event Type

Type
System.EventHandler<ExpandedAndCollapsedEventArgs>

Examples

accordion.Collapsed += OnAccordionCollapsed;
private void OnAccordionCollapsed(object sender, ExpandedAndCollapsedEventArgs e)
{
    var index = e.Index;
}

Collapsing

Occurs when an AccordionItem is being collapsed within the SfAccordion control.

Declaration

public event EventHandler<ExpandingAndCollapsingEventArgs> Collapsing

Event Type

Type
System.EventHandler<ExpandingAndCollapsingEventArgs>

Examples

Here is an example of how to register the Collapsing event.

accordion.Collapsing += OnAccordionCollapsing;
private void OnAccordionCollapsing(object sender, ExpandingAndCollapsingEventArgs e)
{
    e.Cancel = true;
}

Declaration

public event EventHandler<ExpandedAndCollapsedEventArgs> Expanded

Event Type

Type
System.EventHandler<ExpandedAndCollapsedEventArgs>

Examples

Here is an example of how to register the Expanded event.

accordion.Expanded += OnAccordionExpanded;
private void OnAccordionExpanded(object sender, ExpandedAndCollapsedEventArgs e)
{
    var index = e.Index;
}

Expanding

Occurs when an AccordionItem is in the process of expanding within the SfAccordion control.

Declaration

public event EventHandler<ExpandingAndCollapsingEventArgs> Expanding

Event Type

Type
System.EventHandler<ExpandingAndCollapsingEventArgs>

Examples

Here is an example of how to register the Expanding event.

accordion.Expanding += OnAccordionExpanding;
private void OnAccordionExpanding(object sender, ExpandingAndCollapsingEventArgs e)
{
    var index = e.Index;
    e.Cancel = true;
}

Class SfAccordion

Inheritance

Inherited Members

Namespace: Syncfusion.Maui.Toolkit.Accordion

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

Remarks

Constructors

SfAccordion()

Declaration

Fields

AnimationDurationProperty

Declaration

Field Value

Remarks

AnimationEasingProperty

Declaration

Field Value

Remarks

AutoScrollPositionProperty

Declaration

Field Value

Remarks

ExpandModeProperty

Declaration

Field Value

Remarks

HeaderIconPositionProperty

Declaration

Field Value

Remarks

ItemSpacingProperty

Declaration

Field Value

Remarks

ItemsProperty

Declaration

Field Value

Remarks

Properties

AnimationDuration

Declaration

Property Value

Remarks

Examples

AnimationEasing

Declaration

Property Value

Remarks

Examples

AutoScrollPosition

Declaration

Property Value

Remarks

Examples

ExpandMode

Declaration

Property Value

Remarks

Examples

HeaderIconPosition

Declaration

Property Value

Remarks

Examples

Items

Declaration

Property Value

Remarks

Examples

See Also

ItemSpacing

Declaration

Property Value

Remarks

Examples

Methods

BringIntoView(AccordionItem)

Declaration

Parameters