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