Silverlight: ListBox machen zweireihige Bild Schieber

Question

hallo Jungs Ich habe ein Listenfeld, das ich es in einen Schieber ‚mit einer Zeile‘ Bild machen können, wie dem folgenden 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"> 
       <ListBox.ItemTemplate> 
        <DataTemplate> 
         <Image Source="{Binding Href}" Height="40" Width="40" Stretch="UniformToFill" Cursor="Hand" Margin="0,0,-1,0" /> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
       </ListBox> 

Mit dem ich füllen die imageSource im Code hinter wie folgt:

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

So funktioniert es als ein Ein-Zeilen-Slider. Was sollte ich ändern, um es zu einem "zweireihigen" Schieberegler zu machen? Was ich mit "zweireihig" meine, ist, dass ich zwei Reihen auf dem Schieberegler haben möchte.

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

Dank

SimpleCode

Answer 1

Ändern Sie Ihre Datenquelle zu einer Klasse, die Bildpaare enthält:

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

Dann Ändern Sie Ihre DataTemplate zu einem Raster

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

Ich habe im Moment keinen Compiler mit mir, also kann ich das nicht testen, aber ich denke, das wird den Trick machen.