背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

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

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

作者：webabcd

介绍
背水一战 Windows 10 之 控件（集合类 - ItemsControl 的布局控件）

ItemsStackPanel

ItemsWrapGrid

示例
1、ItemsStackPanel 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsStackPanelDemo.xaml

<Page
x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.ItemsStackPanelDemo"
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">

<StackPanel Margin="5">
<!--
ItemsStackPanel - 虚拟化布局控件，ListView 的默认布局控件
Orientation - 子元素的排列方向
Vertical - 垂直排列，默认值
Horizontal - 水平排列
CacheLength - 可见区外的需要缓存的数据的大小（以可见区条数大小的倍数为单位），默认值为 4.0
比如当可见区可以显示 10 条数据，CacheLength 为 4 时，可见区外的需要缓存的数据的大小则为 4 * 10 = 40，也就是说整个缓存数据的大小为 10 + 4 * 10 = 50
实际测试发现，可能会有一定的偏差，但是大体是准确的
-->
<ListView Name="listView1" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="common:NavigationModel">
<Grid Background="Blue">
<TextBlock Text="{x:Bind Title}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Vertical" CacheLength="4" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<TextBlock Name="lblMsg1" Margin="5" />
</StackPanel>

<StackPanel Margin="5">
<!--
ItemsStackPanel - 虚拟化布局控件，ListView 的默认布局控件
GroupPadding - 每一个数据组的 padding
GroupHeaderPlacement - 每一个数据组的 header 的显示位置
Top - 顶部。默认值
Left - 左侧
AreStickyGroupHeadersEnabled - 组 header 是否是固定的，即不随组数据的滚动而滚动。默认值为 true
-->
<ListView Name="listView2" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel GroupPadding="4"
GroupHeaderPlacement="Top"
AreStickyGroupHeadersEnabled="{Binding IsChecked, ElementName=chkAreStickyGroupHeadersEnabled}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<ComboBox x:Name="cmbGroupHeaderPlacement" Margin="5" PlaceholderText="GroupHeaderPlacement" SelectionChanged="cmbGroupHeaderPlacement_SelectionChanged">
<ComboBoxItem>Top</ComboBoxItem>
<ComboBoxItem>Left</ComboBoxItem>
</ComboBox>
<CheckBox Name="chkAreStickyGroupHeadersEnabled" Content="AreStickyGroupHeadersEnabled" IsChecked="True" Margin="5" />
</StackPanel>

</StackPanel>
</Grid>
</Page>

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

/*
* ItemsStackPanel - 虚拟化布局控件，ListView 的默认布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml）
*     FirstCacheIndex - 缓存中的第一项在全部数据中的索引位置
*     FirstVisibleIndex - 屏幕上显示的第一项在全部数据中的索引位置
*     LastCacheIndex - 缓存中的最后一项在全部数据中的索引位置
*     LastVisibleIndex - 屏幕上显示的最后一项在全部数据中的索引位置
*     CacheLength - 可见区外的需要缓存的数据的大小（以可见区条数大小的倍数为单位），默认值为 4.0
*         比如当可见区可以显示 10 条数据，CacheLength 为 4 时，可见区外的需要缓存的数据的大小则为 4 * 10 = 40，也就是说整个缓存数据的大小为 10 + 4 * 10 = 50
*         实际测试发现，可能会有一定的偏差，但是大体是准确的
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl
{
public sealed partial class ItemsStackPanelDemo : Page
{
public CollectionViewSource MyData
{
get
{
XElement root = XElement.Load("SiteMap.xml");
var items = LoadData(root);

// 构造数据源
CollectionViewSource source = new CollectionViewSource();
source.IsSourceGrouped = true;
source.Source = items;
source.ItemsPath = new PropertyPath("Items");

return source;
}
}

private ItemsStackPanel _itemsStackPanel1 = null;
private ItemsStackPanel _itemsStackPanel2 = null;

public ItemsStackPanelDemo()
{
this.InitializeComponent();

this.Loaded += ItemsStackPanelDemo_Loaded;
}

private void ItemsStackPanelDemo_Loaded(object sender, RoutedEventArgs e)
{
DispatcherTimer dTimer = new DispatcherTimer();
dTimer.Interval = TimeSpan.Zero;
dTimer.Tick += DTimer_Tick;
dTimer.Start();

// 获取 ListView 中的 ItemsStackPanel 控件
_itemsStackPanel1 = listView1.ItemsPanelRoot as ItemsStackPanel;
_itemsStackPanel2 = listView2.ItemsPanelRoot as ItemsStackPanel;

// 获取 ListView 中的 ItemsStackPanel 控件
// _itemsStackPanel1 = Helper.GetVisualChild<ItemsStackPanel>(listView1);
// _itemsStackPanel2 = Helper.GetVisualChild<ItemsStackPanel>(listView2);
}

private void DTimer_Tick(object sender, object e)
{
lblMsg1.Text = "FirstCacheIndex: " + _itemsStackPanel1.FirstCacheIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "FirstVisibleIndex: " + _itemsStackPanel1.FirstVisibleIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "LastCacheIndex: " + _itemsStackPanel1.LastCacheIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "LastVisibleIndex: " + _itemsStackPanel1.LastVisibleIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "CacheLength: " + _itemsStackPanel1.CacheLength.ToString();
}

private void cmbGroupHeaderPlacement_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
_itemsStackPanel2.GroupHeaderPlacement = (GroupHeaderPlacement)Enum.Parse(typeof(GroupHeaderPlacement), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
}

// 解析 xml 数据
private List<NavigationModel> LoadData(XElement root)
{
if (root == null)
return null;

var items = from n in root.Elements("node")
select new NavigationModel
{
Title = (string)n.Attribute("title"),
Url = (string)n.Attribute("url"),
Items = LoadData(n)
};

return items.ToList();
}
}
}

2、ItemsWrapGrid 的示例
Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsWrapGridDemo.xaml

<Page
x:Class="Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl.ItemsWrapGridDemo"
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">

<StackPanel Margin="5">
<!--
ItemsWrapGrid - 虚拟化布局控件，GridView 的默认布局控件
Orientation - 子元素的排列方向
Vertical - 垂直排列，默认值
Horizontal - 水平排列
ItemWidth - 每个 item 的宽
ItemHeight - 每个 item 的高
MaximumRowsOrColumns - 最大行数或最大列数（默认值为 -1）
CacheLength - 可见区外的需要缓存的数据的大小（以可见区条数大小的倍数为单位），默认值为 4.0
比如当可见区可以显示 10 条数据，CacheLength 为 4 时，可见区外的需要缓存的数据的大小则为 4 * 10 = 40，也就是说整个缓存数据的大小为 10 + 4 * 10 = 50
实际测试发现，可能会有一定的偏差，但是大体是准确的
-->
<GridView Name="gridView1" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="common:NavigationModel">
<Grid Background="Blue">
<TextBlock Text="{x:Bind Title}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" ItemWidth="120" ItemHeight="50" MaximumRowsOrColumns="3" CacheLength="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<TextBlock Name="lblMsg1" Margin="5" />
</StackPanel>

<StackPanel Margin="5">
<!--
ItemsWrapGrid - 虚拟化布局控件，GridView 的默认布局控件
GroupPadding - 每一个数据组的 padding
GroupHeaderPlacement - 每一个数据组的 header 的显示位置
Top - 顶部。默认值
Left - 左侧
AreStickyGroupHeadersEnabled - 组 header 是否是固定的，即不随组数据的滚动而滚动。默认值为 true
-->
<ListView Name="gridView2" Margin="5" Width="400" Height="400" HorizontalAlignment="Left" ItemsSource="{x:Bind MyData.View}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Width="100" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"
GroupPadding="4"
GroupHeaderPlacement="Top"
AreStickyGroupHeadersEnabled="{Binding IsChecked, ElementName=chkAreStickyGroupHeadersEnabled}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<ComboBox x:Name="cmbGroupHeaderPlacement" Margin="5" PlaceholderText="GroupHeaderPlacement" SelectionChanged="cmbGroupHeaderPlacement_SelectionChanged">
<ComboBoxItem>Top</ComboBoxItem>
<ComboBoxItem>Left</ComboBoxItem>
</ComboBox>
<CheckBox Name="chkAreStickyGroupHeadersEnabled" Content="AreStickyGroupHeadersEnabled" IsChecked="True" Margin="5" />
</StackPanel>

</StackPanel>
</Grid>
</Page>

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

/*
* ItemsWrapGrid - 虚拟化布局控件，GridView 的默认布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml）
*     FirstCacheIndex - 缓存中的第一项在全部数据中的索引位置
*     FirstVisibleIndex - 屏幕上显示的第一项在全部数据中的索引位置
*     LastCacheIndex - 缓存中的最后一项在全部数据中的索引位置
*     LastVisibleIndex - 屏幕上显示的最后一项在全部数据中的索引位置
*     CacheLength - 可见区外的需要缓存的数据的大小（以可见区条数大小的倍数为单位），默认值为 4.0
*         比如当可见区可以显示 10 条数据，CacheLength 为 4 时，可见区外的需要缓存的数据的大小则为 4 * 10 = 40，也就是说整个缓存数据的大小为 10 + 4 * 10 = 50
*         实际测试发现，可能会有一定的偏差，但是大体是准确的
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.ItemsControlDemo.LayoutControl
{
public sealed partial class ItemsWrapGridDemo : Page
{
public CollectionViewSource MyData
{
get
{
XElement root = XElement.Load("SiteMap.xml");
var items = LoadData(root);

// 构造数据源
CollectionViewSource source = new CollectionViewSource();
source.IsSourceGrouped = true;
source.Source = items;
source.ItemsPath = new PropertyPath("Items");

return source;
}
}

private ItemsWrapGrid _itemsWrapGrid1 = null;
private ItemsWrapGrid _itemsWrapGrid2 = null;

public ItemsWrapGridDemo()
{
this.InitializeComponent();

this.Loaded += ItemsWrapGridDemo_Loaded;
}

private void ItemsWrapGridDemo_Loaded(object sender, RoutedEventArgs e)
{
DispatcherTimer dTimer = new DispatcherTimer();
dTimer.Interval = TimeSpan.Zero;
dTimer.Tick += DTimer_Tick;
dTimer.Start();

// 获取 GridView 中的 ItemsWrapGrid 控件
_itemsWrapGrid1 = gridView1.ItemsPanelRoot as ItemsWrapGrid;
_itemsWrapGrid2 = gridView2.ItemsPanelRoot as ItemsWrapGrid;

// 获取 GridView 中的 ItemsWrapGrid 控件
// _itemsWrapGrid1 = Helper.GetVisualChild<ItemsWrapGrid>(gridView1);
// _itemsWrapGrid2 = Helper.GetVisualChild<ItemsWrapGrid>(gridView2);
}

private void DTimer_Tick(object sender, object e)
{
lblMsg1.Text = "FirstCacheIndex: " + _itemsWrapGrid1.FirstCacheIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "FirstVisibleIndex: " + _itemsWrapGrid1.FirstVisibleIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "LastCacheIndex: " + _itemsWrapGrid1.LastCacheIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "LastVisibleIndex: " + _itemsWrapGrid1.LastVisibleIndex.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "CacheLength: " + _itemsWrapGrid1.CacheLength.ToString();
}

private void cmbGroupHeaderPlacement_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
_itemsWrapGrid2.GroupHeaderPlacement = (GroupHeaderPlacement)Enum.Parse(typeof(GroupHeaderPlacement), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
}

// 解析 xml 数据
private List<NavigationModel> LoadData(XElement root)
{
if (root == null)
return null;

var items = from n in root.Elements("node")
select new NavigationModel
{
Title = (string)n.Attribute("title"),
Url = (string)n.Attribute("url"),
Items = LoadData(n)
};

return items.ToList();
}
}
}

OK
[源码下载]