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

问题描述

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

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

<ListView.ItemTemplate><数据模板><堆栈面板><TextBlock Text="{绑定名称}"边距="20,0,20,8"字体大小=24"FontStyle="斜体"FontWeight="半粗体"前景=深蓝"/><TextBlock Text="{绑定年龄}"边距="20,0,20,8"字体大小=16"前景=深灰色"不透明度=0.8"/></StackPanel></数据模板></ListView.ItemTemplate></ListView>

看，我使用 DataTemplate 来定义要显示的属性以及如何呈现它们 - 我玩过字体大小、字体颜色、边距等.我承认这不是那么漂亮，但我相信你会明白的:

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

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

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

TLDR:ListView 动态呈现项目列表.ItemsSource 定义该 ListView 的项目源.DataTemplate 定义了一个用于渲染某些东西的模板.此 DataTemplate 被分配给 ListView 的 ItemTemplate 属性，以便 ListView 知道它应该使用该模板渲染它的项目.

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:

Metro app: ListView ItemTemplate DataTemplate for selected item

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

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

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:

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>

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}" ... />

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