c# - Horizontal ListBox unable to scroll Windows Phone 8.1 WP8.1 -

i'm having problem listbox in wp8.1 application (winrt), i'm unable make scroll horizontally. 5 images fit screen , after 6th cropped. tried adding scrollviewer around listbox, around itemspaneltemplate listbox , nothing works. xaml code

    <listbox x:name="appbarmenu"          grid.row="1"          canvas.zindex="1"          scrollviewer.horizontalscrollbarvisibility="auto"          background="{staticresource backgroundcolorapp}"          itemtemplate="{staticresource stackmenuitem}"          itemssource="{binding}"          style="{staticresource listboxhorizontal}"          itemcontainerstyle="{staticresource listboxcontainerstylepp}"          foreground="{staticresource tbcolornonselected}"          selectedindex="{binding selectedindex, elementname=petprotectorframes, mode=twoway}"          height="0"          verticalalignment="top"          selectionchanged="appbarmenu_selectionchanged"          scrollviewer.verticalscrollbarvisibility="disabled">       </listbox> 

and template itemspaneltemplate

<style x:key="listboxhorizontal"        targettype="listbox">     <setter property="borderthickness"             value="0" />     <setter property="itemspanel">         <setter.value>             <itemspaneltemplate>                 <stackpanel orientation="horizontal"                             verticalalignment="center"                             horizontalalignment="center" />             </itemspaneltemplate>         </setter.value>     </setter> </style> 

i event tried adding virtualizationstackpanel instead of stack panel itemspanemtemplate acts same. , when try set property canhorizontallyscroll=true, 2 errors, first property doesn't exist inside virtualizationstackpanel, , after deleting property , returning again, error syntax error found in xbf generation. tried searching solution myself, looked here, googled couldn't find solution. can me this? i'm busting head 2 days.

update:

the listbox inside grid folowing setup:

    <grid x:name="maingrid">     <grid.rowdefinitions>         <rowdefinition height="0.091*" />         <rowdefinition height="auto" />         <rowdefinition height="0.01*" />         <rowdefinition height="0.9*" />      </grid.rowdefinitions>     <grid.columndefinitions>         <columndefinition width="*" />     </grid.columndefinitions> 

the second row height set auto because i'm animating listbox height. listbox acts appbar, when press button on app bar, listbox shows containing menu items.

solution update:

inspired solution provided swilko, managed solve problem little more configuration of 'listbox', fix previous code looks this:

    <listbox x:name="appbarmenu"      grid.row="1"      canvas.zindex="1"      scrollviewer.horizontalscrollmode="enabled"      scrollviewer.horizontalscrollbarvisibility="visible"      scrollviewer.verticalscrollbarvisibility="disabled"      scrollviewer.verticalscrollmode="disabled"      background="{staticresource backgroundcolorapp}"      itemtemplate="{staticresource stackmenuitem}"      itemssource="{binding}"      style="{staticresource listboxhorizontal}"      itemcontainerstyle="{staticresource listboxcontainerstylepp}"      foreground="{staticresource tbcolornonselected}"      selectedindex="{binding selectedindex, elementname=petprotectorframes, mode=twoway}"      height="0"      verticalalignment="top"      selectionchanged="appbarmenu_selectionchanged">   </listbox> 

all should done disable vertical scrolling , enable horizontal one.

first thing height of listbox set 0 presume might typo :)

here's simple example of listbox scrolling horizontally.

item.cs

public class item {     public string name { get; set; } } 

mainpage.xaml.cs constructor

public mainpage()     {         this.initializecomponent();          this.navigationcachemode = navigationcachemode.required;          var list = new list<item>         {             new item { name = "item 1" },             new item { name = "item 2" },             new item { name = "item 3" },             new item { name = "item 4" },             new item { name = "item 5" },             new item { name = "item 6" },             new item { name = "item 7" },             new item { name = "item 8" }         };          this.appbarmenu.itemssource = list;     } 

mainpage.xaml

 <grid>     <scrollviewer     scrollviewer.horizontalscrollmode="enabled"     scrollviewer.horizontalscrollbarvisibility="visible"     scrollviewer.verticalscrollbarvisibility="disabled"     scrollviewer.verticalscrollmode="disabled">         <listbox x:name="appbarmenu"             scrollviewer.horizontalscrollbarvisibility="disabled"             scrollviewer.verticalscrollbarvisibility="disabled"                  height="100"             verticalalignment="top">             <listbox.itemspanel>                 <itemspaneltemplate>                     <stackpanel orientation="horizontal"/>                 </itemspaneltemplate>             </listbox.itemspanel>             <listbox.itemtemplate>                 <datatemplate>                     <textblock text="{binding name}" foreground="red"                             fontsize="30"/>                 </datatemplate>             </listbox.itemtemplate>         </listbox>     </scrollviewer> </grid> 

note listbox scrollviewer disabled , scrollviewer wrapped around it. can adapt code