A detailed introduction to Windows 10-controls (collection classes)

Example

1. Custom ItemsControl (custom Girdview make each item occupy a different size space)
Controls/collectioncontrol/itemscontroldemo/myitemscontroldemo.xaml

<pagex:class= "Windows10.Controls.CollectionControl.ItemsControlDemo.MyItemsControlDemo" 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" xmlns:d= "http://schemas.microsoft.com/ expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc:ignorable=" D " ><page.resources><datatemplate x:key= "ItemTemplate" ><grid background= "{Binding colorvalue}" > <grid background= "Black" verticalalignment= "Top" opacity= "0.7" ><textblock text= "{Binding colorname}"/> </grid></grid></datatemplate><style x:key= "Itemcontainerstyle" TargetType= "GridViewItem" ><setter property= "verticalcontentalignment" value= "Stretch"/><setter property= " Horizontalcontentalignment "value=" Stretch "/><setter property=" Margin "value=" 0 "/><setter Property=" Padding "value=" 0 "/></style><itemspaneltemplate x:key= "Itemspanel" ><variablesizedwrapgrid MaximumRowsOrColumns= "8" orientation= "Horizontal" itemwidth= "itemheight="/></itemspaneltemplate></page.resources> <grid background= "Transparent" margin= "0" ><!--use the MyGridView control, which overrides the GridView Preparecontainerforitemoverride () method, see Mygridview.cs--><local:mygridview x:name= "GridView" Width= "812" Verticalalignment= "Top" horizontalalignment= "left" itemtemplate= "{StaticResource ItemTemplate}" Itemcontainerstyle = "{StaticResource Itemcontainerstyle}" itemspanel= "{StaticResource Itemspanel}" Isitemclickenab Led= "False" selectionmode= "None" ></local:MyGridView></Grid></Page>

Controls/collectioncontrol/itemscontroldemo/myitemscontroldemo.xaml.cs

/* * ItemsControl-Collection control (inherit from control, see/controls/basecontrol/controldemo/) * protected virtual void Preparecontaine Rforitemoverride (DependencyObject element, object item);  -Prepare container for item * Element-item container * item-item * * * This example is used to demonstrate how to make each of the Girdview Item occupies a different size of space * 1, layout control to use Variablesizedwrapgrid (with its RowSpan and ColumnSpan to implement the item occupies a different size of space), you need to note that it is not a virtualized layout control * 2, custom G Ridview, and overrides ItemsControl's protected override void Preparecontainerforitemoverride (DependencyObject element, object Item) method * Then set each item's Variablesizedwrapgrid.rowspan and Variablesizedwrapgrid.columnspan */using system;using System.C Ollections. Generic;using system.linq;using windows.ui;using windows.ui.xaml;using windows.ui.xaml.controls;using Windows.ui.xaml.media;using System.reflection;namespace windows10.controls.collectioncontrol.itemscontroldemo{ Public sealed partial class Myitemscontroldemo:page {public Myitemscontroldemo () {this. InitializecomponeNT ();        Binddata (); }private void Binddata () {Random random = new random ();//gets all the data for Windows.UI.Colors type type = typeof (            Colors); list<colormodel> colors = type. Getruntimeproperties ()//Getruntimeproperties () under the System.Reflection namespace. Select (c = new ColorModel {colorname = c.name, ColorValue = new SolidColorBrush ((Color) c.getvalue (null)), ColSpan = random. Next (1, 3),//The number of columns of the grid occupied by this object rowspan = random. Next (1, 3)//The number of rows that this object occupies in the grid}).        ToList ();//bind data Gridview.itemssource = colors; }}///<summary>///object for data binding///</summary>public class ColorModel {public string colorname {get; set; }public SolidColorBrush colorvalue {get; set;} The number of columns in the grid occupied by this object is consolidated by public int ColSpan {get; set;}    The number of row merges for the grid that this object occupies public int RowSpan {get; set;} }///<summary>///Custom GridView, overriding ItemsControl protected override void Preparecontainerforitemoverride (DependencyObject element, object Item) method///For specifying the number of column merges and row merges in the grid occupied by each item of the GridView////&L T;/summary>public class Mygridview:gridview {protected override void Preparecontainerforitemoverride (DEPENDENCYOB ject element, object Item) {try{//Sets the Variablesizedwrapgrid.rowspan and Variablesizedwrapgrid.columnspan of each item, thus                Implement each item occupies a different size of space//For demonstration purposes only, since the ColSpan and RowSpan are randomly computed, there may be white space dynamic Dynamicitem = Item; Element.                SetValue (Variablesizedwrapgrid.columnspanproperty, Dynamicitem.colspan); Element.            SetValue (Variablesizedwrapgrid.rowspanproperty, Dynamicitem.rowspan); }catch (Exception ex) {var ignore = ex;//When an exception occurs (such as: item has no ColSpan attribute or RowSpan attribute) element.                SetValue (Variablesizedwrapgrid.columnspanproperty, 1); Element.            SetValue (Variablesizedwrapgrid.rowspanproperty, 1); }finally{base.            Preparecontainerforitemoverride (element, item); }        }    }}

2, custom ContentPresenter implement effects like Gridviewitempresenter and Listviewitempresenter
controls/collectioncontrol/ Itemscontroldemo/myitempresenter.cs

/* * Custom ContentPresenter implementation similar to Gridviewitempresenter and listviewitempresenter effects */using system;using Windows.Foundation; Using windows.ui;using windows.ui.xaml;using windows.ui.xaml.controls;using windows.ui.xaml.media;using Windows.ui.xaml.media.animation;using Windows.ui.xaml.shapes;namespace Windows10.controls.collectioncontrol.itemscontroldemo{class Myitempresenter:contentpresenter {Panel _containe R = null; The container of item (that is, the root element defined in DataTemplate, the Grid in example Myitempresenterdemo.xaml) Rectangle _pointeroverborder = null; Rectanglerectangle _focusvisual = null on item when the mouse is over item; Rectanglestoryboard _pointerdownstoryboard = null that is overwritten on item when item is selected; Animated Storyboard _pointerupstoryboard = NULL when the mouse is pressed; Animated public Myitempresenter (): Base () {base) when the mouse is lifted.        Margin = new Thickness (10); }//override OnApplyTemplate ()-Invokes protected override void OnApplyTemplate () {Base When the control template is applied.            OnApplyTemplate (); _container = (Panel) visualtreehelper.Getchild (this, 0); }//override Gotoelementstatecore ()-VisualState is called when converted (this method is only used in custom ContentPresenter and applies it to the GridView or ListView Itemcontain  Erstyle)//statename-visualstate name//usetransitions-whether to use VisualTransition transition effect protected override bool Gotoelementstatecore (String statename, bool usetransitions) {base. Gotoelementstatecore (StateName, usetransitions); switch (statename) {//normal state case "normal": Hi                    Depointerovervisuals ();                    Hidefocusvisuals (); if (usetransitions) {stoppointerdownanimation ();                    }break;//selected state case "Selected": Case "pointerfocused": showfocusvisuals (); if (usetransitions)                    {stoppointerdownanimation ();                    }break;//unchecked status case "unfocused": hidefocusvisuals () break;//mouse over state case "Pointerover": Showpointerovervisuals (); if (usetRansitions) {stoppointerdownanimation (); }break;//Mouse Click Status Case "Pressed": Case "pressedselected": if (usetransitions) {Star                    Tpointerdownanimation ();            }break;default:break;        }return true; }private void Startpointerdownanimation () {if (_pointerdownstoryboard = = null) createpointerdownstor            Yboard ();        _pointerdownstoryboard.begin (); }private void Stoppointerdownanimation () {if (_pointerupstoryboard = = null) Createpointerupstoryboar            D ();        _pointerupstoryboard.begin (); }private void Showfocusvisuals () {if (!            Focuselementsarecreated ()) createfocuselements ();        _focusvisual.opacity = 1;        }private void Hidefocusvisuals () {if (focuselementsarecreated ()) _focusvisual.opacity = 0;      }private void Showpointerovervisuals ()  {if (!            Pointeroverelementsarecreated ()) createpointeroverelements ();        _pointeroverborder.opacity = 1; }private void Hidepointerovervisuals () {if (pointeroverelementsarecreated ()) _pointeroverborder.opac        ity = 0; }private void Createpointerdownstoryboard () {/* * in this way the mouse-down effect on item will be error (attempted to read or write protected mem Ory. This is often a indication that other memory is corrupt.), don't know why * pointerdownthemeanimation Pointerdownanima             tion = new Pointerdownthemeanimation ();             * Storyboard.settarget (Pointerdownanimation, _container);             * Storyboard Pointerdownstoryboard = new Storyboard ();             * POINTERDOWNSTORYBOARD.CHILDREN.ADD (pointerdownanimation); */doubleanimation da1 = new DoubleAnimation () {to = 0.9, Duration = Timespan.fro            Mmilliseconds (100)};        DoubleAnimation da2 = new DoubleAnimation ()    {to = 0.9, Duration = timespan.frommilliseconds (100)};            Storyboard.settarget (da1, _container); Storyboard.settargetproperty (da1, "(Uielement.rendertransform). ( TransformGroup.Children) [0].            (Scaletransform.scalex) ");            Storyboard.settarget (da2, _container); Storyboard.settargetproperty (Da2, "(Uielement.rendertransform). ( TransformGroup.Children) [0]. (Scaletransform.scaley) "); if (!) ( _container.                RenderTransform is TransformGroup)) {TransformGroup Group = new TransformGroup ();                GROUP.CHILDREN.ADD (New ScaleTransform ()); _container.                RenderTransform = Group; _container.            Rendertransformorigin = new Point (0.5, 0.5);            } _pointerdownstoryboard = new Storyboard ();            _pointerdownstoryboard.children.add (DA1);            _pointerdownstoryboard.children.add (DA2);        _pointerdownstoryboard.begin (); }private VOID Createpointerupstoryboard () {DoubleAnimation da1 = new DoubleAnimation () {            to = 1, Duration = timespan.frommilliseconds (100)}; DoubleAnimation da2 = new DoubleAnimation () {to = 1, Duration = Timespan.frommil            Liseconds (100)};            Storyboard.settarget (da1, _container); Storyboard.settargetproperty (da1, "(Uielement.rendertransform). ( TransformGroup.Children) [0].            (Scaletransform.scalex) ");            Storyboard.settarget (da2, _container); Storyboard.settargetproperty (Da2, "(Uielement.rendertransform). ( TransformGroup.Children) [0]. (Scaletransform.scaley) "); if (!) ( _container.                RenderTransform is TransformGroup)) {TransformGroup Group = new TransformGroup ();                GROUP.CHILDREN.ADD (New ScaleTransform ()); _container.                RenderTransform = Group; _container. RendertransformorIgin = new Point (0.5, 0.5);            } _pointerupstoryboard = new Storyboard ();            _pointerupstoryboard.children.add (DA1);            _pointerupstoryboard.children.add (DA2);        _pointerupstoryboard.begin ();            }private void Createpointeroverelements () {_pointeroverborder = new Rectangle ();            _pointeroverborder.ishittestvisible = false; _pointeroverborder.opacity = 0;//Here The color is written dead, only for demonstration purposes, the actual writing to be picked out as a dependency property _pointeroverborder.fill = new SolidColorBrush (            Color.FromArgb (0x50, 0x50, 0x50, 0x50)); _container. Children.insert (_container.        Children.Count, _pointeroverborder);            }private void Createfocuselements () {_focusvisual = new Rectangle ();            _focusvisual.ishittestvisible = false;            _focusvisual.height = 10; _focusvisual.verticalalignment = verticalalignment.bottom;//Here The color is written dead, only for demonstration purposes, the actual writing to be picked out as a dependency property _focusvisual.fill = new SolidColorBrush (Color.FromArgb (0xFF, 0xFF,0x0, 0x0)); _container.        Children.insert (0, _focusvisual);        }private bool Focuselementsarecreated () {return _focusvisual! = NULL;        }private bool Pointeroverelementsarecreated () {return _pointeroverborder! = NULL; }    }}

Controls/collectioncontrol/itemscontroldemo/myitempresenterdemo.xaml

<pagex:class= "Windows10.Controls.CollectionControl.ItemsControlDemo.MyItemPresenterDemo" 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" xmlns:d= "http://schemas.microsoft.com/ expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc:ignorable=" D " ><page.resources><style x:key= "Mygridviewitempresentertemplate" targettype= "GridViewItem" >< Setter property= "Background" value= "Transparent"/><setter property= "Template" ><Setter.Value>< ControlTemplate targettype= "Gridviewitem" ><!--custom ContentPresenter implementations like Gridviewitempresenter and The effect of Listviewitempresenter--><local:myitempresenter/></controltemplate></setter.value></ Setter></style></page.resources><grid background= "Transparent" ><gridview x:Name= " GridView "Selectionmode=" single " margin= "0" itemcontainerstyle= "{StaticResource mygridviewitempresentertemplate}" ><gridvi ew. Itemtemplate><datatemplate><grid height= "width=" background= "Blue" ><textblock x:Name= " Lblname "text=" {Binding Name} "foreground=" Yellow "/></grid></datatemplate></ Gridview.itemtemplate></gridview></grid></page>

Controls/collectioncontrol/itemscontroldemo/myitempresenterdemo.xaml.cs

/* * This example demonstrates how to customize the ContentPresenter to achieve effects like gridviewitempresenter and Listviewitempresenter */using Windows.ui.xaml.controls;using windows.ui.xaml.navigation;using Windows10.common;namespace Windows10.controls.collectioncontrol.itemscontroldemo{public sealed partial class Myitempresenterdemo:page    { Public Myitempresenterdemo ()        {this. InitializeComponent ();        } protected override void Onnavigatedto (NavigationEventArgs e)        {            Gridview.itemssource = testdata.getemployees ( );        }    }}

Ok
[SOURCE DOWNLOAD]