ListBox with multiple captured images windows phone - windows-phone-7

Question

Does anyone know how to make a listbox with multiple images. I want to be able to capture an image and then display on the screen, then capture another and display after the first one and so on. It is basically images gallery page that I want to create. I would like to store them somewhere on the phone, so they can be retrieved when the application runs again.
So it should be something like in the picture: http://blog.xamarin.com/wp-content/uploads/2012/02/wp2.png
Thank you in advance, I have been doing researches about it but can't find anything.

Answer 1

Well, that is fairly easy. You use a ListBox set the ItemsPanel to a WrapPanel, and either bind ItemsSource to a ObservableCollection (or List/Array, but ObservableCollection is better suited for Bindings).
There are multible ways to do it
Lets take the easiest approach. In xaml you define your ListBox:
<ListBox x:Name="listbox">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="5"
Background="{StaticResource PhoneChromeBrush}"
Height="180"
Width="180">
<Image Source="{Binding}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In your code behind, you can load the images with something like this:
ObservableCollection<BitmapImage> images = new ObservableCollection<BitmapImage>();
List<String> bitmapuris = ....
using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication())
{
foreach(var bitmapuri in bitmapuris)
{
System.Windows.Media.Imaging.BitmapImage bitmap = new System.Windows.Media.Imaging.BitmapImage();
if (isoStore.FileExists(bitmapuri))
{
using (IsolatedStorageFileStream stream = isoStore.OpenFile(bitmapuri, System.IO.FileMode.Open, System.IO.FileAccess.Read))
{
bitmap.CreateOptions = System.Windows.Media.Imaging.BitmapCreateOptions.BackgroundCreation;
bitmap.SetSource(stream);
}
}
images.Add(bitmap);
}
}
listbox.ItemsSource = images;
With bitmapuris being a List with all of your saved images urls.
Thats basicly what I'm using in some of my apps (though I use ViewModels and Bindings and don't set ItemsSource manually)
Hope this helps
edit:
On how to capture and save images you can read this article:
http://www.c-sharpcorner.com/UploadFile/mahakgupta/capture-save-and-edit-image-in-windows-phone-7/
I would save the Images in a specific folder i.e. "/Images/". That way you can load all images you previously captured on you app start with the code I posted above with List<String> bitmapuris set with this method:
List<String> getFiles(String folderpath)
{
IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication();
return storage.GetFileNames(folderpath).ToList();
}
like this List<String> bitmapuris = getFiles("/Images/*");
and when you captured an image you can simple add your image to your ListBox this way:
System.Windows.Media.Imaging.BitmapImage bitmap = new System.Windows.Media.Imaging.BitmapImage();
bitmap.CreateOptions = System.Windows.Media.Imaging.BitmapCreateOptions.BackgroundCreation;
bitmap.SetSource(myimagestream);
images.Add(bitmap);
providing images is the ObservableCollection<BitmapImage> you set as an ItemsSource to your ListBox.
This is now almost your fully working app, when compined with the link from above.