Articles in this section
Category / Section

How to work with Expander in the MasterDetailsPage in Xamarin.Forms (SfExpander)?

1 min read

You can load the SfExpander in the MasterDetailPage in Xamarin.Forms.

XAML

Load SfExpander in the Master page of the MasterDetailPage.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Expander;assembly=Syncfusion.Expander.XForms"
             xmlns:local="clr-namespace:ExpanderXamarin"
             x:Class="ExpanderXamarin.Views.ExpanderMasterDetailMaster"
             Title="Menu">
    <StackLayout>
        <Grid BackgroundColor="#f54291" HeightRequest="100">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="UserImage.png" HeightRequest="60" WidthRequest="60" Margin="10,10,10,10"/>
            <Label Text="John" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Start"/>
        </Grid>
        <ScrollView BackgroundColor="#EDF2F5">
            <StackLayout>
                <syncfusion:SfExpander HeaderIconPosition="End">
                    <syncfusion:SfExpander.Header>
                        <Grid HeightRequest="50">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="50"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Source="home.png" HeightRequest="25" WidthRequest="25" HorizontalOptions="Center" VerticalOptions="Center"/>
                            <Label Text="Home" Grid.Column="1" TextColor="#495F6E" VerticalTextAlignment="Center" />
                        </Grid>
                    </syncfusion:SfExpander.Header>
 
                    <syncfusion:SfExpander.Content>
                        <StackLayout Padding="10,10,10,10" BackgroundColor="#FFFFFF">
                            <Label HeightRequest="50" Text="Tasks" TextColor="#303030" VerticalTextAlignment="Center" />
                            <Label HeightRequest="50" Text="Settings" TextColor="#303030" VerticalTextAlignment="Center" />
                        </StackLayout>
                    </syncfusion:SfExpander.Content>
                </syncfusion:SfExpander>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</ContentPage>

Output

Demo image with Expander loaded in MasterDetailPage in Xamarin.Forms

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied