SfAccordion custom expander icon

[Spencer Bosley]

Hello,

I was wondering if there is a way to set my own header icon as the expander. I want to be able to change icons based on if the accordion item is expanded or collapsed.

Thanks.

[Lakshmi Natarajan]

Hi Spencer, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “SfAccordion custom expander icon” at our side. You can customize the Xamarin.Forms SfAccordion header icon based on the expanded state using the converter. 

 

XAML: Bind the IsExpanded property to show different icons to expand and collapse. Set the HeaderIconPosition to None for the AccordionItem to hide the default header icon. 

<syncfusion:SfAccordion Grid.Row="1" HeaderIconPosition="None"> 

    <syncfusion:SfAccordion.Items> 

        <syncfusion:AccordionItem x:Name="accordionItem1"> 

            <syncfusion:AccordionItem.Header> 

                <Grid HeightRequest="50"> 

                    <Label TextColor="#495F6E" Text="Cheese burger" VerticalTextAlignment="Center" Padding="5,0,0,0"/> 

                    <Image Margin="10" HorizontalOptions="End" Source="{Binding IsExpanded,Source={x:Reference accordionItem1},Converter={StaticResource ExpanderIconConverter}}" HeightRequest="20" WidthRequest="20"/> 

                </Grid> 

            </syncfusion:AccordionItem.Header> 

            <syncfusion:AccordionItem.Content> 

                <Grid Padding="10,10,10,10" BackgroundColor="#FFFFFF"> 

                    <Label TextColor="#303030" Text="Hamburger accompanied with melted cheese. The term itself is a portmanteau of the words cheese and hamburger. The cheese is usually sliced, then added a short time before the hamburger finishes cooking to allow it to melt." HeightRequest="50" VerticalTextAlignment="Center"/> 

                </Grid> 

            </syncfusion:AccordionItem.Content> 

        </syncfusion:AccordionItem> 

    </syncfusion:SfAccordion.Items> 

</syncfusion:SfAccordion> 

 

 

C#: Return image based on the IsExpanded property value. 

public class ExpanderIconConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        if ((bool)value) 

            return ImageSource.FromResource("AccordionXamarin.Images.ArrowDown.png"); 

        else 

            return ImageSource.FromResource("AccordionXamarin.Images.ArrowUp.png"); 

    } 

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        throw new NotImplementedException(); 

    } 

} 

 

 

We have prepared a sample to use custom header icon for accordion and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomHeaderIcon578006030 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan