Xamarin表单(跨平台):ListView中的多种类型的单元格

Question

我是Xamarin的新手.我有一个要求,我必须实现一个ListView或说tableView有多个不同的类型大小的单元格.而且我还必须为特定的单元格部分添加Header,并且我的一些自定义单元格中有一个水平滚动.

我之前在iOS原生UITableView中做过这件事,但不知道Xamarin交叉平台是如何完成的,任何人都可以帮我解决这个问题吗？

Answer 1

您正在寻找DataTemplateSelector,这在官方Xamarin.Forms文档中有很好的记录.

基础是您创建自己的DataTemplateSelector类:

public class MyDataTemplateSelector : DataTemplateSelector
{

}

在该类中,您覆盖OnSelectTemplate:

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

通过检查item参数的类型,您应该能够确定要返回的模板.

所以,假设你有一个ViewModelfor Dog和one for,Cat并希望DataTemplate为每个人展示不同的东西.你会做的事情如下:

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;
    }
}

然后你可以在你的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>

然后,只需将ItemTemplate您在dogCatTemplateSelector实例中定义的实例设置为ListView:

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

ViewModel然后你会看起来像:

public class Animal : INotifyPropertyChanged
{
}

public class DogViewModel : Animal
{
}

public class CatViewModel : Animal
{
}

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

然后你只会填充DogsCatsCollection狗和猫的实例.