Как использовать ListView в универсальной платформе Windows (приложение Windows 10)

Может кто-нибудь объяснить ItemTemplate.DataTemplate и ListView. В этом фрагменте кода. Я действительно не понимаю концепцию Templates, это будет полезно, если кто-то может тоже рассказать об этом. Я посмотрел на этот вопрос:

Приложение Metro: ListView ItemTemplate DataTemplate для выбранного элемента

Но все еще смущен. Спасибо! : (

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

Ответы

Ответ 1

ListView - это элемент управления, который позволяет динамически отображать список элементов, чтобы пользователи могли просматривать этот список элементов, чтобы видеть их и находить все, что им может понадобиться. Это очень просто определить в XAML:

<ListView x:Name="StudentsList" />

Теперь, скажем, у вас есть список студентов университетов. Каждый студент представлен простым студенческим классом.

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

Там могут быть десятки, сотни или тысячи учеников, поэтому вы не можете определить пользовательский интерфейс статически. Обычно вы держите этих учеников в каком-то списке/коллекции в коде. Вы получаете их из разных источников - базы данных, веб-сервисов или жесткого кода, например, я буду делать сейчас для демонстрационных целей:

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

Этот список/коллекция служит источником элементов для ListView, поэтому вы устанавливаете свойство ItemsSource ListView для соединения двух и показываете список в пользовательском интерфейсе. Используя ListView, все элементы отображаются динамически независимо от количества элементов.

Если бы мы запустили приложение сейчас, это было бы довольно уродливо:

Ugly ListView

Вам нужно определить DataTemplate, чтобы сделать его более красивым. Поскольку каждый студент имеет имя и возраст, вы захотите использовать эти свойства, чтобы сделать его более красивым. Этот DataTemplate присваивается свойству ListView.ItemTemplate, и ListView будет использовать его для каждого элемента в списке.

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

Смотрите, я использовал DataTemplate, чтобы определить, какие свойства показывать и как их отображать - я играл с размером шрифта, цветами шрифта, полями и т.д. Я признаю, что это не совсем так, но я уверен, что вы получится:

Немного красивее ListView

Еще одна вещь, которую вы заметите, это то, что я использовал конструкцию связывания, подобную этой:

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

Это в основном означает: проверьте, обладает ли объект свойством Name, и если это так, сделайте его как TextBlock.Text.

Обратите внимание, что все может усложниться, поэтому вы можете использовать разные шаблоны для разных элементов в одном списке и т.д., но это не касается области вопроса, о которой я думаю.

TL;DR: ListView динамически отображает список элементов. ItemsSource определяет источник элементов для этого ListView. DataTemplate определяет шаблон, который будет использоваться для рендеринга. Этот DataTemplate присваивается свойству ItemTemplate свойства ListView, так что ListView знает, что он должен использовать именно этот шаблон для визуализации своих элементов.