windows store apps - Responsive GridView -

i create responsive gridview windows universal app. want gridview columns horizontally fills whole space.

xaml should this, don't know combination of itemspaneltemplate have use.

<page>  <page.resources>     <collectionviewsource x:name="groupeditemsviewsource" issourcegrouped="true"/> </page.resources>  <gridview itemssource="{binding source={staticresource groupeditemsviewsource}}">     <gridview.itemspanel>         <itemspaneltemplate>             <!-- ? -->         </itemspaneltemplate>     </gridview.itemspanel>     <gridview.groupstyle>         <groupstyle>             <groupstyle.headertemplate>                 <datatemplate>                     <!-- header -->                 </datatemplate>             </groupstyle.headertemplate>             <groupstyle.panel>                 <itemspaneltemplate>                     <!-- ? -->                 </itemspaneltemplate>             </groupstyle.panel>         </groupstyle>     </gridview.groupstyle>     <gridview.itemtemplate>         <datatemplate>             <!-- item -->         </datatemplate>     </gridview.itemtemplate> </gridview>  </page> 

i understand question. honestly, won't end doing way. maybe wanting learn how it. so, sake of academic inquiry going answer question.

use xaml:

<local:mygridview>      <itemscontrol.itemspanel>         <itemspaneltemplate>             <grid>                 <grid.rowdefinitions>                     <rowdefinition />                     <rowdefinition />                     <rowdefinition />                 </grid.rowdefinitions>                 <grid.columndefinitions>                     <columndefinition />                     <columndefinition />                     <columndefinition />                 </grid.columndefinitions>             </grid>         </itemspaneltemplate>     </itemscontrol.itemspanel>      <itemscontrol.itemcontainerstyle>         <style targettype="gridviewitem">             <setter property="horizontalcontentalignment" value="stretch" />             <setter property="verticalcontentalignment" value="stretch" />         </style>     </itemscontrol.itemcontainerstyle>      <itemscontrol.itemtemplate>         <datatemplate>             <grid   background="{binding color}"                 margin="10"                 grid.rowspan="{binding rowspan}"                  grid.columnspan="{binding columnspan}"                 grid.row="{binding row}"                  grid.column="{binding column}">             </grid>         </datatemplate>     </itemscontrol.itemtemplate>      <gridview.items>         <local:myitem color="gainsboro" row="0" rowspan="1" column="0" columnspan="3" />         <local:myitem color="red" row="1" rowspan="1" column="0" columnspan="1" />         <local:myitem color="green" row="1" rowspan="1" column="1" columnspan="1" />         <local:myitem color="blue" row="1" rowspan="1" column="2" columnspan="1" />         <local:myitem color="yellow" row="2" rowspan="1" column="0" columnspan="1" />         <local:myitem color="orange" row="2" rowspan="1" column="1" columnspan="1" />     </gridview.items>  </local:mygridview> 

use code behind:

public class mygridview : gridview {     protected override dependencyobject getcontainerforitemoverride()     {         var container = base.getcontainerforitemoverride() frameworkelement;         if (container == null) return container;          var content = itemtemplate.loadcontent() frameworkelement;         if (content == null) return container;          // sync container grid dependency properties content         var binding = content.getbindingexpression(grid.rowproperty);         if (binding != null)             container.setbinding(grid.rowproperty, content.getbindingexpression(grid.rowproperty).parentbinding);         binding = content.getbindingexpression(grid.rowspanproperty);         if (binding != null)             container.setbinding(grid.rowspanproperty, binding.parentbinding);         binding = content.getbindingexpression(grid.columnproperty);         if (binding != null)             container.setbinding(grid.columnproperty, binding.parentbinding);         binding = content.getbindingexpression(grid.columnspanproperty);         if (binding != null)             container.setbinding(grid.columnspanproperty, binding.parentbinding);          return container;     } } 

this give asked in question.

now, let's talk why won't want approach. dynamic size of cell not feature of wrapgrid, native panel gridview. result, have switch grid, doesn't have dynamic rows/columns. update example create dynamic rows/columns? of course. that's not point.

internally, ms design recommends margins change based on width of gridview. this, itself, no small feat since cannot databind margin. resulting visual improved because gives more space on page width decreased without messing size of data item. once reach narrow width, let native wrapgrid remove column you, rather maintaining fixed number of columns.

step minute , consider how have write each data item in gridview adaptive logic initial approach. complexity needless addition apps. being said, don't know app do. developer , not me. can decide what's best project.

you might asking yourself, how microsoft change margin? answer using vsm wait width , when occurs, set margin explicitly. depending on type of control decide use, may need inject margin somehow, in general, it's vsm action. important because it's not sliding scale. say, it's either wider margin or more narrow margin , nothing in between.

man, hope makes sense.

best of luck!