Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Windows Phone 7 Beta: How do I save an image to the Pictures Hub

If you started playing with the Windows Phone 7 beta you may be aware that the only storage you have to play with is isolated storage. However, what happens if you take a photo in your application (ie using the CameraCaptureTask) that you then want to be available in other applications. Clearly by the virtue of it being “isolated” you can’t simply share access to isolated storage. Instead what you can do is to save the image to the Pictures Hub.

Let’s start by taking a photo:

CameraCaptureTask camera = new CameraCaptureTask();
public MainPage(){
    InitializeComponent();

    camera.Completed += new EventHandler<PhotoResult>(camera_Completed);
}

byte[] imageBits;
void camera_Completed(object sender, PhotoResult e){
    imageBits = new byte[(int)e.ChosenPhoto.Length];
    e.ChosenPhoto.Read(imageBits, 0, imageBits.Length);
    e.ChosenPhoto.Seek(0, System.IO.SeekOrigin.Begin);

    var bitmapImage = PictureDecoder.DecodeJpeg(e.ChosenPhoto);
    this.PhotoImage.Source = bitmapImage;
}

private void TakePictureButton_Click(object sender, RoutedEventArgs e){
    camera.Show();
}

Now for the interesting part. Let’s add this to the Pictures hub. We do this by creating an instance of the MediaLibrary class (you will need to add a reference to Microsoft.Xna.Framework.dll to your project). Then you simply call SavePicture, passing in either a byte array (in our case imageBits) or an image stream.

private void SaveToHubButton_Click(object sender, RoutedEventArgs e){
    var library = new MediaLibrary();
    library.SavePicture("My Photo",imageBits);   
}

And that’s it for saving. You can also view all saved images via the SavedPictures property on the MediaLibrary instance.

private void SavedPicturesButton_Click(object sender, RoutedEventArgs e){
    var library = new MediaLibrary();
    var photos = (from p in library.SavedPictures
                    select new ImageWrapper(p)).ToArray();
    SavedPhotosList.ItemsSource = photos;
}

public class ImageWrapper{
    public Picture Picture { get; set; }

    public ImageWrapper(Picture picture){
        Picture = picture;
    }

    public ImageSource Image{
        get{
            var image = new WriteableBitmap(100,100);
            image.SetSource(Picture.GetThumbnail());
            return image;
        }
    }
}

You might be wondering why I’m wrapping the Picture in an ImageWrapper. This is so that I can easily data bind to a listbox. My xaml is the following:

<Grid x:Name="ContentGrid" Grid.Row="1">
    <Button Content="Take Picture" Height="72" HorizontalAlignment="Left" Name="TakePictureButton"
                   VerticalAlignment="Top" Width="293" Click="TakePictureButton_Click" />
    <Image Height="135" HorizontalAlignment="Left" Margin="314,6,0,0" Name="PhotoImage" Stretch="Fill" 
                   VerticalAlignment="Top" Width="154" />
    <Button Content="Save to Pictures Hub" Height="72" HorizontalAlignment="Left" Margin="0,69,0,0"
                   Name="SaveToHubButton" VerticalAlignment="Top" Width="293" Click="SaveToHubButton_Click" />
    <ListBox Height="396" HorizontalAlignment="Left" Margin="0,221,0,0" Name="SavedPhotosList"
                      VerticalAlignment="Top" Width="480" >
        <ListBox.Resources>
            <DataTemplate x:Key="ImageTemplate">
                <Border Height="100" Width="100" Padding="5" >
                    <Image Source="{Binding Image}"/>
                </Border>
            </DataTemplate>
        </ListBox.Resources>
        <ListBox.ItemTemplate>
            <StaticResource ResourceKey="ImageTemplate"/>
        </ListBox.ItemTemplate>
    </ListBox>
    <Button Content="Saved Pictures" Height="72" HorizontalAlignment="Left" Margin="0,143,0,0" 
                    Name="SavedPicturesButton" VerticalAlignment="Top" Width="293" Click="SavedPicturesButton_Click" />
</Grid>

Ok, so you might be wondering what this looks like in action…. (note that I’m using the hacked emulator build to do this so that you can see the pictures hub)

image

Across the top we have the stages of the application. Use clicks the Take Picture button that launches the camera capture task. When this returns the photo is applied to the image (top right of image three). The user clicks the Save to Pictures Hub button to save the image. Then when they click the Saved Pictures button the list of images in the Saved Pictures folder on the Pictures hub are displayed.

The bottom line illustrates where to find the images in the Pictures hub – All > Saved Pictures.

Comments (2) -

  • ohne taaaw

    9/12/2010 4:44:21 AM |

    dönüşümü çok. bazı ekipmanları vardır gelişmiş http://www.biberkapsulu.com/ programlar gibi yılında başlayan program faaliyetleri bacak gerçekleştirmek için kol veya

  • custom website design

    16/12/2010 5:49:59 AM |

    This is a great post thanks for partaking in this instructive entropy. . I will visit your blog regularly for some latest post.

  • Mozoot

    6/01/2011 8:31:47 PM |

    I have been looking for the script like this! you saved my time and it was .... Thanks for sharing

  • Property India

    9/01/2011 10:08:51 PM |

    Real Estate India - Jaaydaad.com offers residential and commercial properties in delhi India. Buy, Sell & Rent Property in India. For Residencial Property & Commercial Property in India, visit Jaaydaad.com.

  • Ploiesti

    11/01/2011 1:25:51 PM |

    Nice post, tnx for the advices :D !1

  • Welcome marrakech

    21/01/2011 2:51:13 AM |

    welcomemarrakech.com pour passer un séjour magique à Marrakech

  • CD Printing

    6/02/2011 11:22:01 AM |

    I'm searching for online posts that share ideas on various topics. Learned a lot reading it. Thanks for sharing..

  • mbt outlet

    16/02/2011 5:58:33 PM |

    This is a extremely sensible scan for me, Should<a href="http://www. iamawalkingdisaster.com /"> Mbt Outlet </a>admit that you're one of the simplest bloggers I ever saw.Thanks for posting this informative article.

  • Supra Footwear

    27/02/2011 3:51:23 PM |

    Thank you for taking this opportunity to talk about this, I feel strongly about it and I benefit from learning about this topic. If feasible, as you gain data, please update this weblog with new details. I have discovered it very helpful! I admiring time and effort you put within your weblog, due to the fact it's obviously one particular terrific place where I can come across great deal of helpful info. Bookmarked and I will share it. Thank you a great deal!

  • Thomas

    29/03/2011 1:09:20 PM |

    The use of MediaLibrary gives me a lot of problems.
    The first problem was that the MediaLibrary wasn't initialized to show my pictures in the listbox. The solutions was to use
    MediaPlayer.Queue.ToString() => forces it to initialize. That helped for displaying pictures from the MediaLibrary.
    But in my app I also take picture with the cameraTask which works till I press the "ACCEPT" button and return to the page and get the following =>FrameworkDispatcher.Update has not been called. To avoid this I was suggested to Update my page before calling the cameraTask.Show() but that didn't help. The only thing I found was that I needed to comment my previous solution (MediaPlayer.Queue.ToString()) to make it work again so back at the start...

    Did you encounter any of these problems ?

  • עורכי דין בתל אביב

    4/04/2011 6:27:02 AM |

    Clearly by the virtue of it being “isolated” you can’t simply share access to isolated storage. Instead what you can do is to save the image to the Pictures Hub

  • xiaomuxixu

    22/04/2011 11:34:59 PM |

    [url=http://www.pandoracharmssale.ca/]pandora charms[/url]

    [url=http://www.linksoflondonuks.com/]links of london[/url]

    [url=http://www.thomassabosalestore.com/]Thomas Sabo UK[/url]

    [url=http://www.rosettastoneapp.com/]Rosetta Stone Spanish[/url]

    [url=http://www.beatsdrdresale.com/]beats by dre[/url]
    Great sources for fashion news and fashion articles. It's got offered many details around the relevant information. I like this post quite definitely and i'm gonna recommend it to my pals. Brief and practical methods within the post save your time and inside the searching process. It's this kind of awesome source or technique i can't wait to use it. The post is totally incredible. Many thanks for all you posted and all you could tell us!  

  • Sky Blue Credit Review

    21/05/2011 10:36:46 PM |

    It is great to find a writer that knows their niche so incredibly well.  I will be sure to check in again to find out about what's new.

  • get your ex boyfriend back

    21/05/2011 10:59:08 PM |

    Howdy would you mind letting me know which webhost you're working with? I've loaded your blog in 3 different internet browsers and I must say this blog loads a lot quicker then most. Can you recommend a good web hosting provider at a fair price? Thanks, I appreciate it!

Pingbacks and trackbacks (2)+

Comments are closed