Comment utiliser ListView dans la plate-forme Windows universelle (application Windows 10)

Question

Quelqu'un peut-il expliquer s'il vous plaît ItemTemplate.DataTemplate et ListView. Dans cet extrait de code. Je ne comprends vraiment pas le concept de Templates, ce sera une aide complète si quelqu'un peut mettre un peu de lumière sur cela aussi. j'avais l'air à cette question:

Metro app: ListView ItemTemplate DataTemplate for selected item

Mais encore confus. Merci! :(

<ListView Margin="10" Name="lvDataBinding"> 
    <ListView.ItemTemplate> 
      <DataTemplate> 
       <WrapPanel> 
        <TextBlock Text="Name: " /> 
        <TextBlock Text="{Binding Name}" FontWeight="Bold" /> 
        <TextBlock Text=", " /> 
        <TextBlock Text="Age: " /> 
        <TextBlock Text="{Binding Age}" FontWeight="Bold" /> 
        <TextBlock Text=" (" /> 
        <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" /> 
        <TextBlock Text=")" /> 
        </WrapPanel> 
      </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Answer 1

ListView est un contrôle qui vous permet d'afficher dynamiquement une liste d'éléments afin que les utilisateurs peuvent faire défiler la liste des articles à les voir et trouver tout ce dont ils ont besoin. Il est très simple de le définir en XAML.

<ListView x:Name="StudentsList" /> 

maintenant, disons que vous avez une liste des étudiants Chaque étudiant est représenté par une simple classe étudiant

public class Student 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
} 

Il c. Ould être des dizaines, des centaines ou des milliers d'étudiants, de sorte que vous ne pouvez pas définir l'interface utilisateur de façon statique. Vous gardez généralement ces étudiants dans une sorte de liste/collection dans le code-behind. Vous les rapportez de diverses sources - base de données, des services Web, ou coder en dur il, comme je le ferai maintenant à des fins de démonstration:

private List<Student> listOfStudents = new List<Student>(); 

public MainPage() 
{ 
    this.InitializeComponent(); 

    listOfStudents.Add(new Student { Name = "John", Age = 20 }); 
    listOfStudents.Add(new Student { Name = "Bob", Age = 21 }); 
    listOfStudents.Add(new Student { Name = "Steve", Age = 19 }); 
    listOfStudents.Add(new Student { Name = "Marko", Age = 18 }); 
    listOfStudents.Add(new Student { Name = "Igor", Age = 20 }); 
    listOfStudents.Add(new Student { Name = "Ivan", Age = 20 }); 
    listOfStudents.Add(new Student { Name = "Nina", Age = 21 }); 
    listOfStudents.Add(new Student { Name = "Paul", Age = 20 }); 
    listOfStudents.Add(new Student { Name = "Ana", Age = 23 }); 
    listOfStudents.Add(new Student { Name = "Ivana", Age = 20 }); 

    StudentsList.ItemsSource = listOfStudents; 
} 

Cette liste/collection est une source d'éléments pour la ListView, vous définissez la propriété ItemsSource de ListView pour connecter les deux et afficher la liste dans l'interface utilisateur. Utilisation d'un ListView tous les éléments sont rendus dynamiquement quel que soit le nombre d'éléments.

Si nous avons couru l'application maintenant, ce serait assez laid si:

Vous devez définir un DataTemplate pour le rendre plus joli. Puisque chaque étudiant a un nom et un âge, vous voudrez utiliser ces propriétés pour le rendre plus joli. Ce DataTemplate est affecté à la propriété ListView.ItemTemplate et ListView l'utilisera pour chaque élément de la liste.

<ListView x:Name="StudentsList"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <StackPanel> 
       <TextBlock Text="{Binding Name}" 
          Margin="20,0,20,8" 
          FontSize="24" 
          FontStyle="Italic" 
          FontWeight="SemiBold" 
          Foreground="DarkBlue" /> 
       <TextBlock Text="{Binding Age}" 
          Margin="20,0,20,8" 
          FontSize="16" 
          Foreground="DarkGray" 
          Opacity="0.8" /> 
      </StackPanel> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Voir, je le DataTemplate pour définir les propriétés à montrer et comment les rendre - je jouais avec la taille de la police, les couleurs de police, les marges etc. Je dois admettre que ce n'est pas vraiment jolie, mais Je suis sûr que vous obtenez le point:

une chose que vous remarquerez est que j'ai utilisé une liaison construire comme ceci:

<TextBlock Text="{Binding Name}" ... /> 

cette basica lly signifie: Vérifiez si l'objet a la propriété Name et si c'est le cas, rendez-le comme TextBlock.Text.

Notez que les choses peuvent devenir plus compliquées, donc vous pouvez utiliser différents modèles pour différents éléments dans une liste, etc., mais ce n'est pas dans la portée de la question, je pense.

TLDR: ListView rend dynamiquement une liste d'éléments. ItemsSource définit la source d'éléments pour ce ListView. DataTemplate définit un modèle qui sera utilisé pour rendre quelque chose. Cette DataTemplate est affectée à la propriété ItemTemplate de la ListView afin que le ListView sache qu'il doit utiliser exactement ce modèle pour rendre ses éléments.