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

Question

任何人都可以解释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>

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的项目源,因此您可以设置ItemsSourceListView 的属性以连接两者并在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来定义要显示的属性以及如何渲染它们 - 我使用字体大小,字体颜色,边距等等.我会承认这不是那么漂亮,但我相信你会得到点:

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

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

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

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

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