VirtualizingStackPanel虚拟化|StackPanel的用法

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

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // 绑定数据到 ListBox
            var data = MainPage.GetEmployees();
            listBoxWithBinding.ItemsSource = data;
        }

        /// <summary>
        /// 返回一个 Employee 数据集合
        /// </summary>
        public static List<Employee> GetEmployees()
        {
            var employees = new List<Employee>();

            for (int i = 0; i < 1000; i++)
            {
                employees.Add(
                    new Employee
                    {
                        Name = "Name " + i.ToString().PadLeft(4, '0'),
                        Age = new Random(i).Next(20, 60),
                        IsMale = Convert.ToBoolean(i % 2)
                    });
            }

            return employees;
        }

    }

    public class Employee : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                RaisePropertyChanged("Name");
            }
        }

        private int _age;
        public int Age
        {
            get { return _age; }
            set
            {
                _age = value;
                RaisePropertyChanged("Age");
            }
        }

        private bool _isMale;
        public bool IsMale
        {
            get { return _isMale; }
            set
            {
                _isMale = value;
                RaisePropertyChanged("IsMale");
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }
    }

 


posted on 2013-03-28 13:20  JackSlaterYu  阅读(1120)  评论(0编辑  收藏  举报