如何将 ListView/CollectionView 的数据模板绑定到 ViewModel 属性

Question

我正在构建一个Xamarin Forms控件库供内部使用，我试图定义一个DataTemplate作为一个可绑定的属性，通过ViewModel传递并设置为CollectionView。当我这样做时，我在Xamarin Forms非托管代码中得到了一个NRE，并且我没有详细说明这是导致捕获异常中的NRE的原因。这让我怀疑这是否可行。我在网上找到的所有例子都直接设置了ItemTemplate，从来不是一个绑定属性。那么，这是可行的吗?

这是Xamarin中出现异常的地方。表单代码

// Set the binding context _before_ we create the renderer; that way, it's available during OnElementChanged
view.BindingContext = bindingContext;

这个属性似乎是一个可绑定的属性，所以我认为这应该没有问题。

public static readonly BindableProperty ItemTemplateProperty;

集合视图…

<CollectionView Grid.Row="3"
Margin="16,0,16,16"
ItemTemplate="{Binding ItemTemplate}" <--- this is what I am trying to make work
ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem}"
SelectionChangedCommand="{Binding SelectedItemChanged}"
SelectionMode="Single"
VerticalOptions="Center"
VerticalScrollBarVisibility="Always" />

视图模型……

private DataTemplate _itemTemplate;
public DataTemplate ItemTemplate
{
get
{
return _itemTemplate;
}
set
{
SetProperty(ref _itemTemplate, value);
}
}
...
ItemTemplate = new DataTemplate(() =>
{
var grid = new Grid();
var nameLabel = new Label { FontAttributes = FontAttributes.Bold };
var ageLabel = new Label();
var locationLabel = new Label { HorizontalTextAlignment = TextAlignment.End };
nameLabel.SetBinding(Label.TextProperty, "Title");
ageLabel.SetBinding(Label.TextProperty, "Sybtitle");
locationLabel.SetBinding(Label.TextProperty, "Title");
grid.Children.Add(nameLabel);
grid.Children.Add(ageLabel, 1, 0);
grid.Children.Add(locationLabel, 2, 0);
return new ViewCell { View = grid };
});

List Item Model…

public class ListPickerListItem {
public ListPickerListItem(string title, string subtitle = "", string icon = "", string image = "")
{
Title = title;
Subtitle = subtitle;
Icon = icon;
Image = image;
}
public string Title { get; set; }
public string Subtitle { get; set; }
public string Icon { get; set; }
public string Image { get; set; }
// prioritize the Image over the Icon since the Image has a default placeholder
public bool IsIconVisible { get { return string.IsNullOrEmpty(Icon) == false && string.IsNullOrEmpty(Image); } }
public bool IsImageVisible { get { return string.IsNullOrEmpty(Image) == false; } }
}

异常堆栈…

at Xamarin.Forms.Platform.iOS.TemplatedCell.Bind (Xamarin.Forms.DataTemplate template, System.Object bindingContext, Xamarin.Forms.ItemsView itemsView) [0x00068] in D:a1sXamarin.Forms.Platform.iOSCollectionViewTemplatedCell.cs:117 
at Xamarin.Forms.Platform.iOS.ItemsViewController`1[TItemsView].UpdateTemplatedCell (Xamarin.Forms.Platform.iOS.TemplatedCell cell, Foundation.NSIndexPath indexPath) [0x0007b] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewController.cs:262 
at Xamarin.Forms.Platform.iOS.ItemsViewController`1[TItemsView].CreateMeasurementCell (Foundation.NSIndexPath indexPath) [0x0007b] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewController.cs:587 
at Xamarin.Forms.Platform.iOS.ItemsViewController`1[TItemsView].GetPrototype () [0x0005d] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewController.cs:362 
at Xamarin.Forms.Platform.iOS.ItemsViewLayout.DetermineCellSize () [0x00060] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewLayout.cs:211 
at Xamarin.Forms.Platform.iOS.ListViewLayout.ConstrainTo (CoreGraphics.CGSize size) [0x0001e] in D:a1sXamarin.Forms.Platform.iOSCollectionViewListViewLayout.cs:16 
at Xamarin.Forms.Platform.iOS.ItemsViewLayout.SetInitialConstraints (CoreGraphics.CGSize size) [0x00007] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewLayout.cs:111 
at Xamarin.Forms.Platform.iOS.ItemsViewController`1[TItemsView].EnsureLayoutInitialized () [0x00044] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewController.cs:192 
at Xamarin.Forms.Platform.iOS.ItemsViewController`1[TItemsView].ViewDidLoad () [0x00035] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewController.cs:148 
at (wrapper managed-to-native) ObjCRuntime.Messaging.IntPtr_objc_msgSendSuper(intptr,intptr)
at UIKit.UIViewController.get_View () [0x0002a] in /Users/builder/azdo/_work/1/s/xamarin-macios/src/build/ios/native/UIKit/UIViewController.g.cs:3265 
at Xamarin.Forms.Platform.iOS.ItemsViewRenderer`2[TItemsView,TViewController].SetUpNewElement (TItemsView newElement) [0x00022] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewRenderer.cs:102 
at Xamarin.Forms.Platform.iOS.StructuredItemsViewRenderer`2[TItemsView,TViewController].SetUpNewElement (TItemsView newElement) [0x00000] in D:a1sXamarin.Forms.Platform.iOSCollectionViewStructuredItemsViewRenderer.cs:41 
at Xamarin.Forms.Platform.iOS.SelectableItemsViewRenderer`2[TItemsView,TViewController].SetUpNewElement (TItemsView newElement) [0x00000] in D:a1sXamarin.Forms.Platform.iOSCollectionViewSelectableItemsViewRenderer.cs:34 
at Xamarin.Forms.Platform.iOS.ItemsViewRenderer`2[TItemsView,TViewController].OnElementChanged (Xamarin.Forms.Platform.iOS.ElementChangedEventArgs`1[TElement] e) [0x0000c] in D:a1sXamarin.Forms.Platform.iOSCollectionViewItemsViewRenderer.cs:36 
at Xamarin.Forms.Platform.iOS.VisualElementRenderer`1[TElement].SetElement (TElement element) [0x00172] in D:a1sXamarin.Forms.Platform.iOSVisualElementRenderer.cs:296 
at Xamarin.Forms.Platform.iOS.VisualElementRenderer`1[TElement].Xamarin.Forms.Platform.iOS.IVisualElementRenderer.SetElement (Xamarin.Forms.VisualElement element) [0x00000] in D:a1sXamarin.Forms.Platform.iOSVisualElementRenderer.cs:158 
at Xamarin.Forms.Platform.iOS.Platform.CreateRenderer (Xamarin.Forms.VisualElement element) [0x00032] in D:a1sXamarin.Forms.Platform.iOSPlatform.cs:240 
at Xamarin.Forms.Platform.iOS.VisualElementPackager.OnChildAdded (Xamarin.Forms.VisualElement view) [0x0003e] in D:a1sXamarin.Forms.Platform.iOSVisualElementPackager.cs:115 
at Xamarin.Forms.Platform.iOS.VisualElementPackager.Load () [0x0001e] in D:a1sXamarin.Forms.Platform.iOSVisualElementPackager.cs:49 
at Xamarin.Forms.Platform.iOS.VisualElementRenderer`1[TElement].SetElement (TElement element) [0x0012e] in D:a1sXamarin.Forms.Platform.iOSVisualElementRenderer.cs:283 
at Xamarin.Forms.Platform.iOS.VisualElementRenderer`1[TElement].Xamarin.Forms.Platform.iOS.IVisualElementRenderer.SetElement (Xamarin.Forms.VisualElement element) [0x00000] in D:a1sXamarin.Forms.Platform.iOSVisualElementRenderer.cs:158 
at Xamarin.Forms.Platform.iOS.Platform.CreateRenderer (Xamarin.Forms.VisualElement element) [0x00032] in D:a1sXamarin.Forms.Platform.iOSPlatform.cs:240 
at Xamarin.Forms.Platform.iOS.VisualElementPackager.OnChildAdded (Xamarin.Forms.VisualElement view) [0x0003e] in D:a1sXamarin.Forms.Platform.iOSVisualElementPackager.cs:115 
at Xamarin.Forms.Platform.iOS.VisualElementPackager.Load () [0x0001e] in D:a1sXamarin.Forms.Platform.iOSVisualElementPackager.cs:49 
at Xamarin.Forms.Platform.iOS.VisualElementRenderer`1[TElement].SetElement (TElement element) [0x0012e] in D:a1sXamarin.Forms.Platform.iOSVisualElementRenderer.cs:283 
at Xamarin.Forms.Platform.iOS.VisualElementRenderer`1[TElement].Xamarin.Forms.Platform.iOS.IVisualElementRenderer.SetElement (Xamarin.Forms.VisualElement element) [0x00000] in D:a1sXamarin.Forms.Platform.iOSVisualElementRenderer.cs:158 
at Xamarin.Forms.Platform.iOS.Platform.CreateRenderer (Xamarin.Forms.VisualElement element) [0x00032] in D:a1sXamarin.Forms.Platform.iOSPlatform.cs:240 
at Xamarin.Forms.Platform.iOS.VisualElementPackager.OnChildAdded (Xamarin.Forms.VisualElement view) [0x0003e] in D:a1sXamarin.Forms.Platform.iOSVisualElementPackager.cs:115 
at Xamarin.Forms.Platform.iOS.VisualElementPackager.Load () [0x0001e] in D:a1sXamarin.Forms.Platform.iOSVisualElementPackager.cs:49 
at Xamarin.Forms.Platform.iOS.PageRenderer.ViewDidLoad () [0x0008f] in D:a1sXamarin.Forms.Platform.iOSRenderersPageRenderer.cs:251 
at Rg.Plugins.Popup.IOS.Renderers.PopupPageRenderer.ViewDidLoad () [0x00000] in Z:DocumentsOpenSourceRg.Plugins.PopupRg.Plugins.PopupPlatformsIosRenderersPopupPageRenderer.cs:74 
at (wrapper managed-to-native) ObjCRuntime.Messaging.IntPtr_objc_msgSendSuper(intptr,intptr)
at UIKit.UIViewController.get_View () [0x0002a] in /Users/builder/azdo/_work/1/s/xamarin-macios/src/build/ios/native/UIKit/UIViewController.g.cs:3265 
at Xamarin.Forms.Platform.iOS.PageRenderer.get_NativeView () [0x00000] in D:a1sXamarin.Forms.Platform.iOSRenderersPageRenderer.cs:103 
at Xamarin.Forms.Platform.iOS.PageRenderer.SetElement (Xamarin.Forms.VisualElement element) [0x0003d] in D:a1sXamarin.Forms.Platform.iOSRenderersPageRenderer.cs:119 
at Xamarin.Forms.Platform.iOS.Platform.CreateRenderer (Xamarin.Forms.VisualElement element) [0x00032] in D:a1sXamarin.Forms.Platform.iOSPlatform.cs:240 
at Rg.Plugins.Popup.IOS.Extensions.PlatformExtension.GetOrCreateRenderer (Xamarin.Forms.VisualElement bindable) [0x0000a] in Z:DocumentsOpenSourceRg.Plugins.PopupRg.Plugins.PopupPlatformsIosExtensionsPlatformExtension.cs:21 
at Rg.Plugins.Popup.IOS.Impl.PopupPlatformIos.AddAsync (Rg.Plugins.Popup.Pages.PopupPage page) [0x00052] in Z:DocumentsOpenSourceRg.Plugins.PopupRg.Plugins.PopupPlatformsIosImplPopupPlatformIos.cs:55 
at Rg.Plugins.Popup.Services.PopupNavigationImpl.AddAsync (Rg.Plugins.Popup.Pages.PopupPage page) [0x00000] in Z:DocumentsOpenSourceRg.Plugins.PopupRg.Plugins.PopupServicesPopupNavigationImpl.cs:175 
at Rg.Plugins.Popup.Services.PopupNavigationImpl+<>c__DisplayClass20_0.<PushAsync>b__0 () [0x00047] in Z:DocumentsOpenSourceRg.Plugins.PopupRg.Plugins.PopupServicesPopupNavigationImpl.cs:73 

Answer 1

感谢@FabriBertani提供的链接，它为我指出了异常的原因。当使用CollectionView时，永远不要将DataTemplate对象的根元素设置为ViewCell。这将导致抛出异常，因为CollectionView没有单元格的概念。让模板的外部视图是Grid而不是不支持的Cell解决了这个问题。