无法在 Xamarin Forms 的 CarouselView 中显示来自 DataTemplateSelector 的 DataTemplate

如何解决无法在 Xamarin Forms 的 CarouselView 中显示来自 DataTemplateSelector 的 DataTemplate

我的 Xam.Forms 项目中有一个轮播视图。我还创建了 3 个 ContentViews（每个 DataTemplate 一个）。我的模板选择器类看起来像这样

public class DashboardTemplateSelector : DataTemplateSelector
{
    public DataTemplate QuickMessageTemplate { get; set; }
    public DataTemplate DataViewTemplate { get; set; }
    public DataTemplate LastUsedTemplate { get; set; }

    public DashboardTemplateSelector()
    {
        QuickMessageTemplate = new DataTemplate(typeof(QuickMessage));
        DataViewTemplate = new DataTemplate(typeof(DataView));
        LastUsedTemplate = new DataTemplate(typeof(LastusedView));
    }

    protected override DataTemplate OnSelectTemplate(object item,BindableObject container)
    {
        var cv = (Frame)item;
        DataTemplate rv = null;

        switch(cv.ClassId)
        {
            case "data":
                rv = DataViewTemplate;
                break;
            case "quick":
                rv= QuickMessageTemplate;
                break;
            case "last":
                rv = LastUsedTemplate;
                break;
        }
        return rv;
    }

没什么特别的，我在 ContentView 中的每个帧上设置了 ClassId 以匹配开关中的名称。

当我构建应用程序并运行它时，它看起来不错，但 CarouselView 中没有任何内容，并且永远不会命中 OnSelectTemplate 方法（第一行）中设置的断点。

我的 carouselview 的 XAML 是这个

<ContentPage.Resources>
    <ResourceDictionary>
        <local:DashboardTemplateSelector x:Key="templateSelector" />
    </ResourceDictionary>
</ContentPage.Resources>

<CarouselView Grid.Row="2" PeekAreaInsets="12" Margin="8" ItemTemplate="{StaticResource templateSelector}" HeightRequest="200" BackgroundColor="BlueViolet" />

视图显示（可以看到背景颜色）但视图本身没有任何内容。

我只在实体 android 设备上检查过这个，而没有在 iOS 上检查过，但我猜是同样的结果。我的猜测是我无法将对象转换为 Frame，但我不确定。

解决方法

要填充数据，您必须通过 DataBinding 或 Code-Behind 设置 ItemsSource。 然后您的 DataTemplateSelector 将使用 ItemsSource 的每个项目作为对象项目。请参阅此处的文档：https://docs.microsoft.com/fr-fr/xamarin/xamarin-forms/user-interface/carouselview/layout

<CarouselView Grid.Row="2" PeekAreaInsets="12" Margin="8" ItemsSource="{Binding ViewsViewModels} ItemTemplate="{StaticResource templateSelector}" HeightRequest="200" BackgroundColor="BlueViolet" />

,

OnSelectTemplate 中的项目是项目源数据。将项目更改为容器并使用 CarouselView 而不是 Frame。不要忘记设置 ClassId 的 CarouselView。

整个项目供您参考。

XML：

 <ContentPage.Resources>
    <ResourceDictionary>
        <local:DashboardTemplateSelector x:Key="templateSelector" />
    </ResourceDictionary>
</ContentPage.Resources>


<CarouselView
    Grid.Row="2"
    Margin="8"
    ClassId="data"
    HeightRequest="200"
    ItemTemplate="{StaticResource templateSelector}"
    ItemsSource="{Binding infos}"
    PeekAreaInsets="12" />

背后的代码：

public partial class MainPage : ContentPage
{
    public ObservableCollection<Info> infos { get; set; }
    public MainPage()
    {
        InitializeComponent();
        infos = new ObservableCollection<Info>()
        {
            new Info{ DataViewText="DataViewText1",LastusedViewText="LastusedViewText1",QuickMessageText="QuickMessageText1"},new Info{ DataViewText="DataViewText2",LastusedViewText="LastusedViewText2",QuickMessageText="QuickMessageText2"},new Info{ DataViewText="DataViewText3",LastusedViewText="LastusedViewText3",QuickMessageText="QuickMessageText3"},new Info{ DataViewText="DataViewText4",LastusedViewText="LastusedViewText4",QuickMessageText="QuickMessageText4"},};
        this.BindingContext = this;

    }
}
public class Info
{
    public string QuickMessageText { get; set; }
    public string DataViewText { get; set; }
    public string LastusedViewText { get; set; }
}

QuickMessage、DataView 和 LastusedView 是一个内容视图，带有绑定文本的标签。

快速消息：

<Label Text="{Binding QuickMessageText}" />

数据视图：

 <Label Text="{Binding DataViewText}" />

上次查看：

  <Label Text="{Binding LastusedViewText}" />

仪表板模板选择器：

public class DashboardTemplateSelector : DataTemplateSelector
{
    public DataTemplate QuickMessageTemplate { get; set; }
    public DataTemplate DataViewTemplate { get; set; }
    public DataTemplate LastUsedTemplate { get; set; }

    public DashboardTemplateSelector()
    {
        QuickMessageTemplate = new DataTemplate(typeof(QuickMessage));
        DataViewTemplate = new DataTemplate(typeof(DataView));
        LastUsedTemplate = new DataTemplate(typeof(LastusedView));
    }

   
    protected override DataTemplate OnSelectTemplate(object item,BindableObject container)
    {
        var cv = (CarouselView)container;
        DataTemplate rv = null;

        switch (cv.ClassId)
        {
            case "data":
                rv = DataViewTemplate;
                break;
            case "quick":
                rv = QuickMessageTemplate;
                break;
            case "last":
                rv = LastUsedTemplate;
                break;
        }
        return rv;
    }
}