ListBox 的结构

Posted 2020-08-14

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