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
[源码下载]
以上就是itemscontrol 的布局控件实例的详细内容。