DataTemplateSelector in Xamarin Chips

22 Aug 20227 minutes to read

You can customize the appearance of each chip with different templates based on specific constraints using the DataTemplateSelector.

Create and initialize business models

Define a simple model class ChipModel with fields Text, CanSelect, ImageSource, and populate chip model in ViewModel.

public class ChipViewModel
        public ObservableCollection<ChipModel> Data { get; set; }

        public ChipViewModel()
                Data = new ObservableCollection<ChipModel>()
                new ChipModel(){Text ="Happy", CanSelect = true, ImageSource="Happy.png"},
                new ChipModel(){Text ="Sad", CanSelect = false,ImageSource = "Sad.png"},
                new ChipModel(){Text ="Love", CanSelect = true,ImageSource = "Love.png"},
                new ChipModel(){Text ="Sick", CanSelect = false,ImageSource="Sick.png"},
                new ChipModel(){Text ="Angry", CanSelect = false, ImageSource ="Angry.png"},
                new ChipModel(){Text ="Think", CanSelect = true,ImageSource="Thinking.png"},
                new ChipModel(){Text ="Wink", CanSelect = true,ImageSource="Wink.png"},
                new ChipModel(){Text ="Freeze", CanSelect = false,ImageSource="Freezing.png"},


    public class ChipModel
        public bool CanSelect { get; set; }
        public string Text { get; set; }
        public ImageSource ImageSource { get; set; }

Create a data template selector

Create a custom class by inheriting DataTemplateSelector, and override the OnSelectTemplate method to return the DataTemplate for that item. At runtime, the SfChipGroup invokes the OnSelectTemplate method for each item and passes the data object as parameter.

public class ChipDataTemplateSelector : DataTemplateSelector
        public DataTemplate HappyEmojiTemplate { get; set; }
        public DataTemplate SadEmojiTemplate { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
            return (item as ChipModel).CanSelect ? HappyEmojiTemplate : SadEmojiTemplate;

Applying the data template selector

Assign the already defined DataTemplateSelector to the ItemTemplate of the SfChipGroup in either XAML or C#.

<ContentPage xmlns=""
            <DataTemplate x:Key="happyTemplate">
                    <button:SfChip HeightRequest="40" WidthRequest="120" Text="{Binding Text}" BackgroundColor="#00bdae" ShowIcon="True" ImageSource="{Binding ImageSource}"  ShowCloseButton="True" ShowSelectionIndicator="False" ImageAlignment="Left" CloseButtonColor="White"/>
            <DataTemplate x:Key="sadTemplate">
                    <button:SfChip HeightRequest="40" WidthRequest="120" Text="{Binding Text}" BackgroundColor="#e56590" ShowIcon="True" ImageSource="{Binding ImageSource}"  ShowCloseButton="True" ShowSelectionIndicator="False" ImageAlignment="Left" CloseButtonColor="White"/>
            <local:ChipDataTemplateSelector x:Key="selector" 
                                            HappyEmojiTemplate="{StaticResource happyTemplate}" 
                                            SadEmojiTemplate="{StaticResource sadTemplate}"/>


	<button:SfChipGroup x:Name="chipgroup" ChipBackgroundColor="Transparent"                                    
                                         ItemsSource="{Binding Data}" ItemTemplate="{StaticResource selector}">
SfChipGroup chipGroup = new SfChipGroup();
chipGroup.ItemsSource = chipViewModel.Data;
chipGroup.ItemTemplate = this.Resources["selector"] as DataTemplate;
this.Content = chipGroup;

DataTemplateSelector support for SfChipGroup in Xamarin.Forms