How to share an ItemTemplate between a ListView and a CollectionView?

Question

Because of bugs and limitations with ListView and CollectionView on various platforms, it looks like I have to have a parallel implementations using both controls.

The challenge with a shared ItemTemplate is that Listview requires the use of a Cell in the template, whereas CollectionView cannot handle Cell:

<DataTemplate>
    <ViewCell> <!-- required by ListView, not allowed with CollectionView -->
        <Grid>
            ....
       </Grid>
    </ViewCell>
</DataTemplate>

My ItemTemplate is fairly complex, so I am looking for a way to share the bulk of my template between the two list controls.
So far no luck - I even tried to create the template in code-behind but could not get the correct BindingContext.

Any ideas?

Answer 1

Hello,

Welcome to Microsoft Q&A!

As a workaround you can use create a DataTemplateSelector , select the template according to the property defined in model .

Model and DataTemplateSelector

   public class Model  
       {  
           public bool isListView { get; set; }  
       }  
     
       public class MyTemplateSelector : DataTemplateSelector  
       {  
           public DataTemplate ListViewTemplate { get; set; }  
           public DataTemplate CollectionViewTemplate { get; set; }  
     
           protected override DataTemplate OnSelectTemplate(object item, BindableObject container)  
           {  
               return ((Model)item).isListView ? ListViewTemplate : CollectionViewTemplate;  
           }  
       }  

DataTemplate in App

   <Application.Resources>  
           <ResourceDictionary>  
               <DataTemplate x:Key="ListViewTemplate">  
                   <ViewCell>  
                       <StackLayout>  
                           <Label />  
                       </StackLayout>  
                   </ViewCell>  
               </DataTemplate>  
               <DataTemplate x:Key="CollectionViewTemplate">  
                   <StackLayout>  
                       <Label />  
                   </StackLayout>  
               </DataTemplate>  
               <local:MyTemplateSelector x:Key="MyTemplateSelector"  
                   ListViewTemplate="{StaticResource ListViewTemplate}"  
                   CollectionViewTemplate="{StaticResource CollectionViewTemplate}" />  
           </ResourceDictionary>  
       </Application.Resources>  

Usage

   <ListView  ItemTemplate="{StaticResource MyTemplateSelector}" />  
   <CollectionView  ItemTemplate="{StaticResource MyTemplateSelector}" />  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.