Question

I am trying to bind an image that is saved in isolated storage and display it on the same screen as the camera, but I can’t seem to get the image to display. I don’t know if it because I am not saving it on the phones camera roll, but I am not saving them because I am gonna take multiple pictures and display them like a film strip across the bottom of the view finder for the camera. Can anyone help me please?

I am using this tutorial Here

public partial class Page1 : PhoneApplicationPage
{
private static ObservableCollection<PhotoImage> photoList = new ObservableCollection<PhotoImage>();//For the class and list
private int savedCounter = 0;



public Page1()
{
        InitializeComponent();
}


private void ShutterButton_Click(object sender, RoutedEventArgs e)
    {
        if (cam != null)
        {
            try
            {
                // Start image capture.
                cam.CaptureImage();

            }
            catch (Exception ex)
            {
                this.Dispatcher.BeginInvoke(delegate()
                {
                    txtDebug.Text = ex.Message;
                });
            }
        }
    }

    void cam_CaptureCompleted(object sender, CameraOperationCompletedEventArgs e)
    {
        // Increments the savedCounter variable used for generating JPEG file names.
        savedCounter++;
    }

    void cam_CaptureImageAvailable(object sender, Microsoft.Devices.ContentReadyEventArgs e)
    {
        string fileName = "MyImage" + savedCounter + ".jpg";

        try
        {   

            // Save picture to the library camera roll.
            //library.SavePictureToCameraRoll(fileName, e.ImageStream);//dont want to save it to the camera roll


            // Set the position of the stream back to start
            e.ImageStream.Seek(0, SeekOrigin.Begin);

            // Save picture as JPEG to isolated storage.
            using (IsolatedStorageFile isStore = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream targetStream = isStore.OpenFile(fileName, FileMode.Create, FileAccess.Write))
                {
                    // Initialize the buffer for 4KB disk pages.
                    byte[] readBuffer = new byte[4096];
                    int bytesRead = -1;

                    // Copy the image to isolated storage. 
                    while ((bytesRead = e.ImageStream.Read(readBuffer, 0, readBuffer.Length)) > 0)
                    {
                        targetStream.Write(readBuffer, 0, bytesRead);
                    }

                }

            }

            Deployment.Current.Dispatcher.BeginInvoke(delegate()
            {

                photoList.Add(new PhotoImage(fileName));//here is where I set with the file name
                listBoxSearch.ItemsSource = photoList; //here is the binding 
            });


        }
        finally
        {
            // Close image stream
            e.ImageStream.Close();
        }

    }
    public class PhotoImage
    {

        public string PhotoItem { get; set; }

        public PhotoImage(string pItem)
        {
            this.PhotoItem = pItem;

        }
    }

here is my XAML code

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="640" />
        <ColumnDefinition Width="160" />
    </Grid.ColumnDefinitions>

    <Canvas x:Name="viewfinderCanvas" Width="640" HorizontalAlignment="Left" Margin="0,0,0,143">

        <!--Camera viewfinder -->
        <Canvas.Background>
            <VideoBrush x:Name="viewfinderBrush" />
        </Canvas.Background>
        <TextBlock Height="40" Name="txtDebug" Width="626" FontSize="24" FontWeight="ExtraBold" Canvas.Left="14" Canvas.Top="297" />
    </Canvas>

    <!--Button StackPanel to the right of viewfinder>-->
    <StackPanel Grid.Column="1" >
        <Button x:Name="ShutterButton" Content="SH" Click="ShutterButton_Click" FontSize="26" FontWeight="ExtraBold" Height="75" />
    </StackPanel>
    <Grid>
        <ListBox Foreground="RoyalBlue" Height="131"  Name="listBoxSearch"  Width="438"  TabIndex="10" Margin="96,343,106,6">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="Auto" >
                        <Image Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0" Source="{Binding PhotoItem }" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>

</Grid>

Answer 1

Okay – the issue is that does not have an implicit converter that knows how to take an IsoStorage URI and load it.

One easy solution is to add another property to your PhotoImage class and bind to it instead – here’s a quick and dirty:

public ImageSource SourceItem
{
  get
  {
    BitmapImage image = new BitmapImage();
    image.SetSource(isStore.OpenFile(PhotoItem, FileMode.Open));  
    return image;
  }
}

Note that this is not a great solution – I am just showing you the general idea. Things to think about when implementing your own:

1. The stream is not being discarded. Wrap the Stream in a using when setting it into image.
2. Depending on what you are trying to do, you may want to use image.CreateOptions to make the app more responsive (but then you need to figure out how to handle the stream needing to be kept opened)
3. Finally, the image that will be loaded will be at full resolution. You may want to look into PictureDecoder.DecodeJpeg() to load a thumbnail of the image instead (or look at the thumbnail provided by the camera object)