背水一战 Windows 10 (54) - 控件（集合类）: ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPan

Posted 2020-10-07

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

[源码下载]

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

作者：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
[源码下载]