display pictures from media library in separate thumbnails

Question

here is what i have

     MediaLibrary m = new MediaLibrary();

        foreach (var r in m.Pictures)
        {
            Stream imageStream = r.GetImage();

            var imageToShow = new Image()
            {

                Source = PictureDecoder.DecodeJpeg(r.GetImage())
            };

            lstImageFromMediaLibrary.Items.Add(imageToShow);
        }

and the xaml code

   <ListBox Height="260" HorizontalAlignment="Left" Margin="6,141,0,0" 
            Name="lstImageFromMediaLibrary" VerticalAlignment="Top" Width="442" >                 
              <Image Name="imageTo" 
                DataContext="{Binding ElementName=lstImageFromMediaLibrary}">
              </Image>        
    </ListBox>

Now the listbox shows the images retrieved in a scrollable form, but I want two put two images side by side and continue to scroll down just as in the album view in picture hub. any input greatly appriciated.

also can anyone explain each line of the code above???

Answer 1

You can make use of the WrapPanel from Silverlight toolkit

Modify your Listbox xaml code to something like this

<ListBox Height="260" HorizontalAlignment="Left" Margin="6,141,0,0" 
        Name="lstImageFromMediaLibrary" VerticalAlignment="Top" Width="442" >
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <toolkit:WrapPanel ItemWidth="200" ItemHeight="200"/>
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>

      <Image Name="imageTo" 
         DataContext="{Binding ElementName=lstImageFromMediaLibrary}">
      </Image>        
</ListBox>

Adjust the ItemWidth and ItemHeight properties accordingly to fit your images.