Formes Xamarin (multiplate-forme): Plusieurs types de cellules dans ListView

Question

Je suis nouveau sur Xamarin. J'ai une exigence où je dois implémenter un ListView ou dire tableView qui ont plusieurs différentes cellules de taille de type. Et je dois aussi ajouter un en-tête pour une section particulière de cellules, et certaines de mes cellules personnalisées ont un scroll horizontal. J'ai fait cette chose dans iOS UITableView natif auparavant, mais je ne sais pas comment cela se fait dans Xamarin cross platform, quelqu'un peut-il m'aider?

Answer 1

Vous recherchez DataTemplateSelector, qui est très bien documenté dans le Xamarin.Forms documentation officiel.

Les bases sont que vous créez votre propre DataTemplateSelector classe:

public class MyDataTemplateSelector : DataTemplateSelector 
{ 

} 

Dans cette classe vous substituez OnSelectTemplate:

protected override DataTemplate OnSelectTemplate(object item, BindableObject container) 
{ 
} 

En vérifiant le type de l'argument item, vous devriez être en mesure de comprendre quel modèle retourner.

permet donc dire que vous avez un ViewModel pour Dog et un pour Cat et que vous voulez montrer un DataTemplate différent pour chacun de ceux-ci. Vous feriez quelque chose comme:

public class DogCatTemplateSelector : DataTemplateSelector 
{ 
    public DataTemplate DogTemplate { get; set; } 
    public DataTemplate CatTemplate { get; set; } 

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container) 
    { 
     if (item is DogViewModel) 
      return DogTemplate; 
     return CatTemplate; 
    } 
} 

Ensuite, vous pouvez consommer dans votre XAML:

<ContentPage.Resources> 
    <ResourceDictionary> 
     <DataTemplate x:Key="dogTemplate"> 
      <ViewCell> 
       ... <---- define your look of dog template here 
      </ViewCell> 
     </DataTemplate> 
     <DataTemplate x:Key="catTemplate"> 
      <ViewCell> 
       ... <---- define your look of cat template here 
      </ViewCell> 
     </DataTemplate> 
     <local:DogCatTemplateSelector x:Key="dogCatTemplateSelector" 
      DogTemplate="{StaticResource dogTemplate}" 
      CatTemplate="{StaticResource catTemplate}" /> 
    </ResourceDictionary> 
</ContentPage.Resources> 

Ensuite, il suffit de la mettre ItemTemplate à votre dogCatTemplateSelector exemple, vous avez défini les ressources sur votre ListView:

<ListView ItemsSource="{Binding DogsCatsCollection}" ItemTemplate="{StaticResource dogCatTemplateSelector}" /> 

Votre ViewModel serait alors ressembler à:

public class Animal : INotifyPropertyChanged 
{ 
} 

public class DogViewModel : Animal 
{ 
} 

public class CatViewModel : Animal 
{ 
} 

public class MainViewModel : INotifyPropertyChanged 
{ 
    public ObservableCollection<Animal> DogsCatsCollection { get; } 
     = new ObservableCollection<Animal>(); 
} 

Puis vous venez de renseigner DogsCatsCollection avec des instances de chiens et de chats.