Images in a Horizontal StackPanel are being displayed Vertically

Question

I am building a layout in Silverlight 4, and am trying to display some thumbnail images horizontally with a horizontal scrollbar. To do this I tried using a StackPanel with Horizontal Orientation, but the resulting images are always displayed Vertically.

<ScrollViewer Height="140" VerticalAlignment="Top" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
    <StackPanel Height="140" Orientation="Horizontal">
        <ListBox Height="140" ItemsSource="{Binding SelectedUser.ProfileImages}" />
    </StackPanel>
</ScrollViewer>

The ItemsSource is a List of System.Windows.Controls.Image. To test I am seeding it with 4 thumbnails and setting the size on each to 120x160.

BitmapImage bmpImage1 = new BitmapImage { UriSource = new Uri("Style/Images/thumbnail1.jpg", UriKind.Relative) };
Image image1 = new Image { Source = bmpImage1, Height = 120, Width = 160 };

The resulting page object ends up looking like the image linked below. Height 140, Width 160, but the images are arranged Vertically and not Horizontally. Any ideas how to get these images to display horizontally instead of vertically?

http://img824.imageshack.us/img824/8211/stackpanel.png

Answer 1

Rather than trying to manager the ScrollViewer yourself (which ListBox already does) you just need to replace the default ItemsPanel with a Horizontal StackPanel. Like this:-

<ListBox Height="140" ItemsSource="{Binding SelectedUser.ProfileImages}">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>