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

Lars Vinberg 101 Reputation points
2021-03-07T02:18:12.91+00:00

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?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,323 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points
    2021-03-08T09:53:12.253+00:00

    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.

    0 comments No comments