If I had a penny for every time I heard someone from Microsoft say “I’m not a designer” when working with Blend then I’d be a rich man. Naturally, Microsoft does have some very fine designers but, unfortunately, it’s not me so I also end up having to say the dreaded “I am not a designer” phrase.

I say unfortunately as I’d quite like to have been a designer but it seemed that in my family 2/5 people got the artistic gene and the other 3 of us are best kept away from drawing materials

So, what to do?  I think it was rumoured to be Picasso who said that “Good artists borrow, great artists steal” and so in my case stealing is really the only option even though it still won’t make an artist out of me.

That’s where Blend’s “import” capability comes in handy. Today, I wanted to make a clock application in Silverlight.

Now, I can’t draw the face of a clock to save my life. However, it’s not important because other people on the internet can and they’ve already done it so I went to my favourite search engine and typed in;

“clock face psd”

and I found this page and I downloaded the PSD file. Then I made a new Silverlight project in Blend and imported the PSD file;

and I picked up the .PSD file from the file dialog and then got met with;

Now…I could use the Compatibility Image feature down at the bottom right of the screen and that would turn all the Photoshop layers into a single image and I’m then done.

However, when I’ve done this import I really want to be left with the clock hands as moveable objects that I can animate around the clock face in order to show the time So, I need to poke into the layers a little more.

I unchecked a bunch of bits that I didn’t want like the background and so on;

and then I’m happy to flattten quite a few of the layers so I de-selected those and ended up with 2 groups – one for the clock hands and the other for the face, background, dial etc which Blend had already decided to merge into one layer for me;

Blend does its import and I end up with;

So in this case I’ve ended up with 2 PNG files and 4 vector Paths inserted into a Canvas for me. To make life easy for myself I grouped this set into a ViewBox so that I can scale things up ( naturally, the PNGs won’t scale quite like the vectors here ).

taking it back to just having 1 clock-face, I got rid of one hand that I felt was one too many and changed the colour on the most likely candidate for a “seconds hand”;

and then named a few items in the objects tree;

then I took each hand and moved its center of rotation to the mid-point of the clock;

and tried to rotate the hands to all point at 12;

this causes Blend to put a RenderTransform onto each element ( a CompositeTransform ) and I chose to put the angles of those initial rotations into local resources just so I could quickly grab them from code;

this is just me attempting to be very “cheap and cheerful”.

At this point, all seemed good and I figured that I need a little code to make these hands appear in their correct positions and that was bashed together very quickly and with not much “finesse”;

using System;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Threading;

namespace SilverlightApplication11
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
			
			this.Loaded += (s,e) =>
			{
				DispatcherTimer timer = new DispatcherTimer();
				timer.Interval = new TimeSpan(0, 0, 0, 1);
				timer.Tick += (sender,args) =>
				{
          DateTime foo = DateTime.Now;

					OnTimeChanged(DateTime.Now.ToLocalTime());
				};
				timer.Start();
			};
		}	
		void OnTimeChanged(DateTime now)
		{
      double minuteHandAngle = (now.Minute / 60.0d) * 360.0d;

      ((CompositeTransform)this.MinuteHand.RenderTransform).Rotation =
        (double)this.Resources["initialMinuteHandAngle"] + minuteHandAngle;

      double secondHandAngle = (now.Second / 60.0d) * 360.0d;

      ((CompositeTransform)this.SecondHand.RenderTransform).Rotation =
        (double)this.Resources["initialSecondHandAngle"] + secondHandAngle;

      double hourHandAngle = ((now.Hour % 12.0d) / 12.0d) * 360.0d;

      ((CompositeTransform)this.HourHand.RenderTransform).Rotation =
        (double)this.Resources["initialHourHandAngle"] +
        hourHandAngle +
        (minuteHandAngle / 12.0d);
		}
	}
}

but, hopefully, it more or less does the right thing and the point of the post wasn’t really about code – it was about how I can import from PhotoShop/Illustrator and then make something that’s programmable pretty quickly.

And here’s the clock;

ticking away…