<Page
x:Class="XamlDemo.Controls.ListBoxDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0" Orientation="Horizontal">
<!--ListBox - 列表框-->
<!--xaml 方式为 ListBox 添加数据-->
<ListBox x:Name="listBox" Width="200" Height="300" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.Items>
<ListBoxItem Content="ListBoxItem1" />
<ListBoxItem Content="ListBoxItem2" />
<ListBoxItem Content="ListBoxItem3" />
</ListBox.Items>
</ListBox>
<!--
后台绑定方式为 ListBox 添加数据
DisplayMemberPath - 指定数据源中需要被显示出来的字段名称
-->
<ListBox x:Name="listBoxWithBinding" SelectionMode="Multiple" DisplayMemberPath="Name" Width="200" Height="300" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" />
<!--通过模板设置 ListBox 的每一项的布局和数据-->
<ListBox ItemsSource="{Binding ItemsSource, ElementName=listBoxWithBinding}" SelectionMode="Multiple" Width="200" Height="300" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Age}" Margin="5 0 0 0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<!--
VirtualizingStackPanel - 虚拟化的 StackPanel(即仅生成需要显示的 UI 元素。当绑定了大量数据,而某时仅显示其中一小部分的时候,使用此控件则可大幅提高呈现效率)
Orientation - 数据的排列方式(垂直排列或水平排列,也就是说 ListBox 也可以水平排列)
VirtualizationMode - 虚拟化的模式
Recycling - item 的容器会被重用,默认值
Standard - 每个 item 都有自己独立的容器
注:ListBox 默认已经使用了 VirtualizingStackPanel,但是其对于变高的 DataTemplate 来说支持得不好
-->
<VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Recycling" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</StackPanel>
</Grid>
</Page>