blocks|key|4458574|text|ListView是一个控件，它允许您动态显示项目列表，以便用户可以滚动项目列表来查看它们，并找到他们可能需要的任何内容。在XAML中定义它非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4458575|<ListView+x:Name="StudentsList"+/>|code-block|syntax|javascript|4458576|现在，假设你有一份大学生名单。每个学生都用一个简单的student类表示。|4458577|public+class+Student
{
++++public+string+Name+{+get;+set;+}
++++public+int+Age+{+get;+set;+}
}|4458578|可能有几十个、几百个或数千个学生，所以你不能静态地定义UI。您通常将这些学生保存在代码隐藏中的某种列表/集合中。您可以从各种来源获取它们-数据库、web服务或硬编码，就像我现在出于演示目的所做的那样：|4458579|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;
}|4458580|该列表/集合用作ListView的项源，因此需要设置ListView的ItemsSource属性以连接两者并在UI中显示列表。使用ListView可以动态呈现所有的项目，而不考虑项目的数量。|offset|length|style|CODE|4458581|如果我们现在运行这个应用程序，它会很难看：|4458582|​|4458583|📷|atomic|4458584|4458585|您需要定义一个DataTemplate以使其更漂亮。由于每个学生都有自己的名字和年龄，因此您需要使用这些属性来使其看起来更漂亮。此DataTemplate被分配给ListView.ItemTemplate属性，ListView将对列表中的每一项使用它。|4458586|<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>|4458587|看，我使用DataTemplate来定义要显示的属性和如何呈现它们-我尝试了字体大小，字体颜色，页边距等。我承认这并不是很漂亮，但我相信你会明白的：|4458588|4458589|4458590|4458591|您将注意到的另一件事是，我使用了如下的绑定结构：|4458592|<TextBlock+Text="{Binding+Name}"+...+/>|4458593|这基本上意味着:检查对象是否具有Name属性，如果有，则将其呈现为TextBlock.Text。|4458594|注意，事情可能会变得更复杂，所以你可以对一个列表中的不同项目使用不同的模板，等等，但我认为这不在问题范围之内。|4458595|TLDR：ListView动态地呈现一个项目列表。ItemsSource定义了该ListView的项源。DataTemplate定义了一个模板，该模板将用于渲染某些内容。此DataTemplate被分配给ListView的ItemTemplate属性，以便ListView知道它应该恰好使用该模板来呈现其项。|4458596|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/84e61bbd1226cba98007df237a681901.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/5c250f396bc391042a216512343c9ac9.png^0|0|0|0|0|0|0|Z|B|0|0|0|0|1|0|0|0|7|C|1T|C|29|L|0|0|0|0|0|1|1|0|0|0|0|G|4|X|E|0|0|5|8|P|B|14|8|1G|C|2E|C|2U|8|33|C|3K|8|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|20|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|21|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|22|8|@$Q|23|R|24|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|25|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|26|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|27|8|@]|9|@$Q|28|R|29|1|2A]]|A|$]]|$1|11|3|X|5|6|7|2B|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2C|8|@$Q|2D|R|2E|S|T]|$Q|2F|R|2G|S|T]|$Q|2H|R|2I|S|T]]|9|@]|A|$]]|$1|14|3|15|5|D|7|2J|8|@]|9|@]|A|$E|F]]|$1|16|3|17|5|6|7|2K|8|@]|9|@]|A|$]]|$1|18|3|X|5|6|7|2L|8|@]|9|@]|A|$]]|$1|19|3|Z|5|10|7|2M|8|@]|9|@$Q|2N|R|2O|1|2P]]|A|$]]|$1|1A|3|X|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2R|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|D|7|2S|8|@]|9|@]|A|$E|F]]|$1|1F|3|1G|5|6|7|2T|8|@$Q|2U|R|2V|S|T]|$Q|2W|R|2X|S|T]]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|2Z|8|@$Q|30|R|31|S|T]|$Q|32|R|33|S|T]|$Q|34|R|35|S|T]|$Q|36|R|37|S|T]|$Q|38|R|39|S|T]|$Q|3A|R|3B|S|T]|$Q|3C|R|3D|S|T]|$Q|3E|R|3F|S|T]]|9|@]|A|$]]|$1|1L|3|-4|5|6|7|3G|8|@]|9|@]|A|$]]]|1M|$1N|$5|1O|1P|1Q|A|$1R|1S|1T|-4]]|1U|$5|1O|1P|1Q|A|$1R|1V|1T|-4]]]]

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:

<pre class="lang-xml prettyprint-override"><code>&lt;ListView x:Name="StudentsList" /&gt;
</code></pre>

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

<pre class="lang-cs prettyprint-override"><code>public class Student
{
 public string Name { get; set; }
 public int Age { get; set; }
}
</code></pre>

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:

<pre class="lang-cs prettyprint-override"><code>private List&lt;Student&gt; listOfStudents = new List&lt;Student&gt;();

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;
}
</code></pre>

That list/collection serves as an items source for the ListView, so you set the <code>ItemsSource</code> 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:

<a href="https://i.stack.imgur.com/VXULF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VXULF.png" alt="Ugly ListView"></a>

You need to define a <code>DataTemplate</code> 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 <code>DataTemplate</code> is assigned to <code>ListView.ItemTemplate</code> property and the ListView will use it for each and every item in the list.

<pre class="lang-xml prettyprint-override"><code>&lt;ListView x:Name="StudentsList"&gt;
 &lt;ListView.ItemTemplate&gt;
 &lt;DataTemplate&gt;
 &lt;StackPanel&gt;
 &lt;TextBlock Text="{Binding Name}" 
 Margin="20,0,20,8"
 FontSize="24" 
 FontStyle="Italic" 
 FontWeight="SemiBold"
 Foreground="DarkBlue" /&gt;
 &lt;TextBlock Text="{Binding Age}" 
 Margin="20,0,20,8"
 FontSize="16"
 Foreground="DarkGray" 
 Opacity="0.8" /&gt;
 &lt;/StackPanel&gt;
 &lt;/DataTemplate&gt;
 &lt;/ListView.ItemTemplate&gt;
&lt;/ListView&gt;
</code></pre>

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:

<a href="https://i.stack.imgur.com/V3DRY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V3DRY.png" alt="A bit prettier ListView"></a>

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

<pre class="lang-xml prettyprint-override"><code>&lt;TextBlock Text="{Binding Name}" ... /&gt;
</code></pre>

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

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: <code>ListView</code> dynamically renders a list of items. <code>ItemsSource</code> defines the items source for that <code>ListView</code>. <code>DataTemplate</code> defines a template that will be used to render something. This <code>DataTemplate</code> is assigned to <code>ItemTemplate</code> property of the <code>ListView</code> so that the <code>ListView</code> knows that it should use exactly that template to render its items.

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

<a href="https://stackoverflow.com/questions/16312058/metro-app-listview-itemtemplate-datatemplate-for-selected-item">Metro app: ListView ItemTemplate DataTemplate for selected item</a>

But still confused. 
Thank you!
:(

<pre><code>&lt;ListView Margin="10" Name="lvDataBinding"&gt;
 &lt;ListView.ItemTemplate&gt;
 &lt;DataTemplate&gt;
 &lt;WrapPanel&gt;
 &lt;TextBlock Text="Name: " /&gt;
 &lt;TextBlock Text="{Binding Name}" FontWeight="Bold" /&gt;
 &lt;TextBlock Text=", " /&gt;
 &lt;TextBlock Text="Age: " /&gt;
 &lt;TextBlock Text="{Binding Age}" FontWeight="Bold" /&gt;
 &lt;TextBlock Text=" (" /&gt;
 &lt;TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" /&gt;
 &lt;TextBlock Text=")" /&gt;
 &lt;/WrapPanel&gt;
 &lt;/DataTemplate&gt;
 &lt;/ListView.ItemTemplate&gt;
&lt;/ListView&gt;
</code></pre>

How to use ListView in Universal Windows Platform (Windows 10 app)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

谁能解释一下ItemTemplate.DataTemplate和ListView。在此代码片段中。我真的不理解Templates的概念，如果有人也能给我一些启发的话，那将是非常有帮助的。我曾考虑过这个问题：但还是很困惑。谢谢！:(<ListView Margin="10" Name="lvDataBinding"> ...

如何在通用视窗平台中使用ListView (Windows10应用程序)-腾讯云开发者社区-腾讯云

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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