Xamarin & .NET Developer Events in August
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’ ListView allows you to display a list of data using cells and a DataTemplate 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 ViewCell. However, this type of customization has one key limitation: the inability to render different types of cells in the same ListView at runtime.
Xamarin.Forms 2.1 introduces DataTemplateSelector, which is a powerful mechanism to customize the presentation of a cell at runtime. While DataTemplate is used to specify the visualization of your data objects, a DataTemplateSelector is used to choose a DataTemplate at runtime based on the value of a data-bound property.
In this blog post, we’ll be using the DataTemplateSelector to create a simple chat user interface (seen below), which will customize the look of the cell with different colors and alignment based on an incoming and outgoing message.
Getting Started
Selecting a DataTemplate at runtime can be implemented in just two easy steps:
- Create a class that inherits from
DataTemplateSelectorand override theOnSelectTemplatemethod to select a particularDataTemplate. - Wire the
DataTemplateSelectorto theListViewby setting theItemTemplateproperty.
Create a DataTemplateSelector
To customize cells, create a custom class that inherits from DataTemplateSelector and override the OnSelectTemplate 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, which is then used to determine which type of data template should be displayed. We have defined two DataTemplates—incomingDataTemplate and outgoingDataTemplate. The OnSelectTemplate 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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
classMyDataTemplateSelector:Xamarin.Forms.DataTemplateSelector
{
publicMyDataTemplateSelector()
{
// Retain instances!
this.incomingDataTemplate=newDataTemplate(typeof(IncomingViewCell));
this.outgoingDataTemplate=newDataTemplate(typeof(OutgoingViewCell));
}
protectedoverrideDataTemplate OnSelectTemplate(objectitem,BindableObject container)
{
varmessageVm=item asMessageViewModel;
if(messageVm==null)
returnnull;
returnmessageVm.IsIncoming?this.incomingDataTemplate:this.outgoingDataTemplate;
}
privatereadonlyDataTemplate incomingDataTemplate;
privatereadonlyDataTemplate outgoingDataTemplate;
}
|
Applying the DataTemplateSelector in XAML
There are multiple ways you can reference the DataTemplateSelector in XAML. Either you can create an instance of the selector in your ViewModel and bind them to the ListView‘s ItemTemplate property or create a static resource within ResourceDictionary and directly reference them in ListView, as seen below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ContentPage.Resources>
<ResourceDictionary>
<local:MyDataTemplateSelectorx:Key=“MessageTemplateSelector”></local:MyDataTemplateSelector>
</ResourceDictionary>
</ContentPage.Resources>
<ListViewx:Name=“MessagesListView”
ItemTemplate=“{StaticResource MessageTemplateSelector}”
ItemsSource=“{Binding Messages}”
HasUnevenRows=“True”
ItemSelected=“MyListView_OnItemSelected”
ItemTapped=“MyListView_OnItemTapped”
SeparatorVisibility=“None”
RelativeLayout.HeightConstraint=“{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}”>
</ListView>
|
When using DataTemplateSelectors, it’s important to keep in mind the following limitations:
- No more than 20 templates per
ListViewon Android. - The
DataTemplateSelectorsubclass MUST return the same template for the same data if queried multiple times. - The
DataTemplateSelectormust not return anotherDataTemplateSelector. - The
DataTemplateSelectormust not return new instances of a DataTemplate on each call, instead the same instance must be returned. Failure to do so will effectively disable virtualization and lead to a memory leak.
Wrapping Up
DataTemplateSelectors are a useful approach for customizing a ListView at the runtime based on a custom defined logic. In addition, since the UI code is logically separated from the code that takes care of template selections, it results in massively increased code maintainability and testability. Download the chat user interface sample shown today to get started with Xamarin.Forms 2.1’s DataTemplateSelector.
Related posts
