<Page    x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.OrientedVirtualizingPanelDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    xmlns:common="using:Windows10.Common">    <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10">            <!--                OrientedVirtualizingPanel(基类) - VirtualizingStackPanel 和 WrapGrid 的基类                    下面通过 VirtualizingStackPanel 来介绍 OrientedVirtualizingPanel 的相关知识点            -->                        <ListBox x:Name="listBox" Margin="5" ItemsSource="{x:Bind Employees}" Width="200" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">                <ListBox.ItemTemplate>                    <DataTemplate x:DataType="common:Employee">                        <StackPanel Orientation="Horizontal">                            <TextBlock Text="{x:Bind Name}" />                            <TextBlock Text="{x:Bind Age}" Margin="5 0 0 0" />                        </StackPanel>                    </DataTemplate>                </ListBox.ItemTemplate>                <ListBox.ItemsPanel>                    <ItemsPanelTemplate>                        <VirtualizingStackPanel Orientation="Vertical" />                    </ItemsPanelTemplate>                </ListBox.ItemsPanel>            </ListBox>                        <TextBlock Name="lblMsg" Margin="5" />                    </StackPanel>    </Grid></Page>

/* * OrientedVirtualizingPanel(基类) - VirtualizingStackPanel 和 WrapGrid 的基类 *     ExtentWidth - OrientedVirtualizingPanel 内的内容的宽 *     ExtentHeight - OrientedVirtualizingPanel 内的内容的高（本例测试结果为: 内容的总条数） *     ViewportWidth - 可视区的宽 *     ViewportHeight - 可视区的高（本例测试结果为: 可视区的条数） *     HorizontalOffset - 滚动内容的水平方向的偏移量 *     VerticalOffset - 滚动内容的垂直方向的偏移量（本例测试结果为: 偏移的数据条数） *      *      * 注： * 1、OrientedVirtualizingPanel 继承自 VirtualizingPanel（如果要写自定义的虚拟化布局控件，就继承这个类） * 2、VirtualizingPanel 继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml） */using System;using System.Collections.ObjectModel;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows10.Common;namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl{    public sealed partial class OrientedVirtualizingPanelDemo : Page    {        public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(1000);        private OrientedVirtualizingPanel _orientedVirtualizingPanel = null;        public OrientedVirtualizingPanelDemo()        {            this.InitializeComponent();            this.Loaded += OrientedVirtualizingPanelDemo_Loaded;        }        private void OrientedVirtualizingPanelDemo_Loaded(object sender, RoutedEventArgs e)        {            DispatcherTimer dTimer = new DispatcherTimer();            dTimer.Interval = TimeSpan.Zero;            dTimer.Tick += DTimer_Tick;            dTimer.Start();            // 获取 ListBox 中的 OrientedVirtualizingPanel 控件            _orientedVirtualizingPanel = listBox.ItemsPanelRoot as OrientedVirtualizingPanel;            // 获取 ListBox 中的 OrientedVirtualizingPanel 控件            // _orientedVirtualizingPanel = Helper.GetVisualChild<OrientedVirtualizingPanel>(listBox);        }        private void DTimer_Tick(object sender, object e)        {            lblMsg.Text = "ExtentWidth: " + _orientedVirtualizingPanel.ExtentWidth.ToString();            lblMsg.Text += Environment.NewLine;            lblMsg.Text += "ExtentHeight: " + _orientedVirtualizingPanel.ExtentHeight.ToString();            lblMsg.Text += Environment.NewLine;            lblMsg.Text += "ViewportWidth: " + _orientedVirtualizingPanel.ViewportWidth.ToString();            lblMsg.Text += Environment.NewLine;            lblMsg.Text += "ViewportHeight: " + _orientedVirtualizingPanel.ViewportHeight.ToString();            lblMsg.Text += Environment.NewLine;            lblMsg.Text += "HorizontalOffset: " + _orientedVirtualizingPanel.HorizontalOffset.ToString();            lblMsg.Text += Environment.NewLine;            lblMsg.Text += "VerticalOffset: " + _orientedVirtualizingPanel.VerticalOffset.ToString();        }    }}

<Page    x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.VirtualizingStackPanelDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"        xmlns:common="using:Windows10.Common">    <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10" Orientation="Horizontal">            <!--                VirtualizingStackPanel - 虚拟化布局控件，ListBox 的默认布局控件                    Orientation - 子元素的排列方向                        Vertical - 垂直排列，默认值                        Horizontal - 水平排列                    VirtualizingStackPanel.VirtualizationMode - 虚拟化模式（附加属性）                        Recycling - 重复利用容器。默认值                        Standard - 新建容器，用后丢弃                    CleanUpVirtualizedItemEvent - 虚拟化缓存中的某一项数据被移除时触发的事件            -->            <ListBox x:Name="listBox" Margin="5" ItemsSource="{x:Bind Employees}" Width="200" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">                <ListBox.ItemTemplate>                    <DataTemplate x:DataType="common:Employee">                        <StackPanel Orientation="Horizontal">                            <TextBlock Text="{x:Bind Name}" />                            <TextBlock Text="{x:Bind Age}" Margin="5 0 0 0" />                        </StackPanel>                    </DataTemplate>                </ListBox.ItemTemplate>                <ListBox.ItemsPanel>                    <ItemsPanelTemplate>                        <VirtualizingStackPanel Orientation="Vertical" CleanUpVirtualizedItemEvent="VirtualizingStackPanel_CleanUpVirtualizedItemEvent" />                    </ItemsPanelTemplate>                </ListBox.ItemsPanel>            </ListBox>            <TextBlock Name="lblMsg" Margin="5" />                    </StackPanel>    </Grid></Page>

/* * VirtualizingStackPanel - 虚拟化布局控件，ListBox 的默认布局控件（继承自 OrientedVirtualizingPanel, 请参见 /Controls/CollectionControl/ItemsControlDemo/LayoutControl/OrientedVirtualizingPanelDemo.xaml） */using System;using System.Collections.ObjectModel;using Windows.UI.Xaml.Controls;using Windows10.Common;namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl{    public sealed partial class VirtualizingStackPanelDemo : Page    {        public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(1000);        public VirtualizingStackPanelDemo()        {            this.InitializeComponent();        }        // 虚拟化缓存中的某一项数据被移除时触发的事件        // 对于 Recycling 模式来说，老的数据被移除后会有新的数据添加进来         private void VirtualizingStackPanel_CleanUpVirtualizedItemEvent(object sender, CleanUpVirtualizedItemEventArgs e)        {            // 此次被移除虚拟化缓存的数据对象            lblMsg.Text += "cleanUp: " + (e.Value as Employee).Name;            lblMsg.Text += Environment.NewLine;            // 此次被移除虚拟化缓存的 UIElement            // UIElement element = e.UIElement;            // 是否禁止此条虚拟化数据被移除            // e.Cancel = false;        }    }}

<Page    x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.WrapGridDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    xmlns:common="using:Windows10.Common">    <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10">            <!--                WrapGrid - 虚拟化布局控件，原 GridView 的默认布局控件（在 uwp 中 GridView 的默认布局控件是 ItemsWrapGrid）                    Orientation - 子元素的排列方向                        Vertical - 垂直排列，默认值                        Horizontal - 水平排列                    MaximumRowsOrColumns - 最大行数或最大列数（默认值为 -1）                    ItemWidth - 每个 item 的宽                    ItemHeight - 每个 item 的高                    HorizontalChildrenAlignment - 看不出有啥用                    VerticalChildrenAlignment - 看不出有啥用            -->            <GridView Name="gridView" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind Employees}">                <GridView.ItemTemplate>                    <DataTemplate x:DataType="common:Employee">                        <Grid Background="Blue">                            <TextBlock Text="{x:Bind Name}" />                        </Grid>                    </DataTemplate>                </GridView.ItemTemplate>                <GridView.ItemsPanel>                    <ItemsPanelTemplate>                        <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemWidth="200" ItemHeight="200" />                    </ItemsPanelTemplate>                </GridView.ItemsPanel>            </GridView>        </StackPanel>    </Grid></Page>

/* * WrapGrid - 虚拟化布局控件，原 GridView 的默认布局控件（继承自 OrientedVirtualizingPanel, 请参见 /Controls/CollectionControl/ItemsControlDemo/LayoutControl/OrientedVirtualizingPanelDemo.xaml） *     在 uwp 中 GridView 的默认布局控件是 ItemsWrapGrid, 请参见 /Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsWrapGridDemo.xaml */using System.Collections.ObjectModel;using Windows.UI.Xaml.Controls;using Windows10.Common;namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl{    public sealed partial class WrapGridDemo : Page    {        public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(1000);        public WrapGridDemo()        {            this.InitializeComponent();        }    }}