原文:
背水一战 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
[源码下载]
