Silverlight: ListBox make two-row image slider

hi guys I have a listbox which I could make it into a 'one-row' image slider, as the following code:

<ListBox x:Name="lbImage" Style="{StaticResource horizontalListBoxStyle }"
                    Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Left"
                SelectionChanged="lbImage_SelectionChanged" Height="90" Margin="0, 0, 0 ,0" Width="500">
    开发者_如何学C            <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Href}" Height="40" Width="40" Stretch="UniformToFill" Cursor="Hand" Margin="0,0,-1,0" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
                </ListBox>

With the I fill the imageSource in the code behind as follow:

 List<Picture> imageList = new List<Picture>();
        imageList.Add(new Picture(...));
        lbImage.ItemsSource = imageList;

So it works as an one-row slider. What should I change to make it a 'two-row' slider? What I mean by 'two-row' is that I want two rows on the slider.

image1 image2 image3... image6 image7 image8...

Thanks

SimpleCode

Change your datasource to a class that contains picture pairs:

List<PicturePair> imageList = new List<PicturePair>();
        imageList.Add(new PicturePair{Picture1 = ..., Picture2 = ...});
        lbImage.ItemsSource = imageList;

Then change your DataTemplate to be a grid

<ListBox x:Name="lbImage" 
         Style="{StaticResource horizontalListBoxStyle }"
         Background="Transparent" 
         VerticalAlignment="Top" HorizontalAlignment="Left"
         SelectionChanged="lbImage_SelectionChanged" Height="90" Margin="0, 0, 0 ,0" 
         Width="500">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <GridRowDefinitions>
                   <RowDefinition Height="45"/>
                   <RowDefinition Height="45"/> 
                </GridRowDefinitions>
                <Image Grid.Row="0"
                       Source="{Binding Path=/Picture1/Href}}" Height="40" Width="40"
                       Stretch="UniformToFill" Cursor="Hand" 
                       Margin="0,0,-1,0"/>
                <Image Grid.Row="1"
                       Source="{Binding Path=/Picture2/Href}" Height="40" Width="40"
                       Stretch="UniformToFill" Cursor="Hand" 
                       Margin="0,0,-1,0"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

I don't have a compiler with me at the moment, so I can't test this, but I think this will do the trick.