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>
Did not find the solution
Contact Support