Articles in this section
Category / Section

How to use TemplateSelector in Xamarin.Forms Accordion (SfAccordion)

1 min read

You can use DataTemplateSelector to customize the AccordionItem in Xamarin.Forms SfAccordion. Refer to the BindableLayout.TemplateSelector document from here.

C#

Define custom DataTemplateSelector for Accordion. Here, we custome the index-based AccordionItem. In the OnSelectTemplate method, return templates based on the index.

namespace AccordionXamarin
{
    public class AccordionTemplateSelector : DataTemplateSelector
    {
        public DataTemplate DefaultTemplate { get; set; }
        public DataTemplate CustomTemplate { get; set; }
 
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            return (item as ItemInfo).ID % 2 == 0 ? CustomTemplate : DefaultTemplate;
        }
    }
}

XAML

Define templates for the AccordionItem in the resource and use the set it to the BindableLayout.ItemTemplateSelector using the StaticResource key.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AccordionXamarin"
             xmlns:accordion="clr-namespace:Syncfusion.XForms.Accordion;assembly=Syncfusion.Expander.XForms"
             x:Class="AccordionXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}">
    <ContentPage.BindingContext>
        <local:ItemInfoRepository/>
    </ContentPage.BindingContext>
   
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:AccordionTemplateSelector x:Key="accordionTemplateSelector">
                <local:AccordionTemplateSelector.CustomTemplate>
                    <DataTemplate>
                        <accordion:AccordionItem HeaderBackgroundColor="#949cdf">
                            <accordion:AccordionItem.Header>
                                <Grid Padding="10,0,0,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="60"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Button Text="--" FontAttributes="Bold" CornerRadius="5" BackgroundColor="Transparent" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
                                    <Label TextColor="#495F6E" Text="{Binding Name}" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="StartAndExpand" HeightRequest="50" VerticalTextAlignment="Center"/>
                                </Grid>
                            </accordion:AccordionItem.Header>
                            <accordion:AccordionItem.Content>
                                <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0">
                                    <Label Text="{Binding Description}" VerticalOptions="Center"/>
                                </Grid>
                            </accordion:AccordionItem.Content>
                        </accordion:AccordionItem>
                    </DataTemplate>
                </local:AccordionTemplateSelector.CustomTemplate>
                <local:AccordionTemplateSelector.DefaultTemplate>
                    <DataTemplate>
                        <accordion:AccordionItem >
                            <accordion:AccordionItem.Header>
                                <Grid>
                                    <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/>
                                </Grid>
                            </accordion:AccordionItem.Header>
                            <accordion:AccordionItem.Content>
                                <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0">
                                    <Label Text="{Binding Description}" VerticalOptions="Center"/>
                                </Grid>
                            </accordion:AccordionItem.Content>
                        </accordion:AccordionItem>
                    </DataTemplate>
                </local:AccordionTemplateSelector.DefaultTemplate>
            </local:AccordionTemplateSelector>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" BindableLayout.ItemTemplateSelector="{StaticResource accordionTemplateSelector}" ExpandMode="SingleOrNone">
        </accordion:SfAccordion>
    </ContentPage.Content>
</ContentPage>

View sample in GitHub

Demo image to use TemplateSelector in Xamarin.Forms SfAccordion

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