c# - VariableSizedGridView Windows Phone 8.1 -

i writing windows phone 8.1 app.

it has gridview, first row must show 2 items, 2nd , 3rd row must show 3 items each , rest rows must show 4 items. trying use variablesizedgridview:

click here view image

but items being shown in 1 column long list.

click view screenshot

xaml:

<usercontrols:variablesizedgridview    x:name="modelringsgridviewvariable" horizontalalignment="stretch">     <gridview.itemspanel>         <itemspaneltemplate>         <variablesizedwrapgrid itemheight="180"          itemwidth="20" orientation="horizontal"/>         <!--itemwidth="{binding elementname=modelpage, path=widthcalculator}"-->         </itemspaneltemplate>     </gridview.itemspanel>     <gridview.itemtemplate>         <datatemplate>             <grid background="white"  margin="2">                 <stackpanel orientation="vertical">                     <image height="100" verticalalignment="top" source="{binding imagelocation}" stretch="fill"></image>                     <grid background="{staticresource lightgreenbluecolor}" verticalalignment="bottom"                     horizontalalignment="stretch">                                                            <textblock margin="0,8,0,8" verticalalignment="center"                          horizontalalignment="center" fontsize="18"                          text="{binding imagename}" foreground="white"></textblock>                     </grid>                 </stackpanel>             </grid>         </datatemplate>     </gridview.itemtemplate> </usercontrols:variablesizedgridview> 

c#:

private void generategridviewdata() {     modelringsgridviewvariable.width = window.current.bounds.width;     observablecollection<modelclass> modelringsgridviewdata = new observablecollection<modelclass>();         int j = 1;         uri location = new uri("ms-appx:///images/testimages/testimagering.png", urikind.relativeorabsolute);         (int i=0; i<20;i++)         {             if(i==0 || i== 1)             {                 modelringsgridviewdata.add(new modelclass { imagename = "ring " + j.tostring(), imagelocation = location, colspan=6 });             }             else if(i== 2 || i==3 || i==4)             {                 modelringsgridviewdata.add(new modelclass { imagename = "ring " + j.tostring(), imagelocation = location, colspan=4 });             }             else             {                 modelringsgridviewdata.add(new modelclass { imagename = "ring " + j.tostring(), imagelocation = location,colspan=3 });             }         j++;         }     modelringsgridviewvariable.itemssource = modelringsgridviewdata; } 

model:

public class modelclass {     public uri imagelocation { get; set; }     public string imagename { get; set; }     public int colspan { get; set; } } 

variablesizedgridview.cs:

 public class variablesizedgridview : gridview     {         protected override void preparecontainerforitemoverride(dependencyobject element,             object item)         {             try             {                 dynamic localitem = item;                // element.setvalue(variablesizedwrapgrid.rowspanproperty, localitem.rowspan);                 element.setvalue(variablesizedwrapgrid.columnspanproperty, localitem.colspan);             }             catch             {               //  element.setvalue(variablesizedwrapgrid.rowspanproperty, 1);                 element.setvalue(variablesizedwrapgrid.columnspanproperty, 1);             }              base.preparecontainerforitemoverride(element, item);         }     }