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.

Those Darn Gray Box's

(if you just need the hack er I mean 'solution' skip to the end)

ok so I was talking or rather tweeting with @ColinEberhardt about this issue with the gray box in IE on #wp7 (see his post at: https://github.com/phonegap/phonegap-wp7/issues/26). I've been working on my own HTMLApplicationHost Framework for doing HTML based WP7 apps and post this on codeplex: http://htmlappwp7.codeplex.com/ since what march I think. I've gotten 3 such apps in the Windows Phone 7 market place and one in Android that are HTML based. Here are a few links to some of those.

SMART Spending Habits: Windows Phone 7 (Deeplink, Paid version): http://windowsphone.com/s?appid=b44a9f3a-3480-4923-aa35-df26f6eb3c9e

SMART Spending Habits: Android 2.2 Version: https://market.android.com/details?id=com.SMART.SpendingHabits

I'm not sure I'm an expert at HTML phone apps yet but I do strongly believe that just about anything is possible and that there must be a solution to this gray box issue on phone 7 (wp7). So I took on the task of seeing what I could do. I started with creating a new phone 7 app that used my HTML Application Host framework etc (blah blah blah setting up stuff etc) so I got to the point of having my index.html page and started my tests in #wp7.

So the first test looked like this:

function test1() {
test1Location.innerHTML = "test 1 complete";
}

<div id="test1Location"><a onclick="test1();" href="http://www.blogger.com/post-create.g?blogID=887975141009593463#">test1</a></div>

running this clearly made the gray box... so I tried this:

<div id="test2Location"><a href="javascript:test2();">test 2

function test2() {
test2Location.innerHTML = "test 2 complete";
}

and as expected this made a nice gray box as well. So I tried this hoping it would work better:

function test3() {
test3Location.innerHTML = "test 3 complete";
}


<div onclick="test3();" id="test3Location"><u>test 3</u></div>

but alas this made a nice gray box too... *grr* so at this point I went back to Colin's post and watched the video and read a few other related posts then knowing that I didn't have a solution I had to try this:

function test4() {
test4Location.innerHTML = "test 4 complete";
}

<div id="test4Location"><a onclick="test4();" href="http://www.blogger.com/post-create.g?blogID=887975141009593463">test4 (will break)</a></div>

and yes this created a gray box AND blew up when the control tried to navigate to no where... and finally I thought I would try something else... yes this time a bit of a hack and messy, not very clean as such but lets take a look:

function test5() {
test5Location.innerHTML = "test 5 complete";
}

<div id="test5Location"><img onclick="test5();" src="http://www.blogger.com/test.jpg" width="99" height="99" /></div>

Amazingly enough, no gray box in the emulator on my machine. Now this is kind of a hack isn't real as it only works sometimes in the emulator under certain conditions but really its still there just it can't be seen due to the speed of the hardware. If you lucky enough to not see it you still will on the phone hardware. Until the windows phone team can manage a real fix for this annoying bug... but wait I'm not willing to give up yet.

so how do we make it go away in the mean time? the real hack is to just not let the events fire. This means really thinking abit out of hte box and doing some native C# stuff to fix the problem well sort of. The solution I'm not going to give you all the code (its a bit messy and a bit much and very custom) now but I'll explain how it works.

So how about we put a native but invisable touch panel over the top of the web browser control that hosts our app. This means that all events show up on that panel then you expose on your web browser control some interface and you process the events in C# to determine what is going on. then you pipe those events into the javascript context of the webbrowser control. This also means you have to have some javascript events to handle all the events you want to call or do something with. This is very specific to phone 7 and very customized around each action or event but it does in fact work. :) problem solved albiet an extremely painful hack until they fix this bug maybe in tango or apollo...

Building an HTML/HTML5... Based Application for Phone 7

So you want to build an HTML based application for phone 7, but wait there is not a way or at least a 'supported' way of doing that for phone 7. Why would you want to? For for starters wouldn't it be cool to have the same app/code base run on android and iphone. I realize a good portion of the 3 readers on my blog are probably aghast that I use the term 'iphone' (oops there it goes again) but in all honesty as an app developer it would be sooo cool to be able todo that. Let iterate some of the benefits: less time developing for multiple platforms, larger reach to my target demographic, really its not about the technology or the platform but reaching my target demographic.).

The obvious solution is to have a shell like a web browser control or web browser runtime using a local html file structure. But wait that is easy todo and I found that I can do that in Silverlight easy enough creating a HTML App Host Framework for phone 7. I got it working on the phone and couldn't think of a reason they would not let it go through. So I submitted a test app that was all HTML and JavaScript and what surprised me is it was accepted! (here is a deeplink if you don't believe me: http://social.zune.net/redirect?type=phoneApp&id=832ce0cd-788e-e011-986b-78e7d1fa76f8 )

So from here I decided to create a simple framework around this and post it on codeplex so others can build apps that are HTML/JavaScript based on this framework and have them deployed to the marketplace. To download the framework (dll) you can go to this link: http://htmlappwp7.codeplex.com/

Here is how to use it:

Using the HTML App Host Framework

the HTML App Host Framework current consist's of 3 critical parts. 1, the app host shell, 2, the html loader and 3 the task processor. For an HTML application developer you don't really need to worry about most of it but in the following context. To start you need to create an empty Silverlight application in visual studio and then reference the HTML App Host dll. Then you need to create a directory called HTML and add your HTML application to this. The HTML application can include html files, resources, images, css, script files etc and folder structure or whatever you need. On the downside you need to create a 'manifest.xml' file at the root of the html folder that maps all the files. This allows the HTMLAppHostFramework to consume your application and run it on the phone. Here is a typical manifest.xml file:


<?xml version="1.0" encoding="utf-8" ?>

<IsolatedStorageManifest>

<Files>

<File Name="index.html" />

<File Name="about.html" />

</Files>

<Directories>

<Directory Name="inc">

<Files>

<File Name="script1.js"/>

<File Name="script2.js"/>

</Files>

</Directory>

</Directories>

</IsolatedStorageManifest>


Basic a simple index of your html application. the trick here is that html assets can't be referenced directly from a xap to say a webbrowser control so the apphost used class called 'IsolatedStorageResourceHelper' to copy everything from the xap based on the manifest.xml file into isolated storage where it can be referenced and executed directly.

The next step is to edit your main page in your app to reference the AppHostShell and your html. The AppHostShell is used much like a webbrowser control but it extends the control to deal with the IsolatedStoargeResourceHelper' class and to expose Phone 7 API's to the script environment so that the script can call out to those API's through 'tasks' using the 'TaskProcessor' class. Also the AppHostShell exposes an event called 'ScriptNotify' so you can extend what is dealt with if there are special cases you want to handle in your own code.

After the HTML app is created, then added to the HTML directory AND you have finished the manifest.xml file, the next step is to add the namespace reference in the XAML of your start XAML page. I like to rename the default 'MainPage' to 'Shell.xaml' but if you do this you have to edit the master app manifest under properties to point at the new name or your app won't work. But you can leave it as 'MainPage'.

In any case, in this page the namespace reference should be in the rootnode and look something like this:

xmlns:HTMLAppHost="clr-namespace:HTMLApplicationHostFramework;assembly=HTMLApplicationHostFramework"

then you can add the control to the xaml surface generally you can just rip out everything in the page and replace even the root grid with this:

<Grid x:Name="LayoutRoot" Background="Transparent">

<HTMLAppHost:AppHostShell Source="/index.html" />

</Grid>

</phone:PhoneApplicationPage>


You'll note that now when you run the app your app on the phone will be entirely your app, well save the system tray and I like to turn that property off in the root node but you can do that in your javascript too using the task api that is created by the HTMLAppHost control.

If all of your app is HTML based you're done but if you need to call out to phone 7 api's from your javascript you can make calls like this:

window.external.notify("Email:pieseczek@hotmail.com:Email from JavaScriptFWP7");

Basically the syntax of the string is "[task name]:[param]*n" currently I've only added a few tasks like email but that I'll be adding much more in the coming weeks. Ping me if you use the framework for your app's, I'll give your app some social media love.

Tethering Windows Phone 7 - Hack

One of the features people frenquently complain about with phone 7 is the tethering or lack thereof support. But alas there are a number of hacks out there for doing it. If you have an LG phone you could try this (at your own discretion, you of course should not try it...):

http://www.gadgeteasy.com/how-to-utilize-usb-tethering-on-wp7-running-lg-phone/

if you have a Samsung phone try this:

http://www.wired.com/gadgetlab/2010/11/easy-hack-enables-usb-tethering-on-wp7-phones/

again, if you try this and something goes wrong, its your fault. Please don't try this at home...

'Extending' Your Phone 7...

So I can't condon hacking phone 7 outside of the context that MS has provided in any case... however it can be done easily enough.

I've found that it is straight forward enough to hack. One thing that has bothered me with the phone was the default accent colors on the phone are lame. for the most part I don't really like any of them. One way to fix it is this app you have to side load, called advanced config. Currently it only works for HTC but does let you test registry hacks on phone 7.

You can get the app (xap) from here http://www.touchxperience.com/

In this case there are a number of cool phone 7 hack apps. but for me having a nice steel gray just makes the phone more zen.

Again I'm not responsible for you mucking up your phone... don't do any of this...