Wednesday, April 8, 2009

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