Windows 8 Store Apps Learning (a) GridView control attributes

GridView control attributes: dragging items, item dimensions are variable, grouped display

Introduced

Re-imagine the GridView of Windows 8 Store Apps

Drag item-Drag item in the GridView to sort item, drag item to a specified location outside the GridView to delete item

Item size variable-Specifies the size of each item in the Girdview

Group Display-Display collection data in groups

Example

1, demonstrates how to drag the item in the GridView to sort the item, and how to drag the item to a specified location outside the GridView to delete item

Gridview/dragitem.xaml

<page x:class= "XamlDemo.Controls.GridView.DragItem" xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/prese
    Ntation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" Using:XamlDemo.Controls.GridView " 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=" Itemte Mplate "> <stackpanel orientation=" Vertical "> <textblock textwrapping=" Wrap "Fontsi Ze= "14.667" text= "{Binding Name}" horizontalalignment= "left"/> <textblock "textwrapping=" Wrap Ize= ' 14.667 ' text= ' {Binding age} ' horizontalalignment= ' left '/> </StackPanel> </datatemplat e> <style x:key= "Itemcontainerstyle" targettype= "Gridviewitem" > <setter "Width" value= "292"/> <setter property= "Height" value= "/> <!--even if you set the Margin to" 0 ", you cannot remove the Margin between the item  If you want to remove the margin between the item, set this margin property to "4"--> <setter property= "margin" value= "0" /> <setter property= "Background" value= "Blue"/> </Style> <itemspaneltempla Te x:key= "Itemspanel" > <!--Note: Wrapgrid inherited Virtualizingpanel, and Variablesizedwrapgrid did not follow Cheng Virtualizingpanel--> <wrapgrid maximumrowsorcolumns= "3" orientation= "Vertical" Verticalch Ildrenalignment= "Top" horizontalchildrenalignment= "left"/> </ItemsPanelTemplate> </page.resources > <grid background= "Transparent" > <stackpanel margin= "0 0 0" > <tex Tblock name= "lblmsg" fontsize= 14.667 "text=" by dragging the Item in the Girdview to sort "/> <gridview x:name=" Gridv Iew "Verticalalignment="Top "margin=" 0 0 "borderthickness=" 1 "borderbrush=" Red "background=" LightBlue "itemtemplate=" {
                      StaticResource ItemTemplate} "itemcontainerstyle=" {StaticResource Itemcontainerstyle} "
                      Itemspanel= "{StaticResource Itemspanel}" isswipeenabled= "true" isitemclickenabled= "true" Candragitems= "true" canreorderitems= "true" allowdrop= "true" dragitemsstarting= "G" Ridview_dragitemsstarting_1 "/> <!--drag item here to delete item--> <grid name=" Griddelete "margin=" 0 0 0 "allowdrop=" True "drop=" griddelete_drop_1 "dragenter=" griddelete_dragenter_1 "dragleave=" GridDelete _dragleave_1 "dragover=" griddelete_dragover_1 "> <rectangle width=" height= " s= "1" strokedasharray= "2" stroke= "Red" fill= "Blue"/> <textblock fontsize= "26.667" text= "Drag here to remove" T Extalignment= "Center" verticalalignment= "Center"/> </Grid> </StackPanel> </Grid> </p Age>