[源碼下載]

作者：webabcd


介紹
背水一戰 Windows 10 之 控件（集合類 - ItemsControl 的布局控件）

• OrientedVirtualizingPanel
• VirtualizingStackPanel
• WrapGrid

示例
1、OrientedVirtualizingPanel(基類) 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/OrientedVirtualizingPanelDemo.xaml

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

Controls/CollectionControl/ItemsControlDemo/LayoutControl/OrientedVirtualizingPanelDemo.xaml.cs

/*
 * 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();
        }
    }
}

2、VirtualizingStackPanel 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/VirtualizingStackPanelDemo.xaml

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

Controls/CollectionControl/ItemsControlDemo/LayoutControl/VirtualizingStackPanelDemo.xaml.cs

/*
 * 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;
        }
    }
}

3、WrapGrid 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/WrapGridDemo.xaml

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

Controls/CollectionControl/ItemsControlDemo/LayoutControl/WrapGridDemo.xaml.cs

/*
 * 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();
        }
    }
}

OK
[源碼下載]

背水一戰 Windows 10 (54) - 控件（集合類）: ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid