---
title: "Get Started with Xamarin.Forms DataTemplateSelector"
published_at: "2019-07-05T11:00:32+00:00"
modified_at: "2025-03-20T11:27:20+00:00"
url: "https://www.syncfusion.com/blogs/post/get-started-with-xamarin-forms-datatemplateselector"
excerpt: "Introduction Most of the time, developers avoid items controls without template support. DataTemplate support saves them from rewriting code. It is virtually a necessity that an items control should support data templates with DataTemplateSelector. Xamarin.Forms DataTemplateSelector The Xamarin.Forms DataTemplateSelector can..."
taxonomy_category:
  - "Desktop"
  - "Xamarin"
taxonomy_post_tag:
  - "DataTempalate"
  - "DataTemplateSelector"
  - "Syncfusion"
  - "Xamarin.Forms"
---

# Get Started with Xamarin.Forms DataTemplateSelector

[Selva Ganapathy Kathiresan](https://www.syncfusion.com/blogs/author/selva-ganapathy-k)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2019/06/Xamarin-DataTemplateSelectorFacebook.jpg)


## Introduction

Most of the time, developers avoid items controls without template support. [DataTemplate](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/)
 support saves them from rewriting code. It is virtually a necessity that an items control should support data templates with DataTemplateSelector.

## Xamarin.Forms DataTemplateSelector

The Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 can apply [DataTemplate](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/)
 with some validation. With it, you can apply a variety of data templates to items at runtime.

In our [Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls)
, we provide almost all our items controls with [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 support. Controls such as [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview)
, [DataGrid](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid)
, and [Kanban Board](https://www.syncfusion.com/xamarin-ui-controls/xamarin-kanban-board)
 already have [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 support. In 2019 Volume 2, the [Autocomplete](https://www.syncfusion.com/xamarin-ui-controls/xamarin-autocomplete)
, [ComboBox](https://www.syncfusion.com/xamarin-ui-controls/xamarin-combobox)
, [Picker](https://www.syncfusion.com/xamarin-ui-controls/xamarin-picker)
, and [Rotator](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rotator)
 controls will support the same.

In this blog, we’ll see how to apply Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 to an items control.

## How to apply Xamarin.Forms DataTemplateSelector

First, let’s see how to apply [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 to the Xamarin.Forms [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview)
.

**Step 1:** Create a class derived from [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 and an override OnSelectTemplate method. Return the desired [DataTemplate](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/)
 based on validation.

```
public class StatusDataTemplateSelector : DataTemplateSelector
{
  public DataTemplate OnlineTemplate { get; set; }
  public DataTemplate OfflineTemplate { get; set; }

  protected override DataTemplate OnSelectTemplate (object item, BindableObject container)
  {
    return ((Employee)item).IsOnline ? OnlineTemplate : OfflineTemplate 
  }
}
```

**Step 2:** Add the StatusDataTemplateSelector into the ResourceDictionary of the ContentPage’s resources.

```
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="onlineTemplate">
               <ViewCell>
                 <Label Text={Binding Name} TextColor="Green"/>
               </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="offlineTemplate">
               <ViewCell>
                 <Label Text={Binding Name} TextColor="Orange"/>
               </ViewCell>
            </DataTemplate>
            <local:StatusDataTemplateSelector x:Key="statusDataTemplateSelector"
                OnlineTemplate="{StaticResource onlineTemplate}"
                OfflineTemplate="{StaticResource offlineTemplate}" />
        </ResourceDictionary>
    </ContentPage.Resources>
</ContentPage>
```

**Step 3:** Apply StatusDataTemplateSelector to[ListView’s](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview)
 ItemTemplate property.

```
    <syncfusion:SfListView ItemTemplate="{StaticResource statusDataTemplateSelector}"
                           ItemsSource="{Binding Employees}"
                           ItemSize="100">
```

![Xamarin.Forms SfListView with DataTemplateSelector](https://blog.syncfusion.com/wp-content/uploads/2019/06/Xamarin.Forms-SfListView-with-DataTemplateSelector.png)

*Xamarin.Forms SfListView with DataTemplateSelector*

In this brief example, we can see how Xamarin.Forms [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview)
 reacts with DataTemplateSelector. Our other controls such as Kanban Board, Radial Menu, and DataGrid also work with the DataTemplateSelector.

## DataTemplateSelector support in 2019 Volume 2

In our 2019 Volume 2 release, Essential Studio® for Xamarin.Forms supports [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 for the following controls:

### Xamarin.Forms Autocomplete

The Xamarin [Autocomplete](https://www.syncfusion.com/xamarin-ui-controls/xamarin-autocomplete)
 control suggests a drop-down list of items from a large volume of data depending on the user’s input characters. You can apply the Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 to the drop-down items.

![Xamarin.Forms Autocomplete with DataTemplateSelector](https://blog.syncfusion.com/wp-content/uploads/2019/06/Xamarin.Forms-Autocomplete-with-DataTemplateSelector-201x300.jpg)

*Xamarin.Forms Autocomplete with DataTemplateSelector*

### Xamarin.Forms ComboBox

The Xamarin [ComboBox](https://www.syncfusion.com/xamarin-ui-controls/xamarin-combobox)
 control is a text box component that allows users to choose an option from a list of predefined options. You can apply the Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 to the drop-down items.

![Xamarin.Forms ComboBox with DataTemplateSelector](https://blog.syncfusion.com/wp-content/uploads/2019/06/Xamarin.Forms-ComboBox-with-DataTemplateSelector-1-198x300.jpg)

*Xamarin.Forms ComboBox with DataTemplateSelector*

### Xamarin.Forms Rotator

The Xamarin [Rotator](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rotator)
 control is a UI that provides an interactive way to rotate images and navigate through a collection of views. You can apply the Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 to the rotator items.

![Xamarin.Forms Rotator with DataTemplateSelector](https://blog.syncfusion.com/wp-content/uploads/2019/06/Xamarin.Forms-Rotator-with-DataTemplateSelector-266x300.jpg)

*Xamarin.Forms Rotator with DataTemplateSelector*

### Xamarin.Forms Picker

The Xamarin [Picker](https://www.syncfusion.com/xamarin-ui-controls/xamarin-picker)
 control is an item selector control, which can be opened as a dialog. You can apply the Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
 to the items.

![Xamarin.Forms Picker with DataTemplateSelector](https://blog.syncfusion.com/wp-content/uploads/2019/06/Xamarin.Forms-Picker-with-DataTemplateSelector-1-282x300.jpg)

*Xamarin.Forms Picker with DataTemplateSelector*

## Conclusion

In this blog post, we have walked through the [Syncfusion Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls/)
 controls that support the Xamarin.Forms [DataTemplateSelector](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector)
. We invite you to check out all of our [Xamarin.Forms controls](https://www.syncfusion.com/xamarin-ui-controls/)
 in action by [downloading our free evaluation](https://www.syncfusion.com/downloads/xamarin)
. You can check out the project to get a hands-on experience on the Switch control from this [GitHub location](https://github.com/SyncfusionExamples/xamarin-forms-switch-control)
. Explore our samples available on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.samplebrowser)
 and the [Microsoft Store](https://www.microsoft.com/en-us/p/syncfusion-essential-studio-for-xamarin/9nn069tldzf4)
, and learn about the controls’ advanced features in [our documentation](https://help.syncfusion.com/xamarin/)
.

If you have any questions or require clarifications about these controls and features, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms)
. We are happy to assist you!