RadLoopingList mit x: bind

Question

Ich verwende die RadLoopingList aus dem Telerik.UI.for.UniversalWindowsPlattform Paket. Ich frage mich, ob dieses Steuerelement mit x: bind in ItemTemplate verwendet werden kann?

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

Das Problem, das ich bin Bewurf ist, dass alle Bindungen durch die Steuerung in einen „Item“ gewickelt, werden so Bindings wie folgt aussehen:

Ich habe die Itemssource auf ein ObservableCollection<MyModel> wie folgt festgelegt : So

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

wenn ich die DataContext="MyModel" und <TextBlock Text="{x:Bind DisplayName}" /> ist diesen Fehler auf läuft die App

'Falscher Typ in Vorlage übergeben. Basierend auf dem x: DataType wurde global :: MyAppProject.Models.MyModel erwartet. '

Gibt es eine Problemumgehung für dieses Problem?

Update: hier meine volle 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

Sie sind korrekt, können Sie nicht x:Bind in diesem Szenario verwenden, ist hier, warum:

Im Falle des RadLoopingList, das gebundene Element ist vom Typ LoopingListDataItem und der Artikel Eigentum ist vom Typ object. Go here to see the source code for the LoopingListDataItem.

Leider können Sie das DataTemplate-Attribut x:DataType nicht auf LoopingListDataItem festlegen, da es sich um eine interne-Klasse handelt.

I have submitted this issue to the UI for UWP repo schlägt vor, dass sie es in eine öffentliche Klasse ändern, so dass Sie x: Bind auf ItemTemplate verwenden können. Ich sehe jedoch immer noch andere Probleme, da die Item-Eigenschaft vom Typ Objekt ist, aber Sie können zumindest einen Konverter verwenden.

Umgehung

Vorerst empfehle ich einen Hybridansatz: Verwenden x: Binden für die Itemssource und traditionelle Bindung in der ItemTemplate.

Beispiel:

Hier ist die komplette Demo ich während meiner Untersuchung verwendet:

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> 

Modelle:

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