Kevin Williams .NET and Stuff : XAML, Silverlight

Silverlight - Simple Animation

Kevin — Sun, 23 Mar 2008 07:12:00 GMT

Seems I've fallen way behind on my Silverlight blogging as of late. A few weeks ago, I managed to get some simple animation working. So, I guess I should blog about it.

Animation is done by transforming your object. Each graphic element has a RenderTransform property to which you can assign a Transform object to modify your element in some way. The different types of Transform objects include RotateTransform, SkewTransform, ScaleTransform, and TranslateTransform. Let's look at an example.

<Ellipse MouseLeftButtonDown="EllipseClick" Height="50" Width="100" Canvas.Top="50" Canvas.Left="50" Fill="Black">
    <Ellipse.RenderTransform>
        <RotateTransform x:Name="EllipseXForm" Angle="90" />
    </Ellipse.RenderTransform>
</Ellipse>

This example is pretty boring - it just renders a 50 pixel high and 100 pixel wide ellipse, rotated 90 degrees (so that it instead appears 100 pixels high and 50 pixels wide). However, it illustrates the effect that a RotateTransform will have on an object. Also note that I have named the transform (the x:Name attribute). The purpose of that will soon become apparent.

Animations are defined within objects called Storyboards. Basically, a Storyboard defines a timeline of changes that should occur to properties of objects. For my example, I want to change the Angle property of the RotateTransform object over time (so that the Ellipse rotates slowly as we watch). Here is the Storyboard I have defined:

<Canvas.Resources>
    <Storyboard x:Name="EllipseStoryboard">
        <DoubleAnimation Storyboard.TargetName="EllipseXForm" Storyboard.TargetProperty="Angle" To="0" Duration="00:00:05" />
    </Storyboard>
</Canvas.Resources>

For this example, I have used a DoubleAnimation. This is because the property I want to change ("Angle") is of type double. There are many other animation objects available such as DecimalAnimation, Int32Animation, and ColorAnimation. The Storyboard.Targetname attribute tells the animation which object it is changing (here's where I use the name I gave my transform earlier) and Storyboard.TargetProperty indicates what property will be changed. The To attribute is the value the animation should end with and the Duration should be self-explanatory. Note again, I have named my Storyboard so that I can reference it later. Oh yeah, and the Storyboard is a resource, so it's defined inside the <Canvas.Resources /> element.

I'm going to need something to trigger the animation to begin. I've chosen to do it using a mouse click on the ellipse. So, I will need to add a MouseLeftButtonDown handler to the Ellipse. Now it looks like this:

<Ellipse MouseLeftButtonDown="EllipseClick" Height="50" Width="100" Canvas.Top="50" Canvas.Left="50" Fill="Black">...

And I need an EllipseClick() function defined in Javascript, so here's what I came up with:

<script type="text/javascript">
    function EllipseClick( sender, args )
    {
        sender.findName("EllipseStoryboard").Begin();
    }
</script>

I placed this directly in my .aspx file for this example. I don't think I've blogged about findName() before, but Silverlight elements define this method and it allows you to get a reference to any other Silverlight element by name. Here, I am using it to get the "EllipseStoryboard" Storyboard and executing it's Begin() method.

You can see this example in action at http://www.killeverything.com/zak/Silverlight1/EllipseRotate1.aspx

It's not quite what I wanted, though. The rotation is happening around the top left corner of the ellipse instead of the center. Luckily, this was easy to fix - the RotateTransform has CenterX and CenterY properties that allow you to define the point around which the object rotates. Knowing that the ellipse is 100 wide and 50 tall, this is what I changed the transform to look like:

<RotateTransform x:Name="EllipseXForm" Angle="90" CenterX="50" CenterY="25" />

You can see the finished example at http://www.killeverything.com/zak/Silverlight1/EllipseRotate2.aspx

I've also attached a ZIP with the files needed for these examples in case you want to play with them yourself.

Silverlight Day 2

Kevin — Sat, 23 Feb 2008 02:53:00 GMT

Today's goal is to display an image and react to a mouse click in some way. I actually started by reading the QuickStart that gets installed along with the Silverlight SDK. You can also find it at http://silverlight.net/quickstarts/silverlight10/default.aspx if you still don't have the SDK installed (and why don't you? Huh?)

It looks like all I need to display an image is an object set to fill with an ImageBrush. Something like this should work:

<Ellipse Height="100" Width="200" Canvas.Top="10" Canvas.Left="10">
    <Ellipse.Fill>
        <ImageBrush ImageSource="lolcat_quadcore.jpg" />
    </Ellipse.Fill>
</Ellipse>

Bingo, that did the trick. It looks like this:

Oh wait, I just found the Image object - no brush needed if you do it like this:

<Image Source="lolcat_quadcore.jpg" Canvas.Top="120" Canvas.Left="10" Height="100" />

Which looks like this:

Note that in the first case, the image was automatically stretched to fit the dimensions of the ellipse and in the second, I only specified a height - so the image was automatically scaled proportionally. Cool!

Now, processing mouse clicks. This appears to be amazingly easy as well. First, you need to declare the event handler in the XAML mark-up like this:

<Image Source="lolcat_quadcore.jpg" Canvas.Top="120" Canvas.Left="10" Height="100" MouseLeftButtonDown="ChangeLolcat" />

Then you just need a javascript function to handle the event - mine looks like this:

function ChangeLolcat( sender, args )
{
    if ( sender.Source == "lolcat_quadcore.jpg" )
        sender.Source = "lolcat_schroedinger.jpg";
    else
        sender.Source = "lolcat_quadcore.jpg";
}

In this case, because the MouseLeftButtonDown event is on the Image object, that's the object that gets passed in to the javascript function as "sender". I am simply changing the Source property from how it was defined in the XAML in response to the mouse click. And it works! (sorry I can't show you - I don't have a good place to host .NET code at the moment) I think I'm going to like working with Silverlight.

In case you want to download the code for this project and try it out yourself, I will ZIP it up and attach it to this blog post.

Silverlight Day 1

Kevin — Thu, 21 Feb 2008 01:16:00 GMT

So I finally set out to do something with Silverlight... I set a simple goal for myself tonight - I just wanted to see "Hello World". That should be easy, right?

First, I downloaded the Silverlight 1.0 SDK from http://www.microsoft.com/silverlight and installed it.

Second, I created a new web site in Visual Studio.

Third, I grabbed a copy of Silverlight.js and added it to the web site. For me, it was in C:\Program Files\Microsoft Silverlight 1.0 SDK\Tools\Silverlight.js.

I added a link to Silverlight.js in the HTML head of default.aspx. Like this:

<script type="text/javascript" src="Silverlight.js">
</script>

Next, I added a div in the HTML body of default.aspx and gave it an id. It doesn't need the runat=server attribute, just an id (it will only be reference from Javascript). Like this:

<div id="MySilverlightDiv">

</div>

Next, I created a XAML file. I know next to nothing about XAML yet, so I just used Google to "borrow" someone else's example code for now. My XAML file is called MySilverlight.xaml and looks like this:

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TextBlock FontSize="40" FontFamily="Arial" Canvas.Top="20" Canvas.Left="20">
        Hello World!
    </TextBlock>
</Canvas>

Last thing I did was add the javascript to my HTML file to actually create the Silverlight object in my div:

<script type="text/javascript">
    Silverlight.createObject(
        "MySilverlight.xaml", 
        document.getElementById( "MySilverlightDiv"),
        "MySilverlightControl",
        { width:'400',
          height:'200',
          inplaceInstallPrompt:false,
          background:'#DDDDDD',
          isWindowless:'false',
          framerate:'24',
          version:'1.0' },
        { onError:null,
          onLoad:null },
        null );
</script>

That's the filename of my XAML file, the Id of my div, a unique Id for the Silverlight control itself, and some various parameters for Silverlight that I do not yet fully understand.

That's it. I hit my web site with a browser and there was my awesome Hello World!

Hopefully tomorrow I will have time to research XAML some more and do something a bit more interesting with Silverlight. I hope to extend this simple starter project and continue writing about it here, so if you're interested - copy/paste the code above and come back tomorrow! :)