c# - Windows 8 Layout on WPF using listbox or list view with data binding -

i'm trying custom layout windows 8 layout :

• horizontal scroll
• 4 rows of elements (one itemsource)

i'm binding rss feed listbox , when use wrappanel have problems datatemplate .

i want order of element :

• 1 5 9 ...
• 2 6 10 ...
• 3 7 11 ...
• 4 8 12 ...
• [scroll ]

my xaml listbox :

            <listbox.itemtemplate >                 <datatemplate >                         <grid width="400" height="100" >                             <grid.columndefinitions>                                 <columndefinition width="*"/>                                 <columndefinition width="10"/>                                 <columndefinition width="2*"/>                             </grid.columndefinitions>                              <image source="{binding xpath=enclosure/@url}" grid.column="0" horizontalalignment="left" verticalalignment="top"  />                             <textblock textwrapping="wrap" text="{binding xpath=title}" fontweight="bold" grid.column="2"/>                         </grid>                 </datatemplate>             </listbox.itemtemplate>         </listbox>     </stackpanel> 

i tried doesn't work error on listbox itemtemplate :

    <listbox scrollviewer.horizontalscrollbarvisibility="visible" scrollviewer.verticalscrollbarvisibility="disabled">         <listbox.itemspanel>             <itemspaneltemplate>                 <wrappanel isitemshost="true" orientation="horizontal"/>             </itemspaneltemplate>             <listbox.itemtemplate >                 <datatemplate >                     <grid width="400" height="100" cursor="hand"  >                         <grid.columndefinitions>                             <columndefinition width="*"/>                             <columndefinition width="10"/>                             <columndefinition width="2*"/>                         </grid.columndefinitions>                         <image source="{binding xpath=enclosure/@url}" grid.column="0" horizontalalignment="left" verticalalignment="top"  />                         <textblock textwrapping="wrap" text="{binding xpath=title}" fontweight="bold" grid.column="2"/>                     </grid>                 </datatemplate>             </listbox.itemtemplate>         </listbox.itemspanel>     </listbox> 

you need change wrappanel orientation vertical

<listbox.resources>     <itemspaneltemplate>          <wrappanel orientation="vertical"/>     <itemspaneltemplate> </listbox.resources> 

and move datatemplate section out itemspanel definition

<listbox scrollviewer.horizontalscrollbarvisibility="visible" scrollviewer.verticalscrollbarvisibility="disabled">     <listbox.itemspanel>         <itemspaneltemplate>             <wrappanel isitemshost="true" orientation="vertical"/>         </itemspaneltemplate>     </listbox.itemspanel>     <listbox.itemtemplate >         <datatemplate >             <grid width="400" height="100" cursor="hand"  >                 <grid.columndefinitions>                     <columndefinition width="*"/>                     <columndefinition width="10"/>                     <columndefinition width="2*"/>                 </grid.columndefinitions>                 <image source="{binding xpath=enclosure/@url}" grid.column="0" horizontalalignment="left" verticalalignment="top"  />                 <textblock textwrapping="wrap" text="{binding xpath=title}" fontweight="bold" grid.column="2"/>             </grid>         </datatemplate>     </listbox.itemtemplate> </listbox>