Category / Section
How to show separator for Xamarin.Forms Expander (SfExpander)
2 mins read
You can add a separator afor Expander.Header and Expander.Content by using BoxView in Xamarin.Forms SfExpander. By using the custom HeaderIcon, you can add the separator line for the entire Header.
You can refer to the following document to customize the HeaderIcon in SfExpander,
XAML
BoxView added in Header and Content with Height as 2. Converter bound to the IsVisible property to change the visibility of the separator line and the ConverterParameter defined by Header and Content.
<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" Padding="0,15,0,0"> <ContentPage.Resources> <ResourceDictionary> <local:ExpanderIconConverter x:Key="ExpanderIconConverter"/> <local:SeperatorVisibilityConverter x:Key="SeperatorVisibilityConverter"/> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <ScrollView BackgroundColor="#EDF2F5"> <StackLayout> <syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None"> <syncfusion:SfExpander.Header> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="2"/> </Grid.RowDefinitions> <Grid> <Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" Margin="10,0,0,0"/> <Image Margin="10" HorizontalOptions="End" HeightRequest="15" WidthRequest="15" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}"/> </Grid> <BoxView Grid.Row="1" IsVisible="{Binding Path=IsExpanded, Source={x:Reference expander1}, Converter={StaticResource SeperatorVisibilityConverter}, ConverterParameter='Header'}" BackgroundColor="Green"/> </Grid> </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> <Grid BackgroundColor="#FFFFFF"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="2"/> </Grid.RowDefinitions> <Label BackgroundColor="#FFFFFF" HeightRequest="50" Text="Veg pizza is prepared with the items that meet vegetarian standards by not including any meat or animal tissue products." TextColor="#303030" Margin="10,10,10,10" VerticalTextAlignment="Center"/> <BoxView Grid.Row="1" IsVisible="{Binding Path=IsExpanded, Source={x:Reference expander1}, Converter={StaticResource SeperatorVisibilityConverter}, ConverterParameter='Content'}" BackgroundColor="Green"/> </Grid> </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage>
C#
Converter used to show or hide the separator line based on the IsExpanded property.
public class SeperatorVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if((string)parameter == "Header") { return (bool)value ? false : true; } else return (bool)value ? true : false; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }
Output