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

GitHub Issue	n/a
Type	Story
Priority	None
Status	Closed
Resolution	Done
Resolution Date	2018-05-08T05:42:02.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	ListView, Windows, template
Reporter	Shuo Liang
Assignee	Kota Iguchi
Created	2018-04-10T01:20:05.000+0000
Updated	2018-05-11T16:44:10.000+0000

Description

Query:

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?

Comments

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]
   });
   
   win.add(listView1);
   win.add(listView2);
   win.open();

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.

   <ResourceDictionary
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
       <DataTemplate x:Key="defaultItemTemplate">
           <Grid Height="60" Margin="6">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="54" Height="54">
                   <Image Source="{Binding Image}" Stretch="UniformToFill"/>
               </Border>
               <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"/>
               </StackPanel>
           </Grid>
       </DataTemplate>
   
       <DataTemplate x:Key="itemTemplate2">
           <Grid Height="60" Margin="12">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="58" Height="58">
                   <Image Source="{Binding Image}" Stretch="UniformToFill"/>
               </Border>
               <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="20,0,0,0">
                   <TextBlock Text="{Binding Title}" TextWrapping="NoWrap"/>
               </StackPanel>
           </Grid>
       </DataTemplate>
   
       <GroupStyle x:Key="defaultItemTemplateGroupStyle">
           <GroupStyle.HeaderTemplate>
               <DataTemplate>
                   <TextBlock
                       Text="{Binding Title}"
                       FontSize="40" />
               </DataTemplate>
           </GroupStyle.HeaderTemplate>
       </GroupStyle>
   
   </ResourceDictionary>

Shuo Liang 2018-04-10

Thanks a lot. Will inform user now.
Kota Iguchi 2018-05-08

I think this can be closed for now. Feel free to reopen if that's not the case.
Ajith Rohini 2018-05-11

[~kiguchi], Many thanks for your help here!

JSON Source