silverlight experiment: fading

I recently posted something about my attempts to fade an object in Microsoft Silverlight. I have succeeded, sort of. It's not quite complete yet because i have the storyboard names hard coded. Ideally, these would be unique each time, so that they don't conflict. That will have to wait for the next post though.


FYI, don't rollover/rolloff too quickly or you will receive an error and have to reload the page =(. This is one of the problems with hard coding the Storyboard name.

The xaml

<<>Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="#FF949494"
x:Name="Page" Loaded="onLoaded"
<>>
<<>Rectangle
Width="56"
Height="49"
Stroke="#FF9B9B9B"
Canvas.Left="71"
Canvas.Top="82"
x:Name="YellowSquare"
Cursor="Hand"
MouseLeave="fadeMeIn"
MouseEnter="fadeMeOut"
Fill="#FFE0D709"
StrokeThickness="6"/<>>

<<>/Canvas<>>
<<>/pre<>>


The Javascript
function onLoaded(s)
{
root=s.findName("Page");
plugin = s.getHost();
}
function fadeMeOut(sender, mouseEventArgs)
{
var sName = "fader4";
var sTo = "0.3";
var sFrom = "1.0";
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);

fader.begin();
}
function fadeMeIn(sender, mouseEventArgs)
{
var storBor = sender.findName("fader4");
storBor.pause();

var sName = "fader3";
var sTo = 1;
var sFrom = sender.opacity;
var sTarget = sender.Name;
var fader = makeStoryBoard(sName, sFrom, sTo, sTarget);

removeStoryBoard(storBor)
fader.begin();
fader.AddEventListener("Completed", "removeStoryBoard")
}

function removeStoryBoard(targetBoard)
{
root.Resources.remove(targetBoard);
}

function makeStoryBoard(sName, sFrom, sTo, sTarget)
{
var xamlFragment = '<>storyboard x="http://schemas.microsoft.com/winfx/2006/xaml" name="'+sName+'"<>' +
'<>doubleanimation targetname="'+sTarget+'" targetproperty="(Opacity)" from="'+sFrom+'" to="'+sTo+'" duration="0:00:00.3" autoreverse="False"<>' +
'<>/doubleanimation<>';

var myStoryBoard = plugin.content.createFromXaml(xamlFragment);
 root.Resources.Add(myStoryBoard);

return myStoryBoard;
}