How to use StackPanel to add a picture after another horizontally?

Question

I need to display a list of images, one after another horizontally. In the following code I can see the images but they are pile one of top of another (vertically).

Any idea what is wrong?

  <DataTemplate x:Key="ShopsImagesItemDataTemplate">
        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
            <Image Source="{Binding LeftImageUrlString}" Height="270" HorizontalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>

                    <Custom:SurfaceListBox x:Name="ShopImagesListBox"
                                               ItemTemplate="{DynamicResource ShopsImagesItemDataTemplate}"
                                               ScrollViewer.VerticalScrollBarVisibility="Auto"
                                               ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                               ItemContainerStyle="{DynamicResource ShopImagesSurfaceListBoxItemStyle}"
                                               Height="270"
                                               Margin="40,2,40,19"
                                               Grid.Row="2"
                                               Grid.ColumnSpan="3"
                                               />

Answer 1

Assuming your SurfaceListBox is basically a ListBox, it is laying out EACH item vertically, where each item has a StackPanel, and althout its layout is horizontal, it only contains ONE item.

Consider changing the ItemsPanel of your ListBox:

<Custom:SurfaceListBox x:Name="ShopImagesListBox"
                   ItemTemplate="{DynamicResource ShopsImagesItemDataTemplate}"
                   ScrollViewer.VerticalScrollBarVisibility="Auto"
                   ScrollViewer.HorizontalScrollBarVisibility="Auto"
                   ItemContainerStyle="{DynamicResource ShopImagesSurfaceListBoxItemStyle}"
                   Height="270"
                   Margin="40,2,40,19"
                   Grid.Row="2"
                   Grid.ColumnSpan="3"
                   >
  <Custom:SurfaceListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal" IsItemsHost="True" />
      </ItemsPanelTemplate>
   </Custom:SurfaceListBox.ItemsPanel>

Answer 2

<DataTemplate x:Key="ShopsImagesItemDataTemplate">
    <Image Source="{Binding LeftImageUrlString}" Height="270" HorizontalAlignment="Center"/>
</DataTemplate>

<Custom:SurfaceListBox x:Name="ShopImagesListBox"
          ItemTemplate="{DynamicResource ShopsImagesItemDataTemplate}"
          ScrollViewer.VerticalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ItemContainerStyle="{DynamicResource ShopImagesSurfaceListBoxItemStyle}"
          Height="270"
          Margin="40,2,40,19"
          Grid.Row="2"
          Grid.ColumnSpan="3">
    <Custom:SurfaceListBox.ItemsPanel>
        <ItemsPanelTemplate>
              <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </Custom:SurfaceListBox.ItemsPanel>
</Custom:SurfaceListBox>