带有x：bind的RadLoopingList

Question

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

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

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

我面临的问题是，控件将所有绑定包装到“Item”中，因此绑定看起来像这样：

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

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

  

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

此问题是否有解决方法？

更新：这是我的完整DataTemplate：

<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，项属性的类型为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属性是object类型，但你至少可以使用转换器。

解决方法

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

示例：

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

的MainPage：

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