web-dev-qa-db-fra.com

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

Quelqu'un peut-il expliquer ItemTemplate.DataTemplate et ListView. Dans cet extrait de code. Je ne comprends vraiment pas le concept de Templates, ce sera très utile si quelqu'un peut aussi éclairer cela. J'avais regardé cette question:

Application Metro: ListView ItemTemplate DataTemplate pour l'élément sélectionné

Mais toujours confus. Je vous remercie! :(

<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>
listviewtemplateswindows-phone-7windows-phone-8uwp
18
Hemant-Webo

ListView est un contrôle qui vous permet d'afficher dynamiquement une liste d'éléments afin que les utilisateurs puissent faire défiler cette liste d'éléments pour les voir et trouver tout ce dont ils peuvent avoir besoin. C'est vraiment simple de le définir en XAML:

<ListView x:Name="StudentsList" />

Maintenant, disons que vous avez une liste d'étudiants universitaires. Chaque élève est représenté avec une simple classe étudiante.

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

Il peut y avoir des dizaines, des centaines ou des milliers d'étudiants, vous ne pouvez donc pas définir statiquement l'interface utilisateur. Vous gardez généralement ces étudiants dans une sorte de liste/collection en code-behind. Vous les récupérez à partir de diverses sources - base de données, services Web ou codage en dur, 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 sert de source d'éléments pour le ListView, vous définissez donc la propriété ItemsSource du ListView pour connecter les deux et afficher la liste dans l'interface utilisateur. À l'aide d'un ListView, tous les éléments sont rendus dynamiquement quel que soit le nombre d'éléments.

Si nous exécutions l'application maintenant, ce serait assez moche cependant:

Ugly ListView

Vous devez définir un DataTemplate pour le rendre plus joli. Étant donné que chaque élève a un nom et un âge, vous voudrez utiliser ces propriétés pour le rendre plus joli. Ce DataTemplate est affecté à 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>

Vous voyez, j'ai utilisé le DataTemplate pour définir les propriétés à afficher et comment les rendre - j'ai joué avec la taille de la police, les couleurs de police, les marges, etc. J'avoue que ce n'est pas vraiment joli, mais je suis sûr que vous obtiendrez point:

A bit prettier ListView

Une autre chose que vous remarquerez est que j'ai utilisé une construction de liaison comme celle-ci:

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

Cela signifie essentiellement: 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, vous pouvez donc utiliser différents modèles pour différents éléments dans une seule liste, etc.

TLDR: ListView affiche dynamiquement une liste d'éléments. ItemsSource définit la source des é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 la ListView sache qu'elle doit utiliser exactement ce modèle pour rendre ses éléments.

48
Igor Ralic