listview - 如何在通用 Windows 平台(Windows 10 应用程序)中使用 ListView

Question

谁能解释一下ItemTemplate.DataTemplate和 ListView .在此代码段中。
实在看不懂Templates的概念，如果有人也能对此有所了解，那将是很有帮助的。
我看过这个问题:

Metro app: ListView ItemTemplate DataTemplate for selected item

但还是一头雾水。
谢谢!
:(

<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 是一个控件，允许您动态显示项目列表，以便用户可以滚动该项目列表以查看它们并找到他们可能需要的任何内容。在 XAML 中定义它非常简单:

<ListView x:Name="StudentsList" />

现在，假设您有一个大学生名单。每个学生都有一个简单的学生类。

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

可能有数十、数百或数千名学生，因此您无法静态定义 UI。您通常将这些学生保留在代码隐藏中的某种列表/集合中。您可以从各种来源获取它们——数据库、Web 服务或对其进行硬编码，就像我现在出于演示目的所做的那样:

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 的属性来连接两者并在 UI 中显示列表。使用 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 来定义要显示的属性以及如何呈现它们 - 我使用了字体大小、字体颜色、边距等。我承认这并不是那么漂亮，但我相信你会得到观点:



您会注意到的另一件事是我使用了这样的绑定(bind)构造:

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

这基本上意味着:检查对象是否具有属性 Name如果是，则将其呈现为 TextBlock.Text .

请注意，事情可能会变得更加复杂，因此您可以为一个列表中的不同项目使用不同的模板等，但这不在我认为的问题范围内。

TLDR: ListView动态呈现项目列表。 ItemsSource定义该 ListView 的项目来源. DataTemplate定义了一个用于渲染某些东西的模板。这个 DataTemplate分配给 ItemTemplate ListView 的属性(property)使 ListView知道它应该完全使用该模板来呈现其项目。