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