背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid...
[源码下载]
作者:webabcd
介绍
背水一战 Windows 10 之 控件(集合类 - ItemsControl 的布局控件)
- ItemsStackPanel
- ItemsWrapGrid
示例
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 - 每一个数据组的 paddingGroupHeaderPlacement - 每一个数据组的 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 - 每一个数据组的 paddingGroupHeaderPlacement - 每一个数据组的 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
[源码下载]
背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid...相关推荐
- 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation
原文:背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation [源码下载] 背水一战 Windows 10 (55 ...
- 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox
背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 原文:背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox [源码 ...
- 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容...
原文:背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容 [源码下载 ...
- 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar
原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, ...
- 背水一战 Windows 10 (47) - 控件(ScrollViewer 特性): Chaining, Rail, Inertia, Snap, Zoom
原文:背水一战 Windows 10 (47) - 控件(ScrollViewer 特性): Chaining, Rail, Inertia, Snap, Zoom [源码下载] 背水一战 Windo ...
- 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑
背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 原文:背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 [源码 ...
- 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu
原文:背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ...
- 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)...
原文:背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) [源码下载] 背水一战 Wind ...
- 背水一战 Windows 10 (41) - 控件(导航类): Frame
原文:背水一战 Windows 10 (41) - 控件(导航类): Frame [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍 ...
- 背水一战 Windows 10 (46) - 控件(ScrollViewer 基础): ScrollViewer, ScrollBar, ScrollContentPresenter...
原文:背水一战 Windows 10 (46) - 控件(ScrollViewer 基础): ScrollViewer, ScrollBar, ScrollContentPresenter [源码下载 ...
最新文章
- Attention Mechanism
- C#导出EXCEL的几种方法
- 自己动手写UI库——引入ExtJs(布局)
- MariaDB 10.4.9 发布,MySQL 分支数据库
- 内联元素与内联块状元素
- 紧急!Log4j2 再再爆雷:刚升级,又连爆 “核弹级” 远程数据泄露 ! v2.17.0 横空出世。。。...
- 基于51单片机的GPS公交自动报站系统
- matlab 数值计算方法 pdf,《现代数值计算方法(MATLAB版)》习题解答.pdf
- 初中英语语法(002)-be动词和一般动词的一般现在时
- 腾讯天龙八部手游服务器账号上线,天龙八部手游服务器的注册已达到上限 服务器注册上限怎么解决...
- 跟着吴恩达学习机器学习 2代价函数
- 小程序笔记 -- 封装函数
- 喜马拉雅产品分析报告
- 图片裁剪工具vueCropper跨域解决
- 学校作业5_1字符串_文本分析与加密(头哥作业[Python])
- Debian10修改静态ip
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
- QVW Load多个不同目录下的QVD文件
- mysql中in条件使用字符串
- wordpress后台管理(八)外观-DUX主题设置:设置网站Logo/布局/主题风格/页面/列表设置/文章/广告/热门排行/特别推荐等等