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

Image Animations Problems in Silverlight 3

I was working on a new version of hacking silverlight (the sight) at mix using Silverlight 3 and one of the things I wanted todo was have more of a cloud sort of display of hightlights as opposed to a billboard and do this fakem up 3d using Faisels ViewPanel3D he sent me. it was all great but when the images animated to their new positions it was not smooth and no matter what I did I couldn't seem to be them to animation smoothly.

I talked to a few designers about this and some one mentioned pixel slitting or something like that so I did a bit of research (IE. paid attention to all the items in intellisence for images) and found a nifty setting that fix's the problem.

so it turns out there is not really pixel split or whatever it is they were saying or maybe there is under the covers but for pref reason it is turned off. So the magic setting that puts it back is:

UseLayoutRounding="False"

which seems to turn this thing off so what I think happens normally is that Silverlight is moving the image to the next pixel as opposed to pixel splitting and that can make slow moving images look like they are jerking a bit. So the images then look like:

<Image x:Name="CloudImageElement" Cursor="Hand" Stretch="UniformToFill" Opacity=".8" UseLayoutRounding="False"
MouseEnter="CloudImageElement_MouseEnter"
MouseLeave="CloudImageElement_MouseLeave"
MouseLeftButtonDown="CloudImageElement_MouseLeftButtonDown"
MouseLeftButtonUp="CloudImageElement_MouseLeftButtonUp" >
<Image.Effect>
<DropShadowEffect ShadowDepth="5" Opacity=".7"/>
</Image.Effect>
</Image>

and this seemed to work great. :)

Dynamic Images in Silverlight

I'm working on a sample that auto generates or 'reconstitues' freeze dried images and I found these couple of cool blog posts related to the topic:

http://michaelsync.net/2008/06/29/silverlight-2-beta1-best-of-silverlightcream

and

http://blogs.msdn.com/jstegman/archive/2008/06/08/sample-updates-for-beta-2.aspx

and

http://blogs.msdn.com/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx