How to use TemplateSelector in .Net MAUI SfAccordion?

This article illustrates how to use TemplateSelector on .NET MAUI SfAccordion. In this example, we will use the TemplateSelector in SfAccordion.

The SfAccordion control is properly initialized with the necessary properties. AccordionTemplateSelector class is responsible for choosing between two different templates for each item in the accordion. There are two styles for the items:
Custom style : Has a colored background, a button, and a label for the name.
Default style : Just a centered label for the name.
A template selector (AccordionTemplateSelector) decides which style to use for each item. The accordion gets its data from a list called Info in view model, and only one item can be open at a time.

XAML:

<ContentPage.BindingContext>
   <local:ItemInfoRepository/>
</ContentPage.BindingContext>

<ContentPage.Resources>
   <ResourceDictionary>
       <local:AccordionTemplateSelector x:Key="accordionTemplateSelector">
           <local:AccordionTemplateSelector.CustomTemplate>
               <DataTemplate>
                   <syncfusion:AccordionItem HeaderBackground="#949cdf">
                       <syncfusion: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>
                       </syncfusion:AccordionItem.Header>
                       <syncfusion:AccordionItem.Content>
                           <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0">
                               <Label Text="{Binding Description}" VerticalOptions="Center"/>
                           </Grid>
                       </syncfusion:AccordionItem.Content>
                   </syncfusion:AccordionItem>
               </DataTemplate>
           </local:AccordionTemplateSelector.CustomTemplate>
           <local:AccordionTemplateSelector.DefaultTemplate>
               <DataTemplate>
                   <syncfusion:AccordionItem >
                       <syncfusion:AccordionItem.Header>
                           <Grid>
                               <Label TextColor="#495F6E" Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" VerticalTextAlignment="Center"/>
                           </Grid>
                       </syncfusion:AccordionItem.Header>
                       <syncfusion:AccordionItem.Content>
                           <Grid BackgroundColor="#e8e8e8" Padding="5,0,0,0">
                               <Label Text="{Binding Description}" VerticalOptions="Center"/>
                           </Grid>
                       </syncfusion:AccordionItem.Content>
                   </syncfusion:AccordionItem>
               </DataTemplate>
           </local:AccordionTemplateSelector.DefaultTemplate>
       </local:AccordionTemplateSelector>
   </ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
   <syncfusion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Info}" BindableLayout.ItemTemplateSelector="{StaticResource accordionTemplateSelector}" ExpandMode="SingleOrNone">
   </syncfusion:SfAccordion>
</ContentPage.Content>

ViewModel

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;
   }
}

public class ItemInfoRepository
{
   public ObservableCollection<ItemInfo> Info { get; set; }

   public ItemInfoRepository()
   {
       Info = new ObservableCollection<ItemInfo>();
       Info.Add(new ItemInfo() { ID = 1, Name = "Cheese burger", Description = "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." });
       Info.Add(new ItemInfo() { ID = 2, Name = "Veggie burger", Description = "Veggie burger, garden burger, or tofu burger uses a meat analogue, a meat substitute such as tofu, textured vegetable protein, seitan (wheat gluten), Quorn, beans, grains or an assortment of vegetables, which are ground up and formed into patties." });
       Info.Add(new ItemInfo() { ID = 3, Name = "Barbecue burger", Description = "Consists of a hamburger, with the patty topped with chili con carne." });
       Info.Add(new ItemInfo() { ID = 4, Name = "Chili burger", Description = "Prepared with ground beef, mixed with onions and barbecue sauce, and then grilled. Once the meat has been turned once, barbecue sauce is spread on top and grilled until the sauce caramelizes." });
   }
}

public class ItemInfo
{
   public string Name { get; set; }
   public int ID { get; set; }
   public string Description { get; set; }
}

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to use TemplateSelector in .NET MAUI Accordion.
You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!