DataTemplateSelector in .NET MAUI Chips

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.

C#

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.

C#

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#.

XAML

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

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

<chip: SfChipGroup x:Name="chipgroup"                                                           ChipBackground="Transparent"                                    
ItemsSource="{Binding Data}" 
ItemTemplate="{StaticResource selector}">
    
</chip:SfChipGroup>
      
</ContentPage>

C#

SfChipGroup chipGroup = new SfChipGroup();
chipGroup.ItemsSource = chipViewModel.Data;
chipGroup.ItemTemplate = this.Resources["selector"] as DataTemplate;
this.Content = chipGroup;