{"id":24820,"date":"2016-03-02T09:24:59","date_gmt":"2016-03-02T17:24:59","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=24820"},"modified":"2020-09-08T09:39:44","modified_gmt":"2020-09-08T16:39:44","slug":"customizing-list-view-cells-xamarin-forms-datatemplateselector","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/customizing-list-view-cells-xamarin-forms-datatemplateselector\/","title":{"rendered":"Customizing ListView Cells with Xamarin.Forms’ DataTemplateSelector"},"content":{"rendered":"
            Many mobile apps have to display a list of data to users, so it's no surprise that the list view is a fundamental control seen in almost every app. Xamarin.Forms' <code>ListView<\/code> allows you to display a list of data using cells and a <code>DataTemplate<\/code> to bind between a data source and the cell. Using this approach, you could easily customize an existing cell or create a completely new look and feel by extending the <code>ViewCell<\/code>. However, this type of customization has one key limitation: the inability to render different types of cells in the same <code>ListView<\/code> at runtime.\n<\/code><\/pre>\n
Xamarin.Forms 2.1 introduces DataTemplateSelector<\/code>, which is a powerful mechanism to customize the presentation of a cell at runtime. While DataTemplate<\/code> is used to specify the visualization of your data objects, a DataTemplateSelector<\/code> is used to choose a DataTemplate<\/code> at runtime based on the value of a data-bound property.<\/p>\n
In this blog post, we’ll be using the DataTemplateSelector<\/code> to create a simple chat user interface<\/a> (seen below), which will customize the look of the cell with different colors and alignment based on an incoming and outgoing message.<\/p>\n
\"\"<\/p>\n
Getting Started with Xamarin.Forms DataTemplateSelector<\/h2>\n
Selecting a DataTemplate<\/code> at runtime can be implemented in just two easy steps:<\/p>\n
    \n
  1. Create a class that inherits from DataTemplateSelector<\/code> and override the OnSelectTemplate<\/code> method to select a particular DataTemplate<\/code>.<\/li>\n
  2. Wire the DataTemplateSelector<\/code> to the ListView<\/code> by setting the ItemTemplate<\/code> property.<\/li>\n<\/ol>\n
    Create a DataTemplateSelector<\/h3>\n
    To customize cells, create a custom class that inherits from DataTemplateSelector<\/code> and override the OnSelectTemplate<\/code> method. The parameter item provides you the bound data of the cell, which in turn can be used to write logic to generate a custom template. In this example, the binding context is a MessageViewModel<\/code>, which is then used to determine which type of data template should be displayed. We have defined two DataTemplates—incomingDataTemplate<\/code> and outgoingDataTemplate<\/code>. The OnSelectTemplate<\/code> method returns appropriate template based on if the message is incoming or outgoing. To ensure that we avoid potential memory leaks, it’s always important to keep a reference to each data template in memory.<\/p>\n
    class MyDataTemplateSelector : Xamarin.Forms.DataTemplateSelector\n{\n    public MyDataTemplateSelector()\n    {\n        \/\/ Retain instances!\n        this.incomingDataTemplate = new DataTemplate(typeof(IncomingViewCell));\n        this.outgoingDataTemplate = new DataTemplate(typeof(OutgoingViewCell));\n    }\n\n    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)\n    {\n        var messageVm = item as MessageViewModel;\n        if (messageVm == null)\n            return null;\n        return messageVm.IsIncoming ? this.incomingDataTemplate : this.outgoingDataTemplate;\n    }\n\n    private readonly DataTemplate incomingDataTemplate;\n    private readonly DataTemplate outgoingDataTemplate;\n}\n<\/pre>\n
    Applying the DataTemplateSelector in XAML<\/h3>\n
    There are multiple ways you can reference the DataTemplateSelector<\/code> in XAML. Either you can create an instance of the selector in your ViewModel and bind them to the ListView<\/code>‘s ItemTemplate<\/code> property or create a static resource within ResourceDictionary<\/code> and directly reference them in ListView, as seen below:<\/p>\n
        \n  \n    \n      \n    \n  \n\n  \n    \n<\/pre>\n
    When using DataTemplateSelectors<\/code>, it’s important to keep in mind the following limitations:<\/p>\n