menu

MAUI Toolkit

  • User Guide
  • Demos
  • Support
Class SfExpander - MAUI-ToolKit API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfExpander

    Represents a collapsible container that can be expanded or collapsed to show or hide its content.

    Inheritance
    System.Object
    SfView
    SfExpander
    Implements
    IDrawableLayout
    Microsoft.Maui.Graphics.IDrawable
    Microsoft.Maui.IAbsoluteLayout
    Microsoft.Maui.ILayout
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IContainer
    System.Collections.Generic.IList<Microsoft.Maui.IView>
    System.Collections.Generic.ICollection<Microsoft.Maui.IView>
    System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>
    System.Collections.IEnumerable
    Microsoft.Maui.ISafeAreaView
    Microsoft.Maui.IPadding
    Microsoft.Maui.ICrossPlatformLayout
    Microsoft.Maui.IVisualTreeElement
    Inherited Members
    SfView.Children
    SfView.ClipToBounds
    SfView.Padding
    Namespace: Syncfusion.Maui.Toolkit.Expander
    Assembly: Syncfusion.Maui.Toolkit.dll
    Syntax
    public class SfExpander : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IParentThemeElement, IThemeElement

    Constructors

    SfExpander()

    Initializes a new instance of the SfExpander class.

    Declaration
    public SfExpander()

    Fields

    AnimationDurationProperty

    Identifies the AnimationDuration bindable property.

    Declaration
    public static readonly BindableProperty AnimationDurationProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The AnimationDurationProperty property specifies the duration of the animation in milliseconds.

    AnimationEasingProperty

    Identifies the AnimationEasing bindable property.

    Declaration
    public static readonly BindableProperty AnimationEasingProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The AnimationEasingProperty property specifies the easing function to be applied during the animation of the control.

    ContentProperty

    Identifies the Content bindable property.

    Declaration
    public static readonly BindableProperty ContentProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The ContentProperty property determines the content that will be displayed.

    HeaderBackgroundProperty

    Identifies the HeaderBackground bindable property.

    Declaration
    public static readonly BindableProperty HeaderBackgroundProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The HeaderBackgroundProperty property specifies the background appearance of the header.

    HeaderIconColorProperty

    Identifies the HeaderIconColor bindable property.

    Declaration
    public static readonly BindableProperty HeaderIconColorProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The HeaderIconColorProperty property specifies the color of the header icon.

    HeaderIconPositionProperty

    Identifies the HeaderIconPosition bindable property.

    Declaration
    public static readonly BindableProperty HeaderIconPositionProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The HeaderIconPositionProperty property determines the position of the header icon.

    HeaderProperty

    Identifies the Header bindable property.

    Declaration
    public static readonly BindableProperty HeaderProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The HeaderProperty property specifies the header content that will be displayed.

    IsExpandedProperty

    Identifies the IsExpanded bindable property.

    Declaration
    public static readonly BindableProperty IsExpandedProperty
    Field Value
    Type
    Microsoft.Maui.Controls.BindableProperty
    Remarks

    The IsExpandedProperty property determines whether the control is expanded or collapsed.

    Properties

    AnimationDuration

    Gets or sets the duration of the expand and collapse animations in milliseconds for the SfExpander.

    Declaration
    public double AnimationDuration { get; set; }
    Property Value
    Type Description
    System.Double

    It accepts System.Double. The default value is 250 milliseconds.

    Remarks

    The AnimationDuration property allows you to customize the speed of the animation when the expander toggles between its expanded and collapsed states. Adjusting this value can provide a faster or slower animation experience based on your application's needs.

    Examples

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

    • XAML
    • C#
    <local:SfExpander x:Name="expander"
                      IsExpanded="True"
                      AnimationDuration="500">
    </local:SfExpander>
    SfExpander expander = new SfExpander
    {
        IsExpanded="True"
        AnimationDuration = 500,    
    };

    AnimationEasing

    Gets or sets the ExpanderAnimationEasing function for an expand and collapse animation.

    Declaration
    public ExpanderAnimationEasing AnimationEasing { get; set; }
    Property Value
    Type Description
    ExpanderAnimationEasing

    It accepts a ExpanderAnimationEasing.The default value is ExpanderAnimationEasing.Linear.

    Remarks

    Set this property to None to disable the animation for SfExpander.

    Examples

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

    • XAML
    • C#
    <syncfusion:SfExpander AnimationEasing="SinIn"/>
    var expander = new SfExpander
    {
        AnimationEasing = ExpanderAnimationEasing.SinIn
    };
    See Also
    AnimationDuration

    Content

    Gets or sets the content to be displayed when the SfExpander is expanded.

    Declaration
    public View Content { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.View

    It accepts Microsoft.Maui.Controls.View.The default value is null.

    Remarks

    The Content property specifies the content to be displayed inside the control, such as text, images, or custom views.

    Examples

    Here is an example of how to set the Content property in XAML and C#:

    • XAML
    • C#
    <syncfusion:SfExpander.Content>
        <Grid Padding="18,8,0,18">
            <Label 
                CharacterSpacing="0.25" 
                FontFamily="Roboto-Regular"
                Text="11:03 AM, 15 January 2019" 
                FontSize="14" />                  
        </Grid>
    </syncfusion:SfExpander.Content>
    var contentGrid = new Grid
    {
        Padding = new Thickness(18, 8, 0, 18)
    };
    
    var label = new Label
    {
        CharacterSpacing = 0.25,
        FontFamily = "Roboto-Regular",
        Text = "11:03 AM, 15 January 2019",
        FontSize = 14
    };
    
    contentGrid.Children.Add(label);
    
    var expander = new SfExpander
    {
        Content = contentGrid
    };
    See Also
    Header

    Header

    Gets or sets the view that is displayed in the header of the SfExpander.

    Declaration
    public View Header { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.View

    It accepts a Microsoft.Maui.Controls.View. The default value is false.

    Remarks

    Use this property to customize the header of the SfExpander. You can set any view, such as a layout or a specific control, as the header. This provides flexibility in designing the UI to match the application's theme and functionality. Ensure that the view used for the header is appropriately sized to fit within the layout constraints of the SfExpander.

    Examples

    Here is an example demonstrating how to use the SfExpander with the IsExpanded property:

    • XAML
    • C#
    <syncfusion:SfExpander x:Name="expander"
                           IsExpanded="True">
        <syncfusion:SfExpander.Header>
            <Label Text="Tap to expand" FontSize="16" />
        </syncfusion:SfExpander.Header>
    </syncfusion:SfExpander>
    var expander = new SfExpander
    {
        IsExpanded = true,
        Header = new Label
        {
            Text = "Tap to expand",
            FontSize = 16
        },
    };
    See Also
    Content

    HeaderBackground

    Gets or sets the background color of the header area in the SfExpander control.

    Declaration
    public Brush HeaderBackground { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    It accepts the Microsoft.Maui.Controls.Brush. The default value is Transparent.

    Remarks

    The HeaderBackground property specifies the background appearance of the header, allowing customization with solid colors, gradients, or images.

    Examples

    Here is an example demonstrating how to set the HeaderBackground property:

    • XAML
    • C#
     <syncfusion:SfExpander HeaderBackground = "Red"/>
    expander.HeaderBackground = "Red" />
    See Also
    HeaderIconColor

    HeaderIconColor

    Gets or sets the color of the header icon in the SfExpander control.

    Declaration
    public Color HeaderIconColor { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Graphics.Color

    It accepts the Microsoft.Maui.Graphics.Color. The default value is dark grayish-purple.

    Remarks

    The HeaderIconColor property specifies the color of the icon displayed in the header, allowing customization to match the theme or design of the control.

    Examples

    Here is an example demonstrating how to set the HeaderIconColor property:

    • XAML
    • C#
     <syncfusion:SfExpander HeaderIconColor = "Red"/>
    expander.HeaderIconColor = "Red" />
    See Also
    HeaderIconPosition
    HeaderBackground

    HeaderIconPosition

    Gets or sets the ExpanderIconPosition of the header icon in the SfExpander control.

    Declaration
    public ExpanderIconPosition HeaderIconPosition { get; set; }
    Property Value
    Type Description
    ExpanderIconPosition

    Accepts a ExpanderIconPosition. The default value is ExpanderIconPosition.End.

    Remarks

    The HeaderIconPosition property determines the position of the icon within the header, such as at the start or end of the header content.

    Examples

    Here is an example demonstrating how to set the HeaderIconPosition:

    • XAML
    • C#
    <syncfusion:SfExpander HeaderIconPosition="Start"/>
    var expander = new SfExpander
    {
        HeaderIconPosition = HeaderIconPosition.Start
    };
    See Also
    HeaderBackground

    IsExpanded

    Gets or sets a value indicating whether the SfExpander control's content is expanded.

    Declaration
    public bool IsExpanded { get; set; }
    Property Value
    Type Description
    System.Boolean

    Accepts a System.Boolean. The default value is false.

    Remarks

    The IsExpanded property determines whether the content of the Expander control is displayed expanded or collapsed. When set to true, the content is displayed expanded; when set to false, the content is displayed collapsed.

    Examples

    Here is an example demonstrating how to use the SfExpander with the IsExpanded property:

    • XAML
    • C#
    <syncfusion:SfExpander x:Name="expander"
                           IsExpanded="True">
        <syncfusion:SfExpander.Header>
            <Label Text="Tap to expand" FontSize="16" />
        </syncfusion:SfExpander.Header>
        <syncfusion:SfExpander.Content>
            <Label Text="This content is visible because IsExpanded is set to True."
                   FontSize="14"
                   TextColor="Black" />
        </syncfusion:SfExpander.Content>
    </syncfusion:SfExpander>
    var expander = new SfExpander
    {
        IsExpanded = true,
        Header = new Label
        {
            Text = "Tap to expand",
            FontSize = 16
        },
        Content = new Label
        {
            Text = "This content is visible because IsExpanded is set to True.",
            FontSize = 14,
            TextColor = Colors.Black
        }
    };
    Content = new StackLayout
    {
        Children = { expander }
    };

    Methods

    AnimationCompleted()

    Triggers after the animation has been completed.

    Declaration
    protected virtual void AnimationCompleted()

    ArrangeContent(Rect)

    Arrange the child views in Expander.

    Declaration
    protected override Size ArrangeContent(Rect bounds)
    Parameters
    Type Name Description
    Microsoft.Maui.Graphics.Rect bounds

    Bounds of Expander.

    Returns
    Type Description
    Microsoft.Maui.Graphics.Size

    Returns the required size to arrange Expander.

    Overrides
    Syncfusion.Maui.Toolkit.SfView.ArrangeContent(Microsoft.Maui.Graphics.Rect)

    ChangeVisualState()

    Helps to trigger the VisualState initially when View is loaded.

    Declaration
    protected override void ChangeVisualState()

    MeasureContent(Double, Double)

    Measure the child views in Expander.

    Declaration
    protected override Size MeasureContent(double widthConstraint, double heightConstraint)
    Parameters
    Type Name Description
    System.Double widthConstraint

    Width of Expander.

    System.Double heightConstraint

    Height of Expander.

    Returns
    Type Description
    Microsoft.Maui.Graphics.Size

    Returns measured size of Expander.

    Overrides
    Syncfusion.Maui.Toolkit.SfView.MeasureContent(System.Double, System.Double)

    OnHandlerChanged()

    Raised when handler gets changed.

    Declaration
    protected override void OnHandlerChanged()
    Overrides
    Syncfusion.Maui.Toolkit.SfView.OnHandlerChanged()

    OnPropertyChanged(String)

    Need to handle the run time changes of System.ComponentModel.PropertyChangedEventArgs of SfExpander.

    Declaration
    protected override void OnPropertyChanged(string propertyName = null)
    Parameters
    Type Name Description
    System.String propertyName

    Represents the property changed event arguments.

    RaiseCollapsedEvent()

    Occurs when collapsing operation completes

    Declaration
    protected virtual void RaiseCollapsedEvent()

    RaiseCollapsingEvent()

    Occurs when collpasing operation starts

    Declaration
    protected virtual void RaiseCollapsingEvent()

    RaiseExpandedEvent()

    Occurs when expanding operation completes

    Declaration
    protected virtual void RaiseExpandedEvent()

    RaiseExpandingEvent()

    Occurs when expanding operation is performed

    Declaration
    protected virtual void RaiseExpandingEvent()

    Events

    Collapsed

    Occurs when the SfExpander control is collapsed.

    Declaration
    public event EventHandler<ExpandedAndCollapsedEventArgs> Collapsed
    Event Type
    Type
    System.EventHandler<ExpandedAndCollapsedEventArgs>
    Remarks

    The event handler receives an argument of type ExpandingAndCollapsingEventArgs containing data related to this event.

    Examples
    expander.Collapsed += Expander_Collapsed;
    private void Expander_Collapsed(object sender, ExpandedAndCollapsedEventArgs e)
    {
        expander.HeaderBackground = Color.Aqua;
    }
    See Also
    Expanding
    Expanded
    Collapsing

    Collapsing

    Occurs when the SfExpander control is being collapsed.

    Declaration
    public event EventHandler<ExpandingAndCollapsingEventArgs> Collapsing
    Event Type
    Type
    System.EventHandler<ExpandingAndCollapsingEventArgs>
    Examples
    expander.Collapsing += Expander_Collapsing;
    private void Expander_Collapsing(object sender, ExpandingAndCollapsingEventArgs e)
    {
        // Below code cancels the collapsing operation of the SfExpander control.
        e.Cancel = true;
    }
    See Also
    Expanding
    Expanded
    Collapsed

    Expanded

    Occurs when the SfExpander control is expanded.

    Declaration
    public event EventHandler<ExpandedAndCollapsedEventArgs> Expanded
    Event Type
    Type
    System.EventHandler<ExpandedAndCollapsedEventArgs>
    Remarks

    The event handler receives an argument of type ExpandingAndCollapsingEventArgs containing data related to this event.

    Examples
    expander.Expanded += Expander_Expanded;
    private void Expander_Expanded(object sender, ExpandedAndCollapsedEventArgs e)
    {
        expander.HeaderBackground = Color.YellowGreen;
    }
    See Also
    Expanding
    Collapsed
    Collapsing

    Expanding

    Occurs when the SfExpander control is being expanded.

    Declaration
    public event EventHandler<ExpandingAndCollapsingEventArgs> Expanding
    Event Type
    Type
    System.EventHandler<ExpandingAndCollapsingEventArgs>
    Examples
    expander.Expanding += Expander_Expanding;
    private void Expander_Expanding(object sender, ExpandingAndCollapsingEventArgs e)
    {
        // Below code cancels the expanding operation of the SfExpander control.
        e.Cancel = true;
    }
    See Also
    Expanded
    Collapsed
    Collapsing

    Implements

    IDrawableLayout
    Microsoft.Maui.Graphics.IDrawable
    Microsoft.Maui.IAbsoluteLayout
    Microsoft.Maui.ILayout
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IContainer
    System.Collections.Generic.IList<>
    System.Collections.Generic.ICollection<>
    System.Collections.Generic.IEnumerable<>
    System.Collections.IEnumerable
    Microsoft.Maui.ISafeAreaView
    Microsoft.Maui.IPadding
    Microsoft.Maui.ICrossPlatformLayout
    Microsoft.Maui.IVisualTreeElement
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved