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

Question

我的 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 方法（第一行）中设置的断点从未被命中。

我的轮播视图的 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，但我不确定。

Answer 1

要填充数据，您必须通过 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" />

Answer 2

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

整个项目供您参考。

Xaml：

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