ItemsControl 的布局控制項執行個體

樣本

1、ItemsStackPanel 的樣本
Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsStackPanelDemo.xaml

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

<Pagex: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
[源碼下載]