的Silverlight：列表框使兩行的圖像滑塊

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; 

所以它作爲一個單行滑塊。我應該改變什麼使它成爲「雙排」滑塊？我的意思是'兩排'，我想在滑塊上放兩行。

圖像1圖像2圖像3 ... 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> 

我現在還沒有編譯器，所以我無法測試這個，但我認爲這樣做會有效。