paulmignard

Ok, so this isn’t an outright rip on Silverlight – I did say this morning that it was something that I was going to invest some time and get more familiar with and…well…more on that later. This is a sample of my experience of playing with silverlight over the past couple of days. All I wanted to do was to create a circle, add it to the stage, and animate it. Let’s jump into some code.

First, a comparison. I’ve went ahead and opened Flex Builder, created a new actionscript project and created this really simple project – create a circle and animate it. The code looked like this:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;

	public class CircleTest extends Sprite
	{
		public function CircleTest()
		{
			var circle:Sprite = new Sprite();
			circle.graphics.lineStyle(1,0);
			circle.graphics.beginFill(0x1d5d8f,1);
			circle.graphics.drawCircle(0,0,100);

                        this.addChild(circle);
			circle.x = 100;
			circle.y = 100;

			circle.filters = [new DropShadowFilter(2,45,0,.5)]

			circle.addEventListener(Event.ENTER_FRAME,moveCircle);
		}

		private function moveCircle(event:Event):void
		{
			event.currentTarget.x += 1;
		}
	}
}

I will say, I’ve done this a thousand times so writing this code was almost muscle memory. It’s almost an unfair comparison but still…Anyway, nothing too crazy here. Create a Sprite, define the line style, determine the fill, draw the circle, add it to the stage, determine the circle location, add a drop shadow filter as part of an array to the filters property on the Sprite and then add an event listener for the ENTER_FRAME event which occurs 30 times a second. In that listener, I’ll move the circle 1 pixel to the right until the end of time or whenever that page is closed. Not much to it.

On to Silverlight. Now you might think I’d use XAML and while it’s a perfectly acceptable assumption I’m just not crazy about coding things like this in xml. I don’t do it with MXML either in case you were wondering. So for this example, it’s all in C#. On with the code:

So I start with this very nice partial class here:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Effects;
using System.Windows.Shapes;

namespace TestSilverlightApp
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

        }
    }
}

Alright, let’s create a circle of some sort:

Ellipse circle = new Ellipse();
circle.Width = 100;
circle.Height = 100;

Great, now here is where things start getting a little…wordy.

SolidColorBrush stroke = new SolidColorBrush(Colors.Black);
stroke.Opacity = 100.0;
circle.Stroke = stroke;

Here I’m creating a new object to set the stroke on my circle. Not too bad, I can see where the SolidColorBrush actually has a ton of paramaters that you can set to really customize it so that’s nice. I probably don’t need to set the opacity but I do anyway. Let’s set the fill for the circle now:

byte r = System.Convert.ToByte("1d", 16);
byte g = System.Convert.ToByte("5d", 16);
byte b = System.Convert.ToByte("8f", 16);
Color s = Color.FromArgb(100, r, g, b);

SolidColorBrush fill = new SolidColorBrush(s);
fill.Opacity = 100.0;
circle.Fill = fill;

Now, to set the color on the fill you can use solid colors like Color.Blue or Color.Red but it only takes about 15 seconds with a designer before you realize that they will never ever ever use either 0x0000ff or 0xff0000 for anything ever for any reason ever. So we need to use a uint and you can see that requires some more code. Still not too bad, I can abstract some of that pain away into some function somewhere but on its face it seems to be a lot of code to set a particular color.

circle.Effect = new DropShadowEffect();
LayoutRoot.Children.Add(circle);

circle.SetValue(Canvas.LeftProperty, (double)100);
circle.SetValue(Canvas.TopProperty, (double)100);

Alright, from here we set a DropShadow on our circle, add it to the stage and….place it? Wait, what’s going on here? I honestly searched for X. I was like “Hmmmm, where did they put x?” but what I should have been looking for was Canvas.LeftProperty. Hmmm, I can understand why it would like that, I’m just not sure if I like it? It’s certainly more elegant that x but x = y is a lot easier to write and comprehend than SetValue(Canvas.LeftProperty,(double)y). Anyway, in case it’s not clear, I set the circle 100 pixels from the left and the top of the window.

Now, I’m just going to put the code to animate this circle and I’m not going to walk you through it. Just look at it and we’ll regroup on the other side:

Duration duration = new Duration(TimeSpan.FromSeconds((double)6));
DoubleAnimation animation = new DoubleAnimation();
animation.From = 100;
animation.To = 600;
animation.Duration = duration;

Storyboard storyboard = new Storyboard();
storyboard.Duration = duration;
storyboard.Children.Add(animation);

Storyboard.SetTarget(animation, circle);
Storyboard.SetTargetProperty(animation,new PropertyPath("(Canvas.Left)"));
storyboard.Begin();

I’m not exactly sure of what all is going on here – what I do know is that it’s take my circle, moving it from 100 pixels from the left to 600 pixels from the left over the course of 6 seconds. It works, but great day, that is a lot of code. 3 different objects need to be instantiated so that I can move a circle. Granted, there is a plus here – there’s not the ever present and always ticking timeline like you find in Flash. I do like that you create your animation for a specific point and time and when you don’t need it anymore, you throw it away. That pretty cool. But what make me nervous is that if this is the most simple of things that you can do in Silverlight, what does it look like when you try to accomplish something more complicated? I can see how you’d be able to start stringing things together to make a predetermined animation but how do you implement physics or changing directions based on a changing variable in the browser (like a mouse?) Here is the complete Silverlight class:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Effects;
using System.Windows.Shapes;

namespace TestSilverlightApp
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            Ellipse circle = new Ellipse();
            circle.Width = 100;
            circle.Height = 100;

            SolidColorBrush stroke = new SolidColorBrush(Colors.Black);
            stroke.Opacity = 100.0;
            circle.Stroke = stroke;

            byte r = System.Convert.ToByte("1d", 16);
            byte g = System.Convert.ToByte("5d", 16);
            byte b = System.Convert.ToByte("8f", 16);
            Color s = Color.FromArgb(100, r, g, b);

            SolidColorBrush fill = new SolidColorBrush(s);
            fill.Opacity = 100.0;
            circle.Fill = fill;

            circle.Effect = new DropShadowEffect();

            LayoutRoot.Children.Add(circle);

            circle.SetValue(Canvas.LeftProperty, (double)100);
            circle.SetValue(Canvas.TopProperty, (double)100);

            Duration duration = new Duration(TimeSpan.FromSeconds((double)6));
            DoubleAnimation animation = new DoubleAnimation();
            animation.From = 100;
            animation.To = 600;
            animation.Duration = duration;

            Storyboard storyboard = new Storyboard();
            storyboard.Duration = duration;
            storyboard.Children.Add(animation);

            Storyboard.SetTarget(animation, circle);
            Storyboard.SetTargetProperty(animation,new PropertyPath("(Canvas.Left)"));
            storyboard.Begin();

        }
    }
}

So, wow. This makes me think of the designer exodus from Flash when they switched from AS2 to AS3. Teaching a designer how to add an event listener is really kinda hard because animation used to be fairly easy. I certainly could not teach them this. Sure, you can create this stuff in XAML and configure all of your animations but even that seems like you’d end up with this really difficult pointy and stabby xml file, one which a developer would have to rewrite in C#. I’m probably making too much out of it but as I was going through this exercise and having waves of doubt as to my proficiency as a developer I came across a sobering revelation:

I’m not having fun.

For me, the end result to gauge my satisfaction by shows up in the browser, not in the code. I certainly felt awesome being able to wield this powerful language with this awesome set of tools but after messing around with this for what seems like way too long, I was getting bored…I was doing work. Is it fair to stop playing with Silverlight based off of one example? Well…yeah. Learning a new language should be somewhat invigorating, like getting a new axe and finding trees to cut down. I’m just trying to get through the examples here, getting bored and frustrated and not being too excited about the payoff. I’m not going to end with some proclamation of one tech over the other, but I will say, I’m totally impressed with Silverlight and the tools to create Silverlight content are top notch – but it’s not a lot of fun to play with. I may do some more with it but I’m going to go play with something else for a while.