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...

Simple Facebook Integration

So strickly speaking this isn't about Silverlight but it is cool and relates a bit to what I do when I blog or build sites that use Silverlight. Basically here is how to add a facebook 'like' feature to any site. The HTML looks like thus:

<iframe src="http://www.facebook.com/plugins/like.php?layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light&href=http://www.hackingsilverlight.net/" allowtransparency="true" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" frameborder="0" scrolling="no"
> </iframe>

when you run that html is should show up in your browser like this:

[ ]

So going back up to the html code above you'll note its all an iframe referencing the facebook 'like' php file via an http reference (url). when looking closely we can see that there are a number of query string parameters. for the most part the only one you need to edit is the last one which should be the url of the page in which you embed this html. and thats pretty much it. :)

Making the MS Adcontrol REALLY work on phone 7

So you want to use ad's in your windows phone 7 apps as a revenue stream and you followed the directions and it seems like it 'may' work but alas everyone that that has your app never see's an ad and come to think of it you haven't either save the test add...? Hmmm...

You went out to this site:

https://pubcenter.microsoft.com/Login

and created an 'ad unit' and gotten an application id for your app.

you then have downloaded the phone 7 ad SDK from this link

http://advertising.microsoft.com/mobile-apps

included and referenced the ad DLL and created the xaml that looks to the effect of :

(at the top of your xaml)
xmlns:advert="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"

(some where on the page)
<advert:AdControl x:Name="AdvertControl"
ApplicationId="[Guid here]" AdUnitId="[ad unit id here]"
AdModel="Contextual"
RotationEnabled="True" Width="480" Height="80"
Margin="0,-1,0,0" UseLayoutRounding="False" VerticalAlignment="Top" d:LayoutRounding="Auto"
d:LayoutOverrides="Height" >
</advert:AdControl>

you've compiled and uploaded and even went so far as to test your app using the test values they provide for the application id and ad unit id... your app is approved but your not getting any hits...

hmm... what you have over looked... oops they left out one tiny detail... at least in all the directions I have found... in your constructor or in our override onnavigateto try adding this little bit of C#...

AdControl.TestMode = false;

really? as much as it makes me tired all over... yes this is all the magic I needed todo...

Windows Phone 7 Socket Support...

or not...

if you have a dev account and or otherwise unlock your phone you can run unmanaged code... again Jeremiah does a wonderful hack with source using sockets on phone 7... don't worry this is another hack that won't get through the phone 7 market place vetting process but its fun to play with. check out Jeremiah's project here with source code:


http://groups.google.com/group/wpf-disciples/browse_thread/thread/e8f14483a41e6b0d

Native Code On Phone 7

So a friend of mine showed me this article and he tried it and it worked (http://www.futile.com/). In any case he tried it and it works but I'm pretty sure this won't get by the app store... :) In any case here is the article on how this guy got some native code going on phone 7:

Windows Phone 7 & “native” apps, the missing link!

LayoutTransform RenderTransform Size Resize Sizing Xaml Hack and black magic...

ok, so this is just really making me tired all over. about every size months or so I run into this problem but really after solving it I nicely forget until it hits me in the face again. So amoung the zillion projects I'm working on I volunteered to help on any projects that have something for me. Fabio and Curtis are working on this cool project I can't talk about as such but here is this layout thing that came up in working on this control that needed fixed.

The issue is basically this. You have a control that is a set size and it has some element that is or needs to be layed out outside that control box's size. since its a custom control and its top element is a grid any thing laying out can only be the width of the grid. Event when rendered outside the control box using a translate transform etc. the last time this issue came up I remember there was also a rotate transform taht took me probably a day to figure out what was even going on but between Fabio, Curtis and I there wasn't to much wasted cycles on it but after going back and forth I did a number of tests to just to see what actually worked.

keep in mind that the control is a set size and the root element is a grid.

That being the case, here are the methods I tried to get something larger then the control box size layed out outside the box.

method 1: putting element in popup (wpf only trick, well sort of, you can do something like this in sl but its an even more aweful hack) works but lots of control issues... with behavior not the least of which is the element might still be there if the view is switched... this is a bad plan...

method 2: just trying to use a translatetransform to put it outside the box... no soup for you as your element is croped to the size of the control box (root element grid)... another bad plan...

method 3: chuncking the element into parts and transform it all into place... this works but is a silly hack... due to how messy the xaml gets... to me this is really a bad plan too unless something else didn't work.

method 4: put the element into a canvas and then transform it out... really? this works... feels like a hack but the xaml is very clean... #tiredallover

method 5: use negative margins... this really is against my inner designer or rather the xaml mess I've seen it cause is mind numbing. But alas used spairing this this is a clean xaml solution. Just bad on principal because it leads to abstract layouts that are difficult to visually decompose and mape to the xaml.

method 6: use a layout transform and then a render transform to size it down to smaller then the control box and then the layout transform to get it back to size and outside the control box...
...

this works... I don't even wnat to know why... I actually do know but really this is just well it makes me cringe but the xaml is fairly clean but its totally a hack... don't do this just for sanities sack but really it works... f... here is an example:

<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2.88" ScaleY="2.88"/>
<TranslateTransform X="210"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.LayoutTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</Grid.LayoutTransform>

I went with the canvas trick as the xaml is the most clean.

HackingSilverlight Code Browser

So sometime ago I had been working on a sample browser for all the different samples I had used for hackingsilverlight and for blog posts. After awhile with all the jumping around between projects, and my failing memory I found I needed a quick easy way to remember all the code clips I used often. For me I needed something like a rola-deck for code so after taking my toys and leaving the sandbox as it were regarding the book HackingSilverlight between projects for the 5 minutes here or there I've been working on a tool that I'm using in place of the older sample browser. And so the HackingSilverlight Code Browser was born. Its still a work in progress and really its all about me and my workflow but on the off chance it might help some one here it is:

http://www.hackingsilverlight.net/HackingSilverlightCodeBrowser.html

of course if you go to just hackingsilveright.net there is a click here to install button that will install the oob version but from this link you can also just right click and select install. Remember this tool is not designed to teach anything or example things to anyone, its purpose is to quick recall code that I know how to use already and make it easier to remember. So remember this isn't silverlight 101 , its more like silverlight 400 :) In any case when you first load the app there is a number of key elements. First on the left is a tag cloud where the tags related to blocks of code that have been 'tagged'. in the center is everything matching the search result and then in the far right is the search box. there is no search button as it updates dynamically as you type. I did put a reset and help link below this but really just start typing.

in the bottom corner you'll notice a version number, a contributor link and a add to library link so if I run across a bit of code that I think is important I can send email to my self to remind me. Also back on the left at the top is a cover shot that links back to the site and if you are running an outdated version you will get a warning along the left side.

If you happen to select one of the results from the middle you get a code box viewer that does some simple formating of the code and lets you select the contents. also all the tags associated with that block are shown and they are clickable. Clicking tags will close the code viewer and do a search on that tag. There are two arrow buttons if you get board and want to scroll through blocks quickly plus there are the help and contributor dialogs.

The help dialog is much like this post just giving a basic discriptions of functionality and then the contributor dialog is is a list of everyone that has helped, inspired or contributed in some way.

And thats pretty much it. oh and one more thing. only constructive feedback is of any use or more importantly if you have cool snippets to add... please feel free to contact me about it. And the code base I'll use to replace the existing HSL codeplex project...

Launching a URL from an OOB Silverlight Application

So I'm working on this code browser mostly to help me with my fading memory. In the app I want to be able to launch a url. So I do my normal thing and put a line of code that looks like this:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(ThisURI), "_blank");

I was agast when I realized that this didn't work, for that matter it didn't even blow... grr... but with a bit of research I found that the hyper link button worked so a ended up making a little class like this:

public class MyHyperLink : HyperlinkButton
{
public MyHyperLink(string navigateUri)
{
base.NavigateUri = new Uri(navigateUri);
TargetName = "_blank";
base.OnClick();
}
}

even better the code to make this works looks like this:

MyHyperLink button = new MyHyperLink("some url here...");

Hacking Windows 7 Phone

So here is the Hack of the Week. For those who have had their heads in the closet and haven't heard Microsoft is coming out with this Windows Phone 7 - the mythical vapor ware for a number of years now has been made public. Like many Silverlight geeks especially we are estatic as this phone now public will run Silverlight as the primary way to develop applications for it. On the downside if you installed the developer kit, the VM for the phone lacks pretty much... um... everything... no sensors, (how can we do anything cool without sensors), no apps , not settings no nowthing except the Internet explorer and apps we write as long as they don't need sensor access. At least give us some proxies or fake data etc. But for now we are on our own.

Some people counldn't live with that and they hacked the vms. So one such example is Dan Ciprian from Italy and here is his two posts. I can attest to say that this seems to work as I have seen in live work, not that I my self would do such a thing and I can neither confirm nor deny that I did any such thing but Here are links to his posts on topic.

http://sviluppomobile.blogspot.com/2010/03/wmp7-emulator-unlock.html

http://sviluppomobile.blogspot.com/2010/03/wp7-emulator-unlocked-how-to.html

I was also aghast to see that one one greated a copy of the hacked VM and posted it here:

http://www.1800pocketpc.com/2010/03/20/how-to-unlock-the-windows-phone-7-emulator-download-the-unlocked-bin-file.html

which will get you a running version of the emulator unlocked in you follow these directions...

Me on Windows 7 Touch (and I mention Silverlight Hack)

At the MPV Summit 2010 I was asked to talk a little bit about Windows 7 touch and so I talk abit about this touch tag Kiosk technology and our experience at Wirestone working with Windows 7 Touch, WPF and Silverlight. Anyway its pretty cool:

http://www.vimeo.com/10357419

Dirty Dirty Silverlight Hack... - Silverlight 4 Hack: Use Native/Desktop CLR Without COM Registration

Here is a hack of the month. Jeremiah is probably my favoriate Silverlight Prodagy and he has done it again with this wonderful hack, 'Use Native/Desktop CLR Without COM Registration' I like the first line, "WARNING: Information and code here can easily be abused. Please do not use it as a crutch in application planning, but more for utter despair or experimentation. Thus I wrote this blog post from that perspective."

Certainly Jeremiah's code can be abused but what is really interesting to me is how this is one more way to push the limits of what Silverlight can do. 'Hacking' doesn't have to be evil but can be just that pushing the limits and making things better. With that commentary here is the first paragraph and sample code from his article and for the rest you will have to go read his post:

Silverlight 4 + OOB + Elevated Trust gives us the ability to use COM. That would be extremely useful (vs. really useful), except we cannot use just any COM class. It has to support IDispatch (COM automation). It also has to have a ProgID associated to it. That leaves you still with quite a few built-in COM objects to work with, as Justin document's quite well here. What about running our own native or .NET code? One would have to register a COM object first, which requires administrator rights. That’s no fun for an end user! Optimally, it would be nice to be able to add your desktop CLR objects as resources to your XAP, and from Silverlight code, be able to instantiate and use your Desktop .NET classes. This is a hack to do just that.

Huh? What does the hack do?
Let me explain it in code.

/* Create our Desktop .NET helper */
dynamic fullDotNetProxy = fullDotNetProxy = ComAutomationFactory.CreateObject("ClrProxy");

/* Have our .NET helper load up our .NET assembly we extracted from our SL app resources */
dynamic assembly = fullDotNetProxy.GetAssembly(m_assembliesPath + "\\Inject.Test.dll");

/* Get our .NET Type */
dynamic testClassType = fullDotNetProxy.GetDotNetType(assembly, " Inject.Test.TestClass");

/* Create an object instance of our .NET type */
m_testClass = fullDotNetProxy.CreateInstance(testClassType);

/* Run our RunMe method on our .NET object */
m_testClass.RunMe();


Read the rest at:

http://jmorrill.hjtcentral.com/Home/tabid/428/EntryId/442/Silverlight-4-Hack-Use-Native-Desktop-CLR-Without-COM-Registration.aspx

Programatically Setting Margin On Elements...

Foo.Margin = new Thickness(0, 50, 24, 6);

really thats it...

as defined by:

[Named UIElement].Margin = new Thickness( [double] , [double], [double], [double]);

or go the extra mile and use intellisense...

Hacking the Xap for Business Intelligence (BI)

I did a post a while ago on 'Hacking Xap' files primarily around dynamical loading resources. The past few months I have been playing with another even cooler way to 'hack' xap files. In this case its about business and taking a precompiled xap file and instrumenting that xap file without recompiling your application or any code changes to the application. This kind of detailed usage information can be extremely helpful in looking at how applications are used and help identify key areas to focus on. From a hack standpoint to take a precompiled xap and put 'code' into all the method calls dynamically is just cool. Granted that collected information just doesn't show up on your desktop, you have to build a web service to collect the data but just the fact that I can take a precompiled xap and get it wired up without any jumping around is just cool.

so lets get to the meat of my experience...

I meet with a guy at PDC09 at well PDC from Preemptive Solutions http://www.preemptive.com/ and he brought up a tool that they have that is part of their 'dotfuscator' product. Most .net developers have either heard of 'dotfuscator' or seen it since its part of visual studio. But part of their main 'dotfuscator' tool is around 'Business Intelligence' and a little known additional feature that in my mind should be the main focus is my main interest and the subject of this post. In any case I got excited about this xap hacking tool er 'Business Intelligence tool' and he got myself a license.

So I got my license and found that getting it working is/was very problematic, not only a license key but an activation key and a bi key etc. I had to get a hold of tech support basically twice with an ongoing thread with their tech support... to be honest I'm no longer a fan of DRM or any other security system that prevents apps from running when installed or secures files. I understand that this is needed to keep software from being pirated and intellectual property stolen but preemptive got way overly excited with their implementation.

Install experience and setup aside it all seems pretty straight forward. The hard part of using the software is building the wcf service and collecting the data. Once you get a service up and running though you basically just need to load your xap and pick where you want to collect data in your app and point it at the web service. The fact that you don't need to re-compile your xap is just awesome. And from a ux standpoint getting this data really gives you insight into your application that you just couldn't get without writing alot of code up front.

If BI around usage of your application is important to you in building better Silverlight apps then this tool is worth the hassle of getting it setup. As a Silverlight 'guy' I would list this as a critical tool in your tool Silverlight toolbox.

So to be fair to the company they provide an endpoint that users can use and I'm told there is a codeplex project for helping you build an in house solution and put the results on a sharepoint web part. My only issue with that is having another company have my usage data which or course would be crazy. Certainly I would not want anyone having my data as I have virtually no trust in other companies and their network security... but alas others might be ok with that. and using sharepoint... well just say no ;) Sharepoint provides a great solution if you don't want to customize it too much... :)

More On Pixel Shaders

So don't get to excited, I'm certainly not the apotheosis of man and pixelshaders like Walter (http://shazzam-tool.com/ ) but I do think they are really cool and along those lines I saw this great post off nokola this morning on 'Hue Shift in Pixel Shader 2.0' If your into pixel shaders this is a cool shader effict that as suggested in the title 'shifts the hue'. one of the reasons this post is cool is that it provides the shader source which makes worth while. :)


http://nokola.com/blog/post/2010/02/09/Someone-Said-it-Was-Impossible-Hue-Shift-in-Pixel-Shader-20-(Silverlight).aspx

Silverlight 4 - 3D (ish)

One of the great new features in Silverlight 3 was the ability todo psuedo 3d via what alot of us joke about as 2.5D. things like prespective transforms and the like.

One of my fellow MVP's Einar Ingebrigtsen got a bit zellous (must have been bored) and make this awesome tool kit for 3d (ish) in Silverlight 4. Granted its not native into the platform but honestly I'm not sure I want it built in. To much over head... But using a toolkit likeEinar's Balder really makes it reasonable.

Here is the Sample Browser:
http://www.ingebrigtsen.info/silverlight/Balder/20100208/TestPage.html

and the code here:
http://balder.codeplex.com
and
http://github.com/einari/Balder

from a ux standpoint I think the kind of visualization work for business is just awesome. Balder should be in everyones tool kit.

Asynchronous Image Loading in Silverlight

So one task that was bugging me today was doing image loading asynchronously so as to not drag the app down. Now there are some 'xaml' ways of doing this in wpf and supposedly in SL but alas I have not seem it work well. I'm working on a larger class that does this better but here is the basics of how I got it to work in C# code... to start with lets take a look at the following code:


WebClient client = new WebClient();
client.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

if (ImagePath.IndexOf("http") < 0)
{
string URL = System.Windows.Browser.HtmlPage.Document.DocumentUri.AbsoluteUri;
ImagePath = URL.Substring(0, URL.LastIndexOf('/')) + "/" + ImagePath;
}

client.OpenReadAsync(new Uri(ImagePath, UriKind.RelativeOrAbsolute), ImagePath);

this code lived in the constructor of the class I made. Basically its a user control that replaces the image tag so I can use it in Xaml or programatically etc. in this case I needed to use it programmatically to generate this image 'effect' that I was working on so I passed it into the constructor. the key to the code above is it creates a web client, then checks the url and finally calls the async method that loads the image.

the next bit of code is the event handler:

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
try
{
BitmapImage ImageToLoad = new BitmapImage();
ImageToLoad.SetSource(e.Result as Stream);
TargetImage.Source = ImageToLoad;
}
catch (Exception)
{ }
}

this code is simple enough. Basically the BitmapImage is created and we load the result as a stream into it and then use that to set the source on an image. At least for me this seemed to work well. I'll probably add a few other features namely some reference counting so when I load 1000 of these it doesn't try to grab them all at once...