Come utilizzare ListView in Universal Windows Platform (app per Windows 10)

Question

Qualcuno può spiegare ItemTemplate.DataTemplate e ListView. In questo frammento di codice. Davvero non capisco il concetto di Templates, sarà di aiuto pieno se qualcuno potrebbe mettere un po 'di luce anche su quello. Ho dovuto guardare a questa domanda:

Metro app: ListView ItemTemplate DataTemplate for selected item

Ma ancora confuso. Grazie! :(

<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 è un controllo che permette di mostrare dinamicamente un elenco di elementi in modo che gli utenti possono scorrere quella lista di voci di vederli e trovare tutto ciò che potrebbe avere bisogno. E 'davvero semplice da definire in XAML:.

<ListView x:Name="StudentsList" /> 

Ora, diciamo che avete una lista di studenti universitari Ogni studente è rappresentato con una semplice classe Student

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

Non c. potrebbero essere dozzine, centinaia o migliaia di studenti, quindi non è possibile definire l'interfaccia in modo statico. Di solito tieni quegli studenti in una sorta di lista/collezione in code-behind. È a prenderli da varie fonti - di database, servizi web, o hard-code esso, come farò adesso per scopi dimostrativi:

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

Tale elenco/collezione serve come fonte di articoli per la ListView, in modo da impostare la proprietà ItemsSource di ListView per connettere i due e mostrare l'elenco nell'interfaccia utente. Usando una ListView tutti gli oggetti sono resi dinamicamente indipendentemente dal numero di elementi.

Se abbiamo eseguito l'app ora, sarebbe abbastanza brutto però:

è necessario definire un DataTemplate per renderla più bella. Dato che ogni studente ha un nome ed età, vorrete usare queste proprietà per renderlo più carino. Questo DataTemplate è assegnato alla proprietà ListView.ItemTemplate e ListView lo utilizzerà per ogni elemento nell'elenco.

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

Sede, ho usato il DataTemplate per definire le proprietà da mostrare e come renderli - ho giocato con la dimensione del carattere, i colori dei font, margini ecc devo ammettere che non è poi così bella, ma sono sicuro che otterrà il punto:

una cosa che noterete è che ho usato un legame costrutto come questo:

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

questa basica lly significa: Verifica se l'oggetto ha la proprietà Name e se lo fa, renderlo come TextBlock.Text.

Si noti che le cose possono diventare più complicate in modo da poter utilizzare modelli diversi per articoli diversi in una lista, ecc. Ma non è nell'intervallo della domanda, penso.

TLDR: ListView esegue il rendering dinamico di un elenco di elementi. ItemsSource definisce la sorgente articoli per quello ListView. DataTemplate definisce un modello che verrà utilizzato per il rendering di qualcosa. Questo DataTemplate è assegnato alla proprietà ItemTemplate dello ListView in modo che lo ListView sappia che dovrebbe utilizzare esattamente quel modello per il rendering dei suoi articoli.