带有 x:bind 的 RadLoopingList

Question

我正在使用 Telerik.UI.for.UniversalWindowsPlattform 包中的 RadLoopingList。我想知道，这个控件是否可以与 ItemTemplate 中的 x:bind 一起使用？

我已将 ItemsSource 设置为 ObservableCollection<MyModel>，如下所示：

ItemsSource="{x:Bind ViewModel.Files, Mode=OneWay}"

我面临的问题是，所有绑定都被控件包装成一个“项目”，所以绑定看起来像这样：

<TextBlock Text="{Binding Item.DisplayName}" />

所以当我设置DataContext="MyModel" 和<TextBlock Text="{x:Bind DisplayName}" /> 时，在运行应用程序时会出现此错误

'传入模板的类型不正确。基于 x:DataType global::MyAppProject.Models.MyModel 是预期的。'

这个问题有解决办法吗？

更新：这是我的完整数据模板：

<telerikLoopingList:RadLoopingList.ItemTemplate>
    <DataTemplate x:DataType="MyModel">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Image Source="{x:Bind Item.ThumbnailImage}" />
            <TextBlock Text="{x:Bind Item.File.DisplayName}" />
        </Grid>
    </DataTemplate>
</telerikLoopingList:RadLoopingList.ItemTemplate>



public class MyModel { 

    public string DisplayName;
    public File File;

}

Answer 1

你是对的，在这种情况下你不能使用x:Bind，原因如下：

对于RadLoopingList，绑定项的类型为LoopingListDataItem，Item 属性的类型为object。 Go here to see the source code for the LoopingListDataItem.

很遗憾，您不能将 DataTemplate 的 x:DataType 属性设置为 LoopingListDataItem，因为它是一个内部类。

I have submitted this issue to the UI for UWP repo 建议他们将其更改为公共类，以便您可以在 ItemTemplate 上使用 x:Bind。但是，我仍然预见到其他问题，因为 Item 属性是对象类型，但您至少可以使用转换器。

解决方法

目前，我推荐一种混合方法：对 ItemsSource 使用 x:Bind，在 ItemTemplate 中使用传统绑定。

示例：

这是我在调查期间使用的完整演示：

主页：

<Page
x:Class="LoopingListTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:LoopingListTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:loopingList="using:Telerik.UI.Xaml.Controls.Primitives.LoopingList"
xmlns:viewModels="using:LoopingListTest.ViewModels"
mc:Ignorable="d">

<Page.DataContext>
    <viewModels:MainViewModel x:Name="ViewModel"/>
</Page.DataContext>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <loopingList:RadLoopingList x:Name="LoopingList" 
                                ItemsSource="{x:Bind ViewModel.Files}" >
        <loopingList:RadLoopingList.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">
                    <Image Source="{Binding Item.ThumbnailImage}" />
                    <TextBlock Text="{Binding Item.File.DisplayName}" />
                </Grid>
            </DataTemplate>
        </loopingList:RadLoopingList.ItemTemplate>
    </loopingList:RadLoopingList>
</Grid>

型号：

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        Files = GenerateFiles();
    }

    private ObservableCollection<MyModel> GenerateFiles()
    {
        var items = new ObservableCollection<MyModel>();

        for (int i = 0; i < 30; i++)
        {
            items.Add(new MyModel
            {
                ThumbnailImage = "ms-appx:///Images/WindowsLogo.png",
                File = new File
                {
                    DisplayName = $"File {i}"
                }
            });
        }

        return items;
    }

    public ObservableCollection<MyModel> Files { get; set; }
}

public class MyModel
{
    public string ThumbnailImage { get; set; }
    public File File { get; set; }
}

public class File
{
    public string DisplayName { get; set; }
}