c# - Simpler possibility for groupedview -

i have problem. want write windows 8 application , think grouped gridview, in sample grouped items app template contained in visual studio, choice data representation. have problems in understanding how works (i mananged modify contained sampledatasource, content shown). problem have is, there many elements , can't determine element causes what.

so question:

can explain (or provide link to) how can build such grouped gridview scratch? sample template not helpful, because little bit confusing (4 classes in 1 file , little bit strange construction).

okay, basic requirements using grouped gridview are:

(note: class names arbitrary)

• a viewmodel (you're using mvvm, right?)
• a group object holds elements of each group.
• an item object group contain collection of
• a view display items includes gridview , collectionviewsource (including styling groups , items)

an example group , item:

public class group<t> t : item {     public observablecollection<t> items { get; set;}     public string title { get; set; } }  public class item {     public string value { get; set; } } 

an example viewmodel:

public class groupsviewmodel : viewmodelbase // implementation uses mvvm light's viewmodelbase, feel free use {     public observablecollection<group<item>> allgroups { get; set; }      public groupsviewmodel()     {         allgroups = new observablecollection<group<item>>();          group<item> group1 = new group<item>();         group1.title = "group 1 title";         group1.add(new item(){ value = "the first value." });         allgroups.add(group1);          group<item> group2 = new group<item>();         group2.title = "group 2 title";         group2.add(new item(){ value = "the second value." });     } } 

on page, create collectionviewsource in page.resources:

<page.resources>     <collectionviewsource source="{binding allgroups}"                             issourcegrouped=true                             itemspath="items"                             x:name="groupedcollection"/> </page.resources>     

notice source bound collection of groups, , itemspath tells collectionviewsource set of items in each group @ property.

your gridview reference this. important set items source below. empty {binding} source set staticresource of collectionviewsource. can style each group in gridview using groupstyle kind of such. stripped down incredibly basic. default sample have have better example.

<gridview itemssource="{binding source={staticresource groupedcollection}}"             itemtemplate="{staticresource standard250x250itemtemplate}"             >     <gridview.itemspanel>         <itemspaneltemplate>                                     <virtualizingstackpanel orientation="horizontal"/>         </itemspaneltemplate>     </gridview.itemspanel>     <gridview.groupstyle>         <groupstyle>             <groupstyle.headertemplate>                 <datatemplate>                     <grid margin="1,0,0,6">                         <stackpanel orientation="horizontal">                             <textblock text="{binding title}" margin="3,-7,10,10" style="{staticresource groupheadertextstyle}" />                             <textblock text="{staticresource chevronglyph}" fontfamily="segoe ui symbol" margin="0,-7,0,10" style="{staticresource groupheadertextstyle}"/>                         </stackpanel>                     </grid>                 </datatemplate>             </groupstyle.headertemplate>             <groupstyle.panel>                 <itemspaneltemplate>                     <variablesizedwrapgrid orientation="vertical" margin="0,0,80,0"/>                 </itemspaneltemplate>             </groupstyle.panel>         </groupstyle>     </gridview.groupstyle> </gridview> 

lastly, you'll have set datacontext of page viewmodel. if you're using mvvm light, datacontext="{binding groupsvm, source={staticresource locator}}". you'll need further setup work. can set in page constructor.

public mygridviewpage() {     datacontext = new groupsviewmodel();     this.initializecomponent(); } 

hope helps. happy coding!