如何在通用Windows平台(Windows 10应用程序)中使用ListView [英] How to use ListView in Universal Windows Platform (Windows 10 app)

问题描述

任何人都可以解释ItemTemplate.DataTemplate和ListView.在此代码段中. 我真的不理解Templates的概念，如果有人也可以对此有所帮助，将会很有帮助. 我曾经看过这个问题:

Can anyone please explain ItemTemplate.DataTemplate and ListView. In this code snippet. I really don't understand the concept of Templates, it will be help full if someone might put some light on that too. I had look to this question:

地铁应用:ListView ItemTemplate DataTemplate用于所选项目

但仍然感到困惑. 谢谢！ :(

But still confused. Thank you! :(

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

推荐答案

ListView是一个控件，它使您可以动态显示项目列表，以便用户可以滚动浏览该项目列表以查看它们并找到他们可能需要的任何东西.在XAML中定义它非常简单:

ListView is a control that allows you to dynamically show a list of items so that users can scroll through that list of items to see them and find whatever they may need. It's really simple to define it in XAML:

<ListView x:Name="StudentsList" />

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

Now, let's say you have a list of university students. Every student is represented with a simple Student class.

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

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

There could be dozens, hundreds or thousands of students, so you can't define the UI statically. You usually keep those students in some sort of list/collection in code-behind. You fetch them from various sources - database, web services, or hard-code it, like I will do now for demo purposes:

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的项源，因此您设置ListView的ItemsSource属性以将两者连接起来并在UI中显示该列表.使用ListView，无论项目数量如何，所有项目都会动态呈现.

That list/collection serves as an items source for the ListView, so you set the ItemsSource property of the ListView to connect the two and show the list in UI. Using a ListView all the items are rendered dynamically regardless of the number of items.

如果我们现在运行该应用程序，那将是非常丑陋的:

If we ran the app now, it would be pretty ugly though:

您需要定义一个DataTemplate使其更漂亮.由于每个学生都有姓名和年龄，因此您将希望使用这些属性使其看起来更漂亮.此DataTemplate分配给ListView.ItemTemplate属性，并且ListView会将其用于列表中的每个项目.

You need to define a DataTemplate to make it prettier. Since each and every student has a name and age, you will want to use those properties to make it look prettier. This DataTemplate is assigned to ListView.ItemTemplate property and the ListView will use it for each and every item in the list.

<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定义了显示哪些属性以及如何呈现它们-我使用了字体大小，字体颜色，边距等.会得到重点:

See, I used the DataTemplate to define which properties to show and how to render them - I played with font size, font colors, margins etc. I'll admit this isn't really that pretty, but I am sure you will get the point:

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

One more thing you'll notice is that I used a binding construct like this:

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

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

This basically means: Check if the object has the property Name and if it does, render it as TextBlock.Text.

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

Note that things can get more complicated so you could use different templates for different items in one list etc. but that's not in the question scope I think.

TLDR:ListView动态呈现项目列表. ItemsSource定义该ListView的物料来源. DataTemplate定义将用于呈现某些内容的模板.此DataTemplate分配给ListView的ItemTemplate属性，以便ListView知道它应使用该模板来呈现其项目.

TLDR: ListView dynamically renders a list of items. ItemsSource defines the items source for that ListView. DataTemplate defines a template that will be used to render something. This DataTemplate is assigned to ItemTemplate property of the ListView so that the ListView knows that it should use exactly that template to render its items.

这篇关于如何在通用Windows平台(Windows 10应用程序)中使用ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！