ItemsControl the Layout control instance

Example

1. Examples of 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= "0" orientation= "horizontal" ><stackpanel margin= "5" ><!--Itemsstackpanel-                            Virtualized layout control, default layout control for ListView Orientation-the arrangement direction of child elements Vertical-vertical arrangement, default value                            Horizontal-Horizontal Cachelength-the size of the data that needs to be cached outside the visible area (in multiples of the number of visible extents), the default value is 4.0 For example, when the visible area can display 10 data, Cachelength is 4 o'clock, the size of the data that needs to be cached outside the visible area is 4 * 10 = 40, which means the entire cached dataThe size of 10 + 4 * 10 = 50 The actual test found that there may be some deviation, but is roughly accurate--><listview name= "ListView1" margin= "5" W Idth= "height=" 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-virtualized layout control, ListView default layout control grouppadding-each data Group of padding Groupheaderplacement-the header of each data group is displayed in the top-most position. Default value left-ArestickygroupheAdersenabled-whether the group header is fixed, that is, does not scroll with the Group data scrolling. The default value is True--><listview name= "ListView2" margin= "5" width= "All" height= "all" 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= "{Bindi Ng 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-virtualized layout control, default layout control for ListView (inherited from Panel, see/CONTROLS/LAYOUTCONTROL/PANELDEMO.XAML) * Firstcacheind Ex-the index position of the first item in the cache in all data * Firstvisibleindex-the index position of the first item displayed on the screen in all data * Lastcacheindex-the index position of the last item in the cache in all data * La Stvisibleindex-the last item displayed on the screen in the index position in all data * cachelength-the size of the data that needs to be cached outside the visible area (in multiples of the number of visible extents), the default value is 4.0 * For example, when the visible area can display 1 0 data, Cachelength is 4 o'clock, the size of the data that needs to be cached outside the visible area is 4 * 10 = 40, that is, the entire cache data size is 10 + 4 * 10 = 50 * Actual testing found that there may be some deviation, but is generally accurate */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);//Construction dataSOURCE CollectionViewSource = 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 ();        Loaded + = itemsstackpaneldemo_loaded; }private void Itemsstackpaneldemo_loaded (object sender, RoutedEventArgs e) {DispatcherTimer Dtimer = NE            W DispatcherTimer ();            Dtimer.interval = TimeSpan.Zero;            Dtimer.tick + = Dtimer_tick;            Dtimer.start ();//Gets the Itemsstackpanel control in the ListView _itemsstackpanel1 = Listview1.itemspanelroot as Itemsstackpanel; _itemsstackpanel2 = Listview2.itemspanelroot as itemsstackpanel;//gets the Itemsstackpanel control in the ListView//_itemsstackpa Nel1 = helper.getvisualchild<itemsstackpanel> (listView1);//_itemsstackpanel2 = helper.getvisualchild<itemsstackpanel> (LISTVIEW2); }private void Dtimer_tick (object sender, Object e) {lblmsg1.text = "Firstcacheindex:" + _itemsstackpan El1.            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) {_it Emsstackpanel2.groupheaderplacement = (groupheaderplacement)Enum.parse (typeof (Groupheaderplacement), (E.addeditems[0] as ComboBoxItem).        Content.tostring ()); }//parsing XML Data 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 example
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= "0" orientation= "horizontal" ><stackpanel margin= "5" ><!--Itemswrapgrid-Virtualized layout controls                            , the default layout control for the GridView Orientation-the arrangement direction of the child elements Vertical-vertical arrangement, default value Horizontal-Horizontal arrangement itemwidth-width of each item ItemHeight-each ITE High maximumrowsorcolumns of M-Maximum number of rows or columns (default is-1) CachElength-the size of the data that needs to be cached outside of the visible area (in multiples of the number of visible extents), the default value is 4.0 for example, when the visible area can display 10 data, and Cachelength is 4 o'clock, the outside of the visible area needs a slow The size of the stored data is 4 * 10 = 40, which means that the entire cache data size is 10 + 4 * 10 = 50 The actual test found that there may be some deviation, but is generally accurate--&GT;&LT;GRIDVI EW name= "GridView1" margin= "5" width= "All" height= "" "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= " "Itemheight=" "maximumrowsorcolumns=" 3 "cachelength=" 4 "/></itemspaneltemplate></ Gridview.itemspanel></gridview><textblock name= "LBLMSG1" margin= "5"/></stackpanel>< StackPanel margin= "5" ><!--Itemswrapgrid-virtualized layout control, GridView default layout control GroupPadding-Padding groupheaderplacement per data group-the location of the header of each data group to P-Top. Default left-arestickygroupheadersenabled-the group header is fixed, that is, does not roll with the Group data scrolling Move. The default value is True--><listview name= "GridView2" margin= "5" width= "All" height= "all" 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= "/></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-virtualized layout control, GridView default layout control (inherited from Panel, see/CONTROLS/LAYOUTCONTROL/PANELDEMO.XAML) * Firstcacheindex -the index position of the first item in the cache in all data * Firstvisibleindex-the index position of the first item displayed on the screen in all data * Lastcacheindex-the index position of the last item in the cache in all data Visibleindex-the last item displayed on the screen in the index position in all data * cachelength-the size of the data that needs to be cached outside the visible area (in multiples of the number of visible extents), the default value is 4.0 * For example, when the visible area can display 10 Data, Cachelength is 4 o'clock, the size of the data that needs to be cached outside the visible area is 4 * 10 = 40, which means that the entire cache data size is 10 + 4 * 10 = 50 * Actual testing found that there may be some deviation, but is generally accurate */ 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);//construct Data source 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 ItemsWrapGridDe Mo () {this. InitializeComponent ();        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 ();//Gets the Itemswrapgrid control in the GridView _itemswrapgrid1 = Gridview1.itemspanelroot as Itemswrapgrid; _itemswrapgrid2 = Gridview2.itemspanelroot as itemswrapgrid;//gets the Itemswrapgrid control in the GridView//_itemswrapgrid1 = Helper. Getvisualchild<itemswrapgrid> (gridView1);//_itemswrapgrid2 = Helper.getvisualchiLd<itemswrapgrid> (GRIDVIEW2); }private void Dtimer_tick (object sender, Object e) {lblmsg1.text = "Firstcacheindex:" + _itemswrapgrid            1.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) {_it Emswrapgrid2.groupheaderplacement = (groupheaderplacement) enum.parse (typeof (Groupheaderplacement), (e.AddedItems[ 0]As ComboBoxItem).        Content.tostring ()); }//parsing XML Data 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
[SOURCE DOWNLOAD]