Category / Section
How to add rounded corners for Xamarin.Forms Expander (SfExpander)
1 min read
You can customise the SfExpander corner using PancakeView in Xamarin.Forms. You can use the custom expander icon to customize the header. Refer to the document to use custom images in Expander from here.
To use PancakeView in SfExpander, refer to the steps below,
STEP 1: Install the Xamarin.Forms.PancakeView nuget package in the shared code project.
STEP 2: Add the PancakeView control to the SfExpander.Header or SfExpander.Content and set the CornerRadius to apply the Expander corner. You can customise the corner radius based on the expanded state by binding the IsExpanded property and the converter.
<syncfusion:SfExpander x:Name="expander1" HeaderIconPosition="None">
<syncfusion:SfExpander.Header>
<pancake:PancakeView CornerRadius="{Binding IsExpanded, Source={x:Reference expander1}, Converter={StaticResource CornerRadiusConverter}}" BackgroundColor="#bbbfca" HeightRequest="50">
<Grid>
<Label Text="Veg Pizza" TextColor="#495F6E" VerticalTextAlignment="Center" Margin="10,0,0,0"/>
<Image Margin="10" HorizontalOptions="End" HeightRequest="20" WidthRequest="20" Source="{Binding IsExpanded,Source={x:Reference expander1},Converter={StaticResource ExpanderIconConverter}}"/>
</Grid>
</pancake:PancakeView>
</syncfusion:SfExpander.Header>
<syncfusion:SfExpander.Content>
<pancake:PancakeView CornerRadius="0,0,20,20" BackgroundColor="#dddddd" >
<Grid Padding="10,10,10,10" >
<Label 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" VerticalTextAlignment="Center"/>
</Grid>
</pancake:PancakeView>
</syncfusion:SfExpander.Content>
</syncfusion:SfExpander>
STEP 3: Using the converter, return the CornerRadius based on the expanded state.
public class CornerRadiusConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? new CornerRadius(20, 20, 0, 0) : new CornerRadius(20, 20, 20, 20);
}
}
