How To Autofit The Expander Content In Xamarin.Forms (Sfexpander)

Updated on Feb 15, 2024

You can resize the SfExpander Content based on the content size by using DynamicSizeMode as Content in Xamarin.Forms.

You can also refer the following article.

https://www.syncfusion.com/kb/11431/how-to-autofit-the-expander-content-in-xamarin-forms-sfexpander

XAML

Added Editor control to Expander content and set DynamicSizeMode to Content. To change the content size based on the text, set AutoSize as TextChanges for Editor control.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ExpanderXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms"
             x:Class="ExpanderXamarin.MainPage">
    <ContentPage.Content>
        <ScrollView BackgroundColor="#EDF2F5">
            <StackLayout>
                <syncfusion:SfExpander DynamicSizeMode="Content" IsExpanded="True">
                    <syncfusion:SfExpander.Header>
                        <Grid HeightRequest="50">
                            <Label Text="Veggie burger" VerticalTextAlignment="Center"/>
                        </Grid>
                    </syncfusion:SfExpander.Header>

                    <syncfusion:SfExpander.Content>
                        <Grid>
                            <Editor AutoSize="TextChanges" Text="Veggie burger, garden burger, or tofu burger uses a meat analogue, a meat substitute such as tofu, textured vegetable protein, seitan (wheat gluten), Quorn, beans, grains or an assortment of vegetables, which are ground up and formed into patties."/>
                        </Grid>
                    </syncfusion:SfExpander.Content>
                </syncfusion:SfExpander>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Output

AutoFitExpandeContent