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}" /> 时，在运行应用程序

上出现此错误

'Incorrect type passed into template. Based on the x:DataType global::MyAppProject.Models.MyModel was expected.'

这个问题有解决方法吗？

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

<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，因为它是一个 internal class.

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

解决方法

目前，我推荐一种混合方法：使用 x:Bind 作为 ItemTemplate 中的 ItemsSource 和传统 Binding。

示例：

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

主页：

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

x:bind 的 RadLoopingList

RadLoopingList with x:bind

c#

telerik

uwp

uwp-xaml

xaml-binding