Silverlight: ListBox сделать двухстрочный слайдер изображений

Question

Привет, ребята, у меня есть список, который я мог бы превратить в слайдер изображений «в одну строку», как в следующем коде:

<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>
                        <Image Source="{Binding Href}" Height="40" Width="40" Stretch="UniformToFill" Cursor="Hand" Margin="0,0,-1,0" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
                </ListBox>

Я заполняю imageSource в коде, как показано ниже:

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

Так что он работает как однорядный слайдер.Что я должен изменить, чтобы сделать его «двухрядным» слайдером?Под «двумя рядами» я подразумеваю, что мне нужно две строки на слайдере.

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

Спасибо

SimpleCode

Answer 1

Измените ваш источник данных на класс, который содержит пары изображений:

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

Затем измените ваш DataTemplate на сетку

<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>

В данный момент у меня нет компилятора, поэтому я не могу проверить это, но думаю, что это поможет.