Monday, December 12, 2011

Turning XAML into an image (jpg) in WP7 isolated storage and to the Phone Media Library

So one thing that has been kind a trick since the old avalon then wpf days was to be able to can a snap shot of part of the visual tree and make that an image so that you can clean up the visual tree from some xaml complexity and replace it with a plain image. I ended up trying todo with with my princess paper dolls app and found that its not as straight forward as wpf used to be but this works well enough with only a few lines of code. To start with you need to covert the UIElement root you want to turn into an image or rather a bitmap like this:

WriteableBitmap bitmap = new WriteableBitmap(480, 800);
bitmap.Render(master_03_14_2011, null);
bitmap.Invalidate();

So in this case 'master_03_14_2011' is the name of my canvas that holds the 'princess' in the app 'princess paper dolls'. Next I need to create a file name and convert the bitmap and store it to isolated storage


String FileName = String.Format("PrincessPaperDoll_{0:yyyy-MM-dd_hh-mm-ss-tt}.jpg", DateTime.Now);

var myStore = IsolatedStorageFile.GetUserStoreForApplication();
if (myStore.FileExists(FileName))
{
myStore.DeleteFile(FileName);
}
IsolatedStorageFileStream MyFileStream = myStore.CreateFile(FileName);

StreamResourceInfo sri = null;
Uri uri = new Uri("Princess;component/" + FileName, UriKind.Relative);
sri = Application.GetResourceStream(uri);
bitmap.SaveJpeg(MyFileStream, int.Parse(master_03_14_2011.Width.ToString()), int.Parse(master_03_14_2011.Height.ToString()), 0, 85);

ok so also we checked to see if the file exists before we try to write it and delete the old version. granted given how I'm creating the name its still kind of scares me to risk it. Next we do some clean up:

MyFileStream.Close();

Yes that was easy but now we need to use that stream again to get the image into the media library. First we create a stream again from the file in isolated storage.

MyFileStream = myStore.OpenFile(FileName, FileMode.Open, FileAccess.Read);
.

Now we can save it to the media library either to saved pictures or to the camera roll.

MediaLibrary library = new MediaLibrary();
Picture pic = library.SavePicture(FileName, MyFileStream);
//Picture pic = library.SavePictureToCameraRoll(FileName, MyFileStream);
MyFileStream.Close();

and some clean up and your good. unfortunately as of late there is no way to open up to the image in the media library.

No comments:

Post a Comment