無法在 Xamarin Forms 的 CarouselView 中顯示來自 DataTemplateSelector 的 DataTemplate

Question

我的 Xam.Forms 項目中有一個輪播視圖。 我還創建了 3 個 ContentViews（每個 DataTemplate 一個）。 我的模板選擇器 class 看起來像這樣

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 上檢查過這個，但我猜同樣的結果。 我的猜測是我不能為 object 轉換成框架，但我不確定。

Answer 1

要填充數據，您必須通過 DataBinding 或 Code-Behind 設置 ItemsSource。 然后，您的 DataTemplateSelector 將被 ItemsSource 的每個項目作為 object 項目命中。 請在此處查看文檔： 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 。 不要忘記設置CarouselView的ClassId 。

整個項目供您參考。

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 的內容視圖，它綁定了一個文本。

快訊：

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