Jak korzystać z ListView w Universal Windows Platform (aplikacja Windows 10)?

Question

Czy ktoś może wyjaśnić ItemTemplate.DataTemplate i ListView. W tym fragmencie kodu. Naprawdę nie rozumiem pojęcia Templates, będzie to pomocne, jeśli ktoś może rzucić trochę światła na to też. musiałem patrzeć na to pytanie:

Metro app: ListView ItemTemplate DataTemplate for selected item

Ale nadal mylone. Dziękujemy! :(

<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 jest kontrola, która pozwala dynamicznie wyświetlić listę elementów, dzięki czemu użytkownicy mogą przejrzeć tę listę przedmiotów, aby je zobaczyć i znaleźć cokolwiek, czego potrzebują. To naprawdę proste do zdefiniowania w XAML.

<ListView x:Name="StudentsList" /> 

Teraz, powiedzmy, że masz listę studentów Każdy student jest reprezentowana za pomocą prostego klasy Student

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

Nie c. Mogą to być dziesiątki, setki lub tysiące studentów, więc nie można statycznie zdefiniować interfejsu użytkownika. Zazwyczaj przechowujesz tych uczniów w jakiejś liście/kolekcji z tyłu kodu. Ci pobrać je z różnych źródeł - bazy danych, usług internetowych lub twardym nim kodu, jak zrobię teraz dla celów demonstracyjnych:

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

Wykaz/kolekcja służy jako źródło artykuły dla ListView, więc można ustawić Właściwość ListView, aby połączyć te dwa i wyświetlić listę w interfejsie użytkownika. Korzystanie z ListView wszystkie elementy są renderowane dynamicznie, niezależnie od liczby elementów.

Jeśli wpadliśmy aplikację teraz, byłoby to dość brzydki choć:

Trzeba zdefiniować DataTemplate aby ładniejsza. Ponieważ każdy uczeń ma imię i wiek, będziesz chciał użyć tych właściwości, aby wyglądały ładniej. Ta DataTemplate jest przypisana do właściwości ListView.ItemTemplate, a ListView użyje jej dla każdego elementu na liście.

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

See, użyłem DataTemplate aby określić, które właściwości, aby pokazać i jak je render - Grałem z rozmiaru czcionki, kolorów czcionki, marginesów itd Muszę przyznać, to naprawdę nie jest tak ładna, ale Jestem pewien, że dostaniesz punkt:

jeszcze jedno można zauważyć jest to, że stosuje się wiązanie skonstruować tak:

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

Ten BASICA lly oznacza: Sprawdź, czy obiekt ma właściwość Name, a jeśli tak, renderuj go jako TextBlock.Text.

Pamiętaj, że rzeczy mogą być bardziej skomplikowane, więc możesz użyć różnych szablonów dla różnych pozycji na jednej liście itp., Ale nie jest to w moim zasięgu.

TLDR: ListView dynamicznie renderuje listę pozycji. ItemsSource określa źródło pozycji dla tego ListView. DataTemplate definiuje szablon, który będzie używany do renderowania czegoś. Ta DataTemplate jest przypisana do ItemTemplate właściwości ListView, dzięki czemu ListView wie, że powinien używać dokładnie tego szablonu do renderowania swoich elementów.