使用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的預期。

是否有解決此問題的方法？

更新：這裏是我的全部的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屬性是類型對象，但您至少可以使用轉換器。

解決方法

現在，我推薦一種混合的方法：使用X：爲綁定的ItemsSource和傳統在ItemTemplate綁定。

例子：

這裏是我在我的調查過程中使用的完整演示：

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