首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在通用视窗平台中使用ListView (Windows10应用程序)

如何在通用视窗平台中使用ListView (Windows10应用程序)
EN

Stack Overflow用户
提问于 2015-10-26 13:54:11
回答 1查看 19.1K关注 0票数 21

谁能解释一下ItemTemplate.DataTemplateListView。在此代码片段中。我真的不理解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>
EN

回答 1

Stack Overflow用户

发布于 2015-10-26 21:21:24

ListView是一个控件,它允许您动态显示项目列表,以便用户可以滚动项目列表来查看它们,并找到他们可能需要的任何内容。在XAML中定义它非常简单:

<ListView x:Name="StudentsList" />

现在,假设你有一份大学生名单。每个学生都用一个简单的student类表示。

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的项源,因此需要设置ListView的ItemsSource属性以连接两者并在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被分配给ListViewItemTemplate属性,以便ListView知道它应该恰好使用该模板来呈现其项。

票数 54
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33339255

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档