[MOD-2409] TI.XAML.LISTVIEW - ListItem templates for multiple ListViews

GitHub Issuen/a
Resolution Date2018-05-08T05:42:02.000+0000
Affected Version/sn/a
Fix Version/sn/a
LabelsListView, Windows, template
ReporterShuo Liang
AssigneeKota Iguchi



Customer is trying to get to implement the module https://github.com/appcelerator-modules/ti.xaml.listview in Ti Windows project, where there happens to be multiple ListViews in different screens. Each ListView obviously has its own UI appearance (so they have defined several templates for each ListItems). So we're kind of figuring out how would we 'translate' these templates to this module. The thing is that judging by its documentation and this https://github.com/appcelerator-modules/ti.xaml.listview/blob/master/windows/include/TiXamlListView.hpp#L73-L75 it would appear that you can only have one template definition in a single project. So the question here is: Given a project with: Screen 1 - Contains ListView1 Screen 2 - Contains ListView2 Screen 3 - Contains ListView3 Screen N - Contains ListViewN And each ListView's ListItems look different by design - How can we style all of this ListVIews' items with the given module implementation?


  1. Kota Iguchi 2018-04-10 In order to use multiple styles in the project, use defaultItemTemplate property. It searches for the template with the given key in the <DataTemplate>> and apply the style, that way you can use multiple styles in one project. Here's an example:
       var ListView = require('ti.xaml.listview');
       var win = Ti.UI.createWindow({ backgroundColor: 'green', layout: 'vertical' });
       var items0 = [],
           items1 = [],
           items2 = [];
       for (var i = 0; i < 20; i++) {
           items0.push({ properties: { title: 'Fruit ' + i, image: 'Square150x150Logo.png' } });
           items1.push({ properties: { title: 'Vegetable ' + i, image: 'Square150x150Logo.png' } });
           items2.push({ properties: { title: 'Meat ' + i, image: 'Square150x150Logo.png' } });
       var fruitSection = Ti.UI.createListSection({
           headerTitle: 'Fruits',
           items: items0
           vegSection = Ti.UI.createListSection({
               headerTitle: 'Vegetables',
               items: items1
           meatSecion = Ti.UI.createListSection({
               headerTitle: 'Meats',
               items: items2
       var listView1 = new ListView({
           width: Ti.UI.FILL,
           height: '40%',
           sections: [fruitSection, vegSection]
       var listView2 = new ListView({
           width: Ti.UI.FILL,
           height: '40%',
           defaultItemTemplate: 'itemTemplate2',
           sections: [meatSecion]
    In this case, the code defaultItemTemplate: 'itemTemplate2' searches for <DataTemplate x:Key=itemTemplate2> data template in the style xml. For instance check out the template below.
           <DataTemplate x:Key="defaultItemTemplate">
               <Grid Height="60" Margin="6">
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="54" Height="54">
                       <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                   <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                       <TextBlock Text="{Binding Title}" TextWrapping="NoWrap"/>
                       <TextBlock Text="{Binding Subtitle}" TextWrapping="NoWrap"/>
                       <TextBlock Text="{Binding Description}" MaxHeight="54"/>
           <DataTemplate x:Key="itemTemplate2">
               <Grid Height="60" Margin="12">
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="58" Height="58">
                       <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                   <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="20,0,0,0">
                       <TextBlock Text="{Binding Title}" TextWrapping="NoWrap"/>
           <GroupStyle x:Key="defaultItemTemplateGroupStyle">
                           Text="{Binding Title}"
                           FontSize="40" />
  2. Shuo Liang 2018-04-10 Thanks a lot. Will inform user now.
  3. Kota Iguchi 2018-05-08 I think this can be closed for now. Feel free to reopen if that's not the case.
  4. Ajith Rohini 2018-05-11 [~kiguchi], Many thanks for your help here!

JSON Source