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

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

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

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