windows phone 8.1 - Create a dynamic grid view with varying cell size in C# -

i want create grid view varying cell size. due inbuilt windows feature in cells adjust in row, following result.

but want grid feature similar staggered grid in android given in link:

https://dzone.com/articles/how-implement-staggered-grid

is there method in wp8.1 programming?

in xaml use itemscontrol represents control can used present collection of items.

create new panel can use itemscontrol. more information refer link: http://www.visuallylocated.com/post/2015/02/20/creating-a-wrappanel-for-your-windows-runtime-apps.aspx

write class in xaml.cs follows.

public class wrappanel : panel {      protected override size measureoverride(size availablesize)     {         // take of width         size finalsize = new size { width = availablesize.width };          double x = 0;         double rowheight = 0d;         foreach (var child in children)         {             // tell child control determine size needed             child.measure(availablesize);              x += child.desiredsize.width;             if (x > availablesize.width)             {                 // item start next row                 x = child.desiredsize.width;                  // adjust height of panel                 finalsize.height += rowheight;                 rowheight = child.desiredsize.height;             }             else             {                 // tallest item                 rowheight = math.max(child.desiredsize.height, rowheight);             }         }          // in case had 1 row         if (finalsize.height == 0)         {             finalsize.height = rowheight;         }          return finalsize;     }      protected override size arrangeoverride(size finalsize)     {         rect finalrect = new rect(0, 0, (finalsize.width / 2) - 10, finalsize.height);          double evenitemheight = 0;         double odditemheight = 0;         int itemnumber = 1;         foreach (var child in children)         {             if (itemnumber % 2 == 0)             {                 finalrect.x = (finalsize.width / 2);                 finalrect.y = evenitemheight;                 evenitemheight += children[itemnumber - 1].desiredsize.height;             }             else             {                 finalrect.x = 0;                 finalrect.y = odditemheight;                 odditemheight += children[itemnumber - 1].desiredsize.height;             }             itemnumber++;             child.arrange(finalrect);         }         return finalsize;     }  } 

staggergrid.xaml code follows: xmlns:local="using:staggergridsample.views"// namespace of class wrappanel

<grid>         <scrollviewer >             <itemscontrol x:name="itemscontrol" itemssource="{binding strlist,updatesourcetrigger=propertychanged}">                 <itemscontrol.itemspanel>                     <itemspaneltemplate>                         <local:wrappanel/>                     </itemspaneltemplate>                 </itemscontrol.itemspanel>                 <itemscontrol.itemtemplate>                     <datatemplate>                         <button background="red"                              width="185"                             verticalalignment="top"                             margin="0,0,6,0">                             <textblock text="{binding}"                                    verticalalignment="top"                                    textwrapping="wrap"                                    fontsize="20"/>                         </button>                     </datatemplate>                 </itemscontrol.itemtemplate>             </itemscontrol>         </scrollviewer>     </grid>