Horizontal ListBox unable to scroll Windows Phone 8.1 WP8.1

Question

I'm having a problem with ListBox in my WP8.1 application (WinRT), I'm unable to make it scroll horizontally. 5 images fit the screen and everything after 6th is simply cropped. I tried adding ScrollViewer around listbox, around ItemsPanelTemplate for ListBox and nothing works. This is my 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 this is a template for 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 as ItemsPanemTemplate but it acts the same. And when I try to set the property CanHorizontallyScroll=true , I get two errors, first is that this property doesn't exist inside VirtualizationStackpanel , and after deleting this property and returning it again, I get the error Syntax Error found in XBF generation . I tried searching a solution for this by myself, looked here, googled it but I couldn't find the solution. Can someone help me with this? I'm busting my head with it for 2 days.

UPDATE:

The listbox is inside grid with 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 is set to auto because I'm animating listbox height. Listbox acts as AppBar, when I press button on app bar, listbox shows up containing menu items.

SOLUTION UPDATE:

Inspired by the solution provided by SWilko, I also managed to solve my problem with little more configuration of my 'ListBox', so a fix to my previous code looks like 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 that should be done is to disable vertical scrolling and enable horizontal one.

Answer 1

First thing is the Height of your ListBox is set to 0 but presume that might be typo :)

Here's a 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 is disabled and ScrollViewer is wrapped around it. Hopefully you can adapt for your code