Saturday, December 22, 2007

Quick and Dirty JSON

So you want to write a JSON service for your Silverlight application? Basically this entire thing is a giant hack. first JSON is just the string syntax for JavaScript so it is not like a real protocol of course I get a bit of heart burn calling 'SOAP' a real protocol but really a JavaScript array defintion being a 'protocol' you must admit is a bit of a stretch but ok I can go with it.
Anyway so quick a dirty in your 'Silverlight' web site project in visual studio you can create a JSON service out of any ASPX page. First 'create' your ASPX page. then remove everything so it looks like this:

< % @ Page Language="C#" AutoEventWireup="true" CodeFile="JSON.aspx.cs" Inherits="JSON" % >
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSON.aspx.cs" Inherits="JSON" %>

note that 'JSON' is just what I happened to call this page.
so then just right click on the page and click view code. You'll see that you have basically one method 'Page_Load'. here basically we just need to write out whatever it is we need in the form of a javascript array. So for example here is a very simple one:

StringBuilder JSON = new StringBuilder();

string ItemDelimter = string.Empty;

JSON.Append(ItemDelimter + "\"1\" : \"john doe\" ");

ItemDelimter = " , ";

JSON.Append(ItemDelimter + "\"2\" : \"jill doe\" ");

JSON.Append(ItemDelimter + "\"3\" : \"jane doe\" ");

JSON.Append(ItemDelimter + "\"4\" : \"jared doe\" ");

JSON.Append(ItemDelimter + "\"5\" : \"jeff doe\" ");

Response.Write("[ { " + JSON.ToString() + " } ] ");


Note that you'll need to add System.Text for the above code but you can basically generate the out put anyway you want and accept input parameters as query string values.

Full Length Movie Vie Silverlight

I'm ashamed to admit that I contributed in any way to this project... mind you I liked the Movielink team but the content is really really offesive in my opinion but the fact is that this is the first full length feature streamed via Silverlight to the masses. The player itself is straight forward and we un covered a few issues on the mac apprently in the underlying media stack in Silverlight but none the less a bug where about half way through the movie the sounds slowly gets upto a second off from the video... otherwise it works great :) if you must, you can check it out at:

Friday, December 14, 2007

Testing for version of Silverlight

I was asked recently to about testing the version of silverlight on a project that only would support Silverlight 1.0. silverlight actually supports a method for doing just that and the complete documentation is online. That being the case however here is how todo it:

if( Silverlight.isInstalled("1.1") )
// do something.
// or not

or you could pass in '1.0' and the method returns true or false. Personally if this is an issue and you really need todo something other then run the silverlight install badge I would drop this into the initialization function your using.

Monday, December 10, 2007

BufferingTime Breaks Blend...

Ok, So Silverlight 1.0 is supposed to be out in the wild now and Expression Blend is like the coolest tool available for working with Silverlight Xaml especially if your a designer it gives you WYSIWYG and code. But alas having all of Silverlight actually not break Blend appears to be a bit unreasonable of an expectation still... not that I'm whinning but it seems that on a media element if you try to set the 'BufferingTime' property Blend will puke. According to the documentation this is defaulted to 5 seconds and the Silverlight Teams says that Silverlight try's to make an intelligent decision about this but if you actually try to tweak it your self as per the documentation it doesn't seem to do anything and blend blows up...

Wednesday, December 5, 2007

Silverlight Performance Testing

So it seems that alot of shops I run into as of late seem not to have done stress testing before... I know that this can't be the case normally but just in case I thought I would post something about pref testing silverlight.

With regard to Silverlight we need to break out pref into two areas. The abiltiy of the hosting infrastructure to server up component parts and do server side processing and then the how well the 'clientside' Silverlight application performs locally on any given client and browser combination. In most cases there would never ever be more then one instance of the application running side by side on any given client.

To do stress testing you can download something free like the MS Stress tool and record some nice test scripts and have a go at your server. Basically your hitting the box, filling informs and or clicking on links and the like and the tool uses that to simulate what your are doing but much faster to the point of failure on the server.

You can download the MS Stress Tool at:

but there are a number of other tools such as :

that basically do the same thing.

Anyway when it comes to testing the client it is a matter of having a Mac and PC and all the browsers installed and then opening it up and testing everything. If the silverlight application is following the best practices such as those listed in the last post then it should be good and you can track down anything else on individual testing.

With that you should be armed to start doing some Silverlight perf testing.

Monday, December 3, 2007

Silverlight Best Practices

So in a web application from time immemorial the bottle necks have been the database access and the ability of the servers to server up whatever it is that is supposed to be servered. Granted there are things todo or not todo in Silverlight that affect usability and clientside perf but really its all about the server. For the most part the biggest 'gotcha' is usually making sure you are supporting the Xaml mime type and having reasonable archicture to support the expected load. All that aside there are some things you should avoid.

A-sync calls via Ajax or whatever are your friend. Why hold up the users experience to log something if you can just fire and forget. This will provide smoother and a more seamless experience for the user.

Use some reasonable coding conventions. It is more important to be consistent then wither or not to use Hungarian notation. Personally I like my script to look pretty much like my C# .NET code. That and considering main customer demographic of the clients of the company I work for... I'm feel safer using some nice stricked super OCD coding standard.

To keep the browser experience as uniform as possible among browsers it is a good idea to not todo things with the HTML DOM if possible and push things like timers etc into Silverlight.

In Xaml... don't stretch paths and videos. especially videos.

User techniques that simplify your code for example using a trinary operator.

In JavaScript use the prototype object declaration instead of writting a specific class. Object declared like this will be only maintain one reference in the global look up for the script engine nomatter how many instances are created. This way everyone is pointed at one base class instead of complete instances of every class N times.

If you drag and droping set none targets to IsHitTestable=false

dont dynamically add a bunch of stuff to the visual tree and leave it there if you not using it.

don't use windowless mode if you don't have to and if you do turn it off when not needed.

Thursday, November 29, 2007

Silverlight 1.1 is dead...

So just this morning Scott G. released that Silverlight 1.1 is now 2.0 and we will get a go live license in Q1 08. All the new controls we have been waiting for it looks like will be in that build. I would guess we will get around Mix...

Tuesday, November 27, 2007

Silverlight Preloader animation is the answer

I got this email today:

In our project we call a function which retrieves a data from a webservice.
This function takes some time 1-3 seconds.
This we do in the end of the OnLoad event.
This causes the application not to appear immediately and is not drawn until the retrieve function is finished.
How can we let the application finish rendering and then invoke the retrieve function?
Then we could put up a message to ask the user to wait while loading.
Is there any onRendered event in Silverlight?
Or could be put a custom event back to the event queue some how, then we could emit an event which calls the retrieve function after the rendering is finished?
Best regards,

In most complicated Silverlight applications I generally have a preloader animation. So when the silverlight application first loads it shows some little animation that runs on the canvas loaded event until some other method is called that stops the animation and fades in the UI etc.

Using the downloader object this is pretty straight forward as you can add a delegate to the downloader object and then the delegate gets called when the download is complete and it can do something to get the application running. a simple example is:

var downloader = this.control.createObject("downloader");
downloader.addEventListener("completed", Silverlight.createDelegate(this, this.MediaClipDownloadCompleted));"GET", "control/MediaClip.xaml");

in this case the downloader is pulling some xaml but really it could be anything. when complete the method 'MediaClipDownloadCompleted that in this case looks like this:

MediaClipDownloadCompleted: function(sender, eventArgs)


var xamlItem = sender.getResponseText("");

MediaClipClass = new MediaClipBaseClass( xamlItem );

MediaClipClass.LoadTarget( this.control.content, this.root.findName("MediaTarget"), 50, 100, "test/sample.wmv", "test/thumb.png" );


anyway working with the HTTPRequestObject is similar. take this code for example:"GET", this.url, true); this.HTTPRequestObject.onreadystatechange = this.XMLObjCallback; this.HTTPRequestObject.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); this.HTTPRequestObject.send(null);

basically we set the 'onreadystatechange' to our delegate that deals with things when the request is returned. In this case the method looks like this:

XMLObjCallback: function( )
{ // Check for the completed status
if (_XMLRef.HTTPRequestObject.readyState == 4)
{ // Check for successful server response
if (_XMLRef.HTTPRequestObject.status == 200)
if( _XMLRef.XML == "" )
_XMLRef.XML = _XMLRef.HTTPRequestObject.responseText;
if (!window.ActiveXObject)
var parser = new DOMParser();
_XMLRef.XmlDocument = parser.parseFromString(_XMLRef.XML,"text/xml");
else //is i.e
_XMLRef.XmlDocument = new ActiveXObject("Microsoft.XMLDOM");
_XMLRef.XmlDocument.async = "false";
{ // HTTP error
alert('Error: ' + _XMLRef.HTTPRequestObject.status);

its a bit complicated but basically when the code returns it does its thing. For more information on XML see these previous posts:

and this code sample

also look at some of the bits in 1.1 and hopefully the new 1.1 drop that comes soon will have some more goodness for us.

Friday, November 23, 2007

Silverlight Sidebar Gadgets in 64bit Vista

As a matter of 'fact' Silverlight doesn't run in a 64bit IE browser... ok fine but if your running 64bit Vista you probably won’t see this as an issue as the default is the 32bit version that runs fine. And I'm sure at some point Silverlight will work in 64bit version of Vista. But the side bar gadget framework is in fact paired with the OS type so on a 64bit version of Vista... no Silverlight for you.

Ok so I'm not really that patient with waiting for the new wiz bang 2.0 version of silverlight that is 64bit so I have this little hack... installer that will correct the problem and allow 'Silverlight' to run in the side bar of a 64bit version of Vista.

If you are not running a 64bit version of Vista then this email is not important. No need to read farther.

So I started to go down the road of mucking up my regestry to do this but that proved to time consuming so I have built this simple code base (and silverlight gadget) so I can get my silverlight gadgets to run in my sidebar on my 64bit version of vista.

and gadget:

So basically there are two binaries. One will search the running processes and kill the sidebar process and then spins up the 32bit version. The next basically installs the other and sets it up to run each time a user logs in so they get the 32bit version of the side bar that actually supports Silverlight.

Friday, November 16, 2007

64Bit? No Silverlight For You

Not sure what is up with this but... If your using the 64bit version of IE even if you install Silverlight... The control will not instatiate. The Silverlight library specifically disabled htis but I hacked it so that it would try and the object is entirely not avaible in the 64bit version. That wouldn't bother me so much but the Vista Side bar is only 64bit if you are running a 64bit OS so you basically are screwed if you want to build a silverlight gadget that runs on a 64bit version of Vista... No Silverlight for you. To add insult to injury Silverlight works fine in the 32bit version of IE on a 64bit box... But for me that means no Silverlight Gadgets on my 64bit box.

ET Emmy Sight On MS Silverlight site

Check out this site I helped o that is on the Microsoft Silverlight site:

or just do directly to the Silverlight app at:

Tuesday, November 13, 2007

Hiding Clientside Source...

One of the problems with 'Silverlight 1.0' is that you can't hide your JavaScript source... One trick you can do is to user the Silverlight downloader to 'download' source when it returns you can pull the text and eval it like you would a 'JSON' array. This way class, controls or other scripted objects can be abstracted from the source and further the HTML will also be cleaner and no one will be able to see the your source without alot more jumping around.

So the code 'might' look like this:

Site.Scene.prototype =
handleLoad: function(control, userContext, rootElement)
this.control = control;
this.root = control.content.root;


downloadControlsXaml: function()
var downloader = this.control.createObject("downloader");
downloader.addEventListener("completed", Silverlight.createDelegate(this, this.JScriptObjDownloadCompleted));"GET", "control/object.js");

JScriptObjDownloadCompleted: function(sender, eventArgs)
var xamlItem = sender.getResponseText("");

this.Object = eval( xamlItem );
// some more code...


I'm not saying you should do this... just that it can be done.

Friday, November 9, 2007

Silverlight Lessons Learned

Designers at least in my world are all about design, sexy, hot UI. The Developer is all about making it real and functional (mostly ugly too). Together Designer and Developers when they work together create not just the dream of vapor ware but something hot and sexy, pleasant to the eyes and smooth to the touch, soft and that is easy to work with. That’s the kind of next generation User Experience we want to build into our web applications. In the WPF world this is a much farther along than the typical web application could dream of. With WPF in Vista and on Microsoft’s new Surface computing it’s like something out of a sci-fi movie. Using Silverlight we can bring a little bit of that to the web.

I talked about in the past how Silverlight really shines in the
ability for designers and developers to come together. Part of the basis of this is for developers to know Xaml enough to work with the bits coming from the designers. For the developer that is used to just looking at code all day this is a bit of a jump but the average ASP.NET web developer might be a bit more comfortable. Like ASP.NET you have a file with your look and feel (Xaml) and a code behind (cs or js file) and like ASP.NET the look and feel ‘file’ is a bunch of tags for the most part.

So getting back to our use case we had a bunch of guys working on different bits mostly new to Silverlight. There were a few guys that really already knew their stuff and built out the underlying structure of the site. It ended up being thousands of lines of Xaml and code but the story here was the fact that they had to bind it together. Being able to look at Xaml code even if you not a designers and understand what is happening is critical to being able to wire things up so that something actually happens. But on the designer side… please, please give objects reasonable names. When your Xaml is 1000 lines long and there are no names or worse, all the names are like x1 x2 etc. it makes it harder to wire things up.

Out of our little death march to get our site done there was one incident where poor communication between designers and developers really broken down and we spun hours clean up. Basically a developer, that thought he was all that, created a class or object that was probably a bit over complicated and it didn’t follow the structure that others were using. A dev in question checked in the class into source control and went home for the night. A designer tried to use it and in his frustration couldn’t figure out how it worked and after hours of rework completely reworked it and then found out with the help of others that it wasn’t the problem with the code but something else. The next morning this almost broke out into a fight…

Lessons learned, don’t through complex code over the fence for designers to have to wire up, it’s not their job for starters but generally we can’t leave each other high and dry. (In comes the integrator role) Communication is critical and being consistent even if it is not the best way to-do things is more important than this way or that way.

Oh we also learned that margaritas at 3 am do not improve productivity… amazingly enough this is true of designers and developers.

Thursday, November 8, 2007

VS TFS Hack...

Here is a little hack for Visual Studio that is useful if you are using Team Foundation Server (TFS) and Visual Studio 8 and dont' want VS to auto connect...

I got this from another friend (WPF guy) Karim H.

"Below is a registry setting which will prevent VS from attempting to automatically connect to TFS on launch. Instead you will need to hit the refresh button in Source Control Explorer, or open a solution with bindings to TFS."


Silverlight Firestarter

Come up to Microsoft and check out this free conference they are putting on. I'll be there. You be there too :)

November 29, 2007
Microsoft Redmond Campus
1 Microsoft Way
Redmond, WA
Building 33, Kodiak Room
** Please have a photo ID with you to register onsite and park

Check-in: 8:00 am
Event: 8:30 am – 5:00 pm


or by calling 1-877-673-8368 and referencing Event ID 1032359153

I found this off of Brad Adams blog.

Wednesday, November 7, 2007

Silverlight Carousel Control

Here is a really cool Carousel control that Sajiv Thomas from Identitymine did. Alas it is only Silverlight 1.0 but still it is very very cool. Granted I work there but the guys really do cool stuff. Sajiv did this one just for fun :) He also has the source available at:

and a sample it is running at:

Friday, November 2, 2007

Quick Silverlight Hyper Links

this for the most part I don't do silverlight such that I need a lot of links so this never occured to me before but here is a nifty little trick I thought...

So say I put an image tag in my xaml that I want to link to something. I can put the url in the 'tag' property and then ad a mouseleftbuttondown to this little function:

function LaunchItem( sender, args )
{, '_blank');

and your good.

So the xaml ends up looking like this:

<img height="30" src="" name="RSS" opacity=".4" source="img/rss.png" left="110" top="40" cursor="Hand" zindex="1" mouseleftbuttondown="LaunchItem" tag="" //&rt;

If you want some cool animation or roll over then you have to add that your self.

Monday, October 29, 2007


so for starters I don't consider my self a 'hacker' in the common sence of the term. I certainly don't go 'hacking' other people's computers. When I say 'Hacking' Silverlight, I don't approve of anything that is not strictly moral or ethical


what I do mean,

more or less,
when working with big silverlight projects,
that at times,

it fills like 'hacking' some of the things we have todo to get things working.

So I don't mean to sanction anything illicite. and 'HackingSilverlight' just sounds cool.

I have this sample on my blog about wiring Silverlight into the browser history. This is an old flash trick and it works pretty good. But from my perspective as a dicplined programmer it is totally a hack. Not that it should not be done or anything its just as a professional we try so hard to do things the right way or the fastest way in the best way possible and are so proud of our cool algorythm or application and take pride in the attention to detail that we tend to be abit agast at solutions like this.

so thats why I say 'HackingSilverlight'.

JavaScript type casting

here is one... So I'm doing some silverlight and I try to add two 'numbers' right. Javascript is supposed to be not strongly typed language but there are cases where you need to type caste... which normally only shows up in real languages or um strongly typed langauges like say C#. In JavaScript 'type casting' is a bit mucked up but basically there are two types you can try to force things to 'string' or 'number'. The code looks something like this:

var SomeValue = "100";
var SomeNumber = 3;

// alert 1: "1003"
alert( SomeValue + SomeNumber);

// alert 2: "103"
alert( Number(SomeValue) + SomeNumber);

So this is where we can get a way with telling people 1 * 1 may not always equal 2... in this sample the first alert is going to make everything a string where as in the next one we cast the questionable value to a Number and now the math works right...

hmmm... whats the point of a varient if it can't figure out its a number.

Anyway so there is type casting in JavaScript

Friday, October 26, 2007

Silverlight Key Events In full screen mode...

Jared my friend is building this video player in silverlight. Nothing new about that :) but I showed me its full screen mode and how he used the key up event from the esc to fix up his UI as he couldn't capture key events from silverlight from full screen mode... cool little hack persay. another way around that is to capture events off the document object and or if you can use the on full screen change event.

Embedding Popfly Silverlight Mashups in Community Server

Simons article on embeding Popfly silverlight in community server pretty much sums it up. Basically you have to enable iframes.

Creating a 'Path' Object in Silverlight

What is a ‘path’? A Xaml tag or object that defines a complex shape or polygon of some kind via a connected line which may make be an actual polygon and or consist of points, lines and arch’s. Everything from character to slices of a pie chart can be built using ‘paths’. Typically the ‘path’ is defined by its data property so typically a path is going to be something like this:

<Path Name=”MyPath” Stroke=”…” Fill=”…” Data=”…” …/>

At the very least, you may also use Canvas.Left and Canvas.Top or just place it in a canvas etc as well. A designer normally would be abstracted from actually building a path by hand but in cases such as building a pie chart one might want to write code to dynamically build slices of the pie chart programmatically and so therefore would want to know the syntax of the ‘data’ property on a path so they could compute it in their code.

How do I define a Path myself? To start with you must define a start point which is designated by ‘m’ (not case sensitive) and a point such as ‘M 10, 10’. You also need to define an end point which could be the same point so something like ‘L 10, 10’. So lets check out the types of things I can pass in.

If our start point is say ‘M 10, 10’ and we want to draw a horizontal line we can then do use the horizontal line command like this: ‘H x’ which might look like this then: ‘M 10, 10 H 150’. Next we can draw a line down using the vertical line command like this: ‘M 10, 10 H 150 V 150’ and if you use the L point from earlier we get a horizontal line and then a vertical line and a line from that point back to where we started which creates a triangle. (see the Path Sample Part 1).

So to get creative we can then use the Cubic Bezier Curve Command designated by ‘C’ so from the end point of our vertical line command we can then draw a Curve using 2 control points like this: ‘C 100, 100 200, 200 50, 50’. This shape would then give us this funky triangle shape with a weird ‘foot’ at the bottom.

We can also use the Quadratic Bezier Curve Command which would be ‘Q point1 end point’ where point 1 is our control point we could use the ‘Smooth Cubic Bezier Curve Command that is ‘S point1 end point where point1 is the control point for a regular curve or use ‘T’ to make the curve quadratic.

My favorite command is the Elliptical Arc Command which can be used to create a slice curve such as the curve of a pie slice. The syntax is ‘A size rotationAngle isLargeArcAngle sweepDirectionFlag endpoint’. These are the following:

· Size: this is the radius of the arch in pixels

· Rotation Angle: is the angle of rotation of the curve in degrees

· ‘Is Large Arc Angle’: is a flag that sets the render of the arch to be 180 degrees or greater if set to 1 where the default is 0

· ‘Sweep Direction Flag’: is a flag determining if the arc is to be drawn from a positive angle or not from the point if set to 1 but default is 0

· ‘End Point’ is just that the X,Y end point of our Arc

So if we use an arc definition like this: A 50, 50 200 1 0 100, 100 added to our sample (see Path Sample 3) we get a crazy but cool shape. That you really have to see to understand… note how the fill is applied effectively making 2 ‘shapes’. The entire definition would look like this:

<Path Name="PathElement" Data="M 10, 10 H 150 V 150

C 155,155 160,160 140,165

A 50, 50 200 1 0 100,100

L 10, 10"

Stroke="#3c5f0c" StrokeThickness="3"



Check out the SDK for more detailed on Path definition syntax or paths in general.

Silverlight 1.0, JSON and (gasp) PHP

So we are doing this really cool Silverlight app that I'll blog lots about when it goes live but one particular thing that is cool is our use of JSON. One one isues was that we are hosting this on a non microsoft approved web server... gasp (I know, those of you that know me will be in shock, but really when it comes to down to it I follow the money :) In any case so Mark writes this PHP service that takes some xml feed and transforms it to XAML but we also need some meta data so that when added to the application we can dynamically bind our silverlight 1.0 controls to the elements. Mark decided to try added a text area that would not be visible and put the JSON meta data there and poof, one little eval and we have our meta data and our transformed XAML... a little XSLT on the server in PHP and the source XML feed works way cooler then having todo in all clientside in silverlight...

JavaScript Class Structures

So 8 years ago or so I worked for this company and was hired to fix and admin tool they wrote in JavaScript... The system had 10's of thousands of lines and loaded as an HTA and looked and feeled like a win 32 app. This was cool but everything they used visual studio to debug everything feel to pieces. I spent a long time looking over the code and what bothered me was how they laid out classes. They would always declare a class (function) and then add functions to it effectively making them all global. It turns out when a move of a curlly braces so that it appeared more like a traditional class (minus the key word class) with the methods(functions) being nested in the class (top function). Like magic the application preformance went up and visual studio stopped blowing up on contact. It was really amazing. Since then I have been pretty sold on using a JavaScript class structure like this... Over the years my self rightousnous about JavaScript has grown to the point of having trouble getting in the door with my big head... What is the saying the bigger they are the harder they fall. Anyway in my self rightousness I over looked a little key word called 'prototype'. I don't know if it just wasn't around 10 years ago when I started JavaScript and came later or what but one day I wake up and there is class structure using prototypes that gives me heart burn as it keeps giving me flash backs to this one project. And alas I have learned something new. With all my winnying about properly structured javascript some one pointed out that oh look this key word makes all instances use the same copy... gasp choke [descriptive explative] what? So I ask to see the link and do a bit of research. and what do you know a better way of doing something.

So it turns out that if I declare my class with its properties and then declare using prototype my methods then all instances of the class use the same method. this is also how to extend core classes as well. (dah, as I have seen that before) So then the new rule is that proper javascript class declarations should look like this:

function myclass()


this.WhateverProperty = "";


myclass.prototype =


Method1: function( param1, param2 )


// some code


method2: function( param1, param2 )


//some more code



Yes I know my curly braces are matching and not the OLD school javascript standard but will all the other languages it just seems to be that JavaScript should follow suit, anyway this is how a javascript class should look like until I am proved otherwise... (hmm. setting my self up again). :)

Silverlight Host Loosing Mouse Capture...

So one issue we have had to deal with in Silverlight is loosing Mouse Capture. So inside the context of a silverlight application this isn't an issue. The problem is when we have a small embeded silverlight app, say a media player for instance that we want to be able to be dragged and resized dynamically accross the page over HTML content and back. We can build this application so it has a typical windows like drag corner that you can left down click on and then drag out to resize. In theory this works. The issue is if the mouse ever gets off of the silverlight app surface, which is very easy todo, Silverlight still thinks it has the mouse captured but events are no longer received and the on mouse up never gets fired. Further when you move back on to the Silverlight surface you still have managed to loose the mouse and code can get easily confused ie: say your using a flag to determine if the mouse is captured since silverlight currently doesn't have a 'isMouseCaptured' property etc.

So now we have framed the problem here is how we solved it. So even though the media player visually one size when we first catch the mouse down on the drag corner we actually change the size of the underlying aghost for silverlight to be an extra buffer of so many pixels. So now the aghost makes it much harder for the user to get the mouse off of the silverlight surface so we basically run around the screen and chase after the mouse. On drop then we resize the aghost to match the current drag corner position. On IE this works really well, on firefox it is more problematic but does work well if done correctly. On Safari on the Mac the drag works well but Safari is generally more touchy around the html dom.

Another point or rather surprise for me was making this same player work on Safari on the Mac... lets not get confused with Safari on windows which as of this post blows up on contact with silverlight. But anyway. on the Mac, Silverlight runs as smoothly as in IE especially with this particular mouse capture issue. Hmm... makes me wonder if it is just Firefox...

Path Performance Issues in Silverlight

So I was talking to Jared and Devin and the other designer/integrator types this morning and some one pointed out that when you create a Path that uses stretch and has a height and width Silverlight takes a huge preformance hit. Not sure why this is as it doen'st appear to be an issue in WPF that I know of but it seems to be a 'don't do that' in Silverlight...

Parsing XML in Silverlight 1.0 - Cross Browser

One problem we have seen and dealt with allot lately is parsing XML client side. My favorite solution I must admit is to just toss out XML and use JSON as it is so much more elegant. In the case of the ET Minisite we did as of late this turned out to solve a lot of our problems. But still what if I can't do JSON for whatever reason? if you only care about IE or even firefox that seems to be much less of a problem. But for a really cross browser experience I my solution is the XML document mini me. Granted this is a bit of hack (like much of JavaScript and Silverlight)... :) but it works well... IF your XML is pretty stable and IF there isn't to much XML weirdness like multipul nested levels and such but it works.

So the XML Mini me is a simple XML parseing engine written in Javascript. It only supports a limited subset of something like the real xml parser in .NET like XMLReader or even XMLDocument but it does so a few simple things including some simple xPath like behavior. I hestiate to say a subset of xpath as the mini me is so extremely limited. I also suspect that the silverlight team at some point will have a good XML parser built in to silverlight at some point but we will see. there is of course Silverlight 1.1 but if you can't do the .NET part it doesn't do much goo.

In Silverlight, you have the downloader object so its really reasonable get XML easily no matter what. So then using the XML mini me looks something like this:

var MyDom = new XMLDocument();
MyDom.LoadXML( SomeXML);

I tried to keep the syntax as famliar as possible. So now we have our XMLDOM called 'MyDom' and then to get data out we can do this:

var ArrayOfVAlues = MyDom.SelectNodes("//items");

In this case the mini me will return all the text values of all the items nodes in the dom in the form of an array. Underneath the covers the parser is just doing some 'string' manipulation but for small groups or data or simple RSS feeds or config files it seems to work well. large XML parseing would scary me preformance wise as would writing a more full featured parser that is entirely written in JavaScript.

Some things to note on the class is that it has an XML property like the XML parser we used to use in classic ASP but otherwise it only has two methods currently as those are the ones I need to get it working for my particular project. lets look at the XML it can deal with for starters, here is a sample:

So in this sample using some simple xml our parse deals with it easily. In this case when we make a call to SelectNodes("//url") we will get an array of all the urls values with all the < ! [ CDATA stuff stripped off into an array. simple, easy and fast but easly breakable if you muck up the xml to much. So for the time being its a great stop gap and if JavaScript works then this works at it uses only intrinsic language features.

So the little XML mini me is great for simple stuff but when you really need to do real work with XML you really need a more robust solution that includes a real XML parser. Now that can prove problematic especially when it has to work in lots of browsers. To address this problem with my own work I wrote another class that wraps the cross browser functionality and wraps some key elements that I use. Typically I need things like all of properties of a given node in a list in the form of an array. Plus things like xPath and the like for Silverlight.

So the attached javascript class wraps the core functionality. It includes the HTTP request functionality and XML parsing with the other bits I 'might' need. Basically the class works like this:

var NewDOM = new XML();

This code fires when the html page script code behind fires. When you call 'Load' and pass a url to an xml file it then depending on the browser it uses the appropriate HTTP request object to load the file and assign the onload event. On the XML files load the call back is called and the object does the appropriate processing. Once this does its thing we now can use it to parse our XML.

On the onload event for the page in my little test I make two calls to different methods. The same methods are supported on this class as the XML mini me but additional ones are included like 'SelectNodesAttributes'. Also I noticed in firefox by 'onload event gets called twice so I put a flag on it so it only fires once. So in this sample I call the two methods that return arrays but you can have direct access to the DOM and use xPath etc using NewDOM.XmlDocument.

Building a TextBox in Silverlight 1.0...

One of the problems I have seen a lot of is building full blown forms in Silverlight 1.0. For the most part, Silverlight apps have placed HTML over Silverlight. This certainly works, albeit not the ideal situation and Silverlight 1.1 promises to deliver us a real text box. However, in the mean time, I decided I needed a 'Silverlight 1.0' text box. So here is how I made one work.
In building a text block there are a number of key bits of functionality we need todo: making the control look like a text box, making the text box behave with focus like a text box (have a cursor) and getting key board events into the text box. If you can address these then things like wrap, overflow and size ratio's etc are pretty straight forward.

Actually making a control to look like a text box is not too hard. Basically we have a canvas with a nice boarder in XAML and you can make something that looks like a text box. In this case something like this:

Nice and simple. Now that it 'looks' like a text box we need to have a cursor when it gets focus... For the cursor you can do a number of other things but lets start with a little line rectangle. We set the size and starting position in our XAML and then make it invisable. In our code behind we wire up an event on the box so that on 'MouseLeftButtonDown' we get the event and set the 'textbox' into a focus state. Basically these means we set a flag, changed opacity and started an animation on the cursor to make it blink.

Now our text block looks like a text block when we click on it and the cursor shows up... Now we need to actually make it work. Todo this we can add a text block element and wire an additional event to the document object of the page to capture keyboard events. In our keyboard event handler we need to check the key codes against our look up table so we know what they mean and add the character to our text box. If we run our text block now we notice that this appears to work but the cursor doesn't move. So then we make our event handler move the cusor as well.

So in less then a few hundred lines of code we have a working text box. From here we now need to be able to deal with text overflow moving the cursor back and forth and sizes and ratios. When the control is wrapped nicely in a class and xaml file we can use it in our projects by just creating the class and passing in a destination or target and 'poof' instance text box. Almost like its built in.

Now to see if anyone is actually reading the blog... If any one is interested in the code let me know. :)

Ok Ok, so it seems some one actually does really read my blog. :) I feel much better so I'm going to post more on the text box.
Lets start by updating our xaml a bit.

now we have added the cursor and textblock we talked about earlier. In our code behind we have our event handler called:

TextBox_OnKeyPress and an initialization routine called InitTextBox. In the onload event we then call our iniatilizer and wire up the key press event handler. Now the trick here is that we are not wiring anything to 'silverlight' persay but in IE we wire it up to the document object like this:

function onload(sender, args)
{ InitTextBox(sender); document.onkeyup = TextBox_OnKeyPress; }

Ideally this all is wrapped in a consumable control which I'm will finish when I finish this cool char size algorythm so everything isn't hard coded but in the mean time this example uses a number of present values in the xaml and things like font size and base increment in the code. Also there is a GetWidth function with hard coded values that is used for moving the cursor on the text box surface.

So back to our function InitTextBox(sender). In the sample I did initially this function basically saves some references to different parts of the control such as the cursor and text box for manipulation and then it adds an event listener to the text box canvas. This function is around actually giving the control 'focus' effectiving. There are a few other things you might want todo that is not in the sample like code for getting the control out of focus etc. So our add event in the initializer looks like this:

function( sender, args )
IsTextBoxMouseCaptured = true;
TextBoxCursor.Opacity = "1";
} );

So when some one actually clicks on to the control we set our flocus flag to true and turn the cursor on by setting the opacity and turning on the blink animation.

Back to our key press event. This guy remember we wired up to the document object but we only want to get events when the control has focus. That means in the event handler we need to test for the flag and if true then we can do something. Here is a sample:

function TextBox_OnKeyPress()
if( IsTextBoxMouseCaptured )
var EventCode = Number(event.keyCode);
case 48: SetCharacter( "0", ")", event.shiftKey );
case 37:
TextBoxCursor["Canvas.Left"] = LastPosition();

So in this case we see the flag test and then we grab our 'EventCode' from the keyboard and we use a case statement to determine what character this is and what todo. To make the example easier I removed all but two character examples. The first case we are dealing with the zero/close paren key. Note we call a function called SetCharacter and pass in three events. The SetCharacter function gets the current shown text, determines which charater we want based on shift condition adds the charater to the real text value we keep in a variable and then determines what text is to be shown places the text and calculates the cursor position based on another function called GetWidth which determines all the offsets from the base character size (this is the one that needs the cool algorythm so all the values are not hard coded...).

The last case is a move back button which calls the 'LastPosition' function and moves the cursor based on the character behind it. So that is basically all the key aspects of doing a text box in Silverlight 1.0.


ASP.NET Server Controls in VS 2008 and .NET 3.5 and Sharepoint

Today is going to be a bit of a rant. Background on the issue is that in VS 2005 I have written server controls for ASP.NET and Web Parts for Share Point. Typically for building Share Point web parts I like to developement them as server controls to so I have this nice easy structure to work with until I have something that does basically what I want. The trick with a server control is basically basic C# stuff. First you make a class and inherit from your base control and then you overwrite a method and add some declaritive stuff and then you can use it on your page by using a register in the ASPX. Then you can use your tag to create an instance of your control. Also this can then be put into its own dll and added to VS's toolbar and you can pass the dll around to friends etc and everyone can have this cool dll. Now to turn the control into a web part basically you change the base class, add a few using statements and change the output method name, make sure its all in a dll and your good. So far so good right?
For a server control, the class basically looks like this:

[ToolboxData("<{0}:SomeName id=\"\" runat=\"server\" />")]
public class SomeName: System.Web.UI.WebControls.WebControl
{ protected override void Render(HtmlTextWriter writer)
writer.Write(PresentHTML()); // some method we make...

We also add a few bindable properties like id or width or title or something that might look like this:

private string _Id = string.Empty;

[Bindable(true), Category("Appearance"), DefaultValue("")]

public string id
{ return _Id;
{ _Id = value;

Again straight forward stuff. right? We also might add other functionality of course and we have it in a name space but this is the key bits above. Now to turn this into a 'WebPart' we make it look something like this:

ToolboxData("<{0}:MyWebPart runat=server>"), XmlRoot(Namespace = "MyWebPart")]
public class MyWebPart : WebPart
private string _Id = string.Empty;
[Bindable(true), Category("Appearance"), DefaultValue("")]

public string id
{ return _Id;
{ _Id = value;

protected override void RenderWebPart(HtmlTextWriter writer)
writer.Write(PresentHTML()); // our private method that does the real work...
not a big change and again pretty straight forward. I dont' show all the properties and methods like the one reference to 'PresentHTML' which is just a private method that returns a string. This is the basic stuff needed for sharepoint. The one other thing is to make sure you have the using statements that reference all our Sharepoint bits:

using Microsoft.SharePoint.Utilities;
using Microsoft.SharePoint.WebPartPages;
using Microsoft.SharePoint.WebControls;

and of course the sharepoint dll that your building to needs to be referenced. So to use the server control version you have to create a Register tag in your ASP.NET that looks like this:

<%@ Register TagPrefix="prefix" Namespace="ControlNameSpace" %>

then in the ASPX page we can add the tag for our control to test it without all the jumping around you need todo with Share Point. In this case it might look like this:

This is 'All Good' in VS 2005 but the other day (earlier this morning) I had to make it work in VS 2008 for embededing a webpart 'Silverlight' control into Sharepoint. So I got to the test page of the silverlight project and do basically the above and make a web part that writes out all my Silverlight stuff (actually it was Devin's Silverlight app). This way we care wire up bits that the web part needs to pass into the Silverlight class todo its thing for when it actually has to live in Sharepoint. I would have thought this easy enough...

So I add the class and set it up as a server control. I add the references, and the register for the tag prefix and namespace reference and then add a tag to the control that should create the silverlight app. I compile it and try to run it and it blows up entirely. After fighting with this for some time it turns out that you need to have an 'Assembly' reference in the register tag in VS 2008/.NET 3.5 for a server control to be able to run in ASP.NET 3.5. So then it looks something more like this:

<%@ Register TagPrefix="prefix" Namespace="ServiceNamespace" Assembly="SilverlightApp" %>

The part that bothered me is that if the class is in the same assembly as the rest of the site and we call out the name space and class specifically it should be able to find the default assembly since its run in that assembly... but alas I was wrong. Not that, that is a surprise but it always seems to surprise me when I am. :)

Silverlight 1.1 As A Sharepoint Web Part

Recently I did a project where I had to embed a Silverlight web part into sharepoint. You would think this is easy if you haven't done web parts before. At least thats what I thought. Granted I have done web parts but it always surprises how much jumping around I had todo. I found what worked best for me was to create the 1.1 project as a silverlight based server control in a web site that ran all the bits and then to install that in the same domain as the sharepoint server. At first I tried to make the web part duplicate what the server control did but for some reason Sharepoint would make it render is such a way that the silverlight ended up hidden... I tried a few things but decided to use an iframe. This way the web part only outputs a iframe pointed at the controls default page that loads the silverlight interface. Works like a charm too. :) That sounds good but the steps ended up being something like this:

Silverlight Site Configuration

1. Copy the Silverlight Website folder to Server Location.
2. Open IIS Manager (Start-> All Programs -> Administrative Tools -> Internet Information Services (IIS) Manager)
3. Open Server Node (local Computer)
4. Open ‘Web Sites’ node.
5. Open Default running web site node
6. Right Click web site node and select New -> Virtual Directory
7. When the Virtual Directory Creation Wizard comes up click next
8. Enter the correct Alias ‘[some name]’
9. Click ‘Next’
10. Click ‘Browse’ and find the physical location of the site directory by drilling down in the ‘Browse For Folder’ and then select ‘OK’
11. Click ‘Next’
12. Select ‘Run Scripts’ check box
13. Click ‘Next’
14. Click ‘Finish’

Web Part Configuration

1. Make sure the wep part project is compiled.
2. Copy the project to the Sharepoint server.
3. Copy the WebPart.dll to the bin directory under the wwwroot.
4. From the VS command prompt navigate to the bin directory under wwwroot.
5. gacutil the dll which should look something like this: gacutil –i WebPart.dll
6. from this same location in the VS command prompt use the command: sn –T WebPart.dll to find the strong name key. For example: 7dd6db7c5d0189b7
7. Find the Sharepoint Web.config by opening up the IIS Manager and selecting the core site and then right click on the web.config and file the file location.
8. Add a ‘safecontrol’ node to the safecontrols section like this:
Assembly="WebPart, Version=, Culture=neutral,
Namespace="[some name space]"

9. Make sure the dwp file has a valid public token.
10. Go to the Sharepoint home page.
11. Click Site Actions and select ‘Show Page Editing Toolbar’
12. Click Page button in the toolbar.
13. Select ‘Add Web Parts’ -> Import
14. Click Browse and find the dwp file in the project.
15. Click ‘Upload’
16. Select ‘Add to: Top Zone’
17. Click ‘Import’
18. Close the import right hand bar
19. Select publish from the toolbar

So I'm not saying this is the right method or the best way todo it but it worked for me in my case... abit of a hack but well its Sharepoint :)

Wiring Silverlight Into the Browser History/Back Button

While watching a presentation Jason Cook was doing on flash he suggested some of the tricks used by other technologies could be used with Silverlight. The trick I was interested in was particularly being able to wire things into the browser history so that the back button of the browser does something other then go back to a different web page. This turned out the be a simple task. The way my sample works is that the html file (or .net page etc) that is running the silverlght application includes this Silverlight Paging class. At the end of the page is a block that initializes the class. On initialization it adds an iframe to the root pointing at one of two proxy files. The silverlight application then needs to add a proxy handler for setting application state based on any key it wants and each time application 'state' changes that you want to be a history 'point' you just call 'AddPage' with a key on the class. When some one then hits the back button the browser loads a different proxy with a different key stored as a query string value; which is then returned to the proxy handler or 'delegate' that sets application state. Slick as a whistle.

So lets look at that in more detail. Starting from the page that hosts our Silverlight application we can see that there is a script include. That script file includes our class and at the bottom of the page is our initialization code.

In the block of script at the bottom we have two lines of code. The first creates a global reference and instance of our class and the second line calls the Init method. If we go to our class source and go to the Init method and all it does is do a document.write and inserts an iframe that our class will use to create history paging entries.

In the paging prototype we also see two other methods. The method 'AddPage' loads page proxies into our iframe to create entries using our key value.

SilverlightPager.AddPage( "somevalue that indicates state");

in my sample project we just use an indexer in our Scene object on on mouse click on the button this happens:

// Put clicked logic here


Our next method is called 'OnReturnPage' which is actually called by our proxy pages. So in our Silverlight application we call 'AddPage' and pass in a key value each time we change state in and what that to be a history point. In our sliverlight load we also need to associate a delegate to the 'PagingDelegate' member of our class like this:

SilverlightPager.PagingDelegate = MyAppChangeStateHandler;

This will then be called each time our application calls 'AddPage' or clicks the browsers history button. In both cases the page proxies are going to call OnReturnPage and pass in our path which will have the key as a querystring value that we then strip off and pass into the PagingDelegate to change the application state. So then we get a little Flash Magic Mojo for our Silverlight app.

Popfly goes Beta

Yea, Popfly Beta has gone live and now is open for everyone. I'll have to go in and clean up some of the controls I did...

Silverlight - Associating Files in Visual Studio

So here is a Visual Studio trick I picked up from Josh in WPF land that applies to Silverlight. One issue we found in Silverlight was when we were building big Silverlight applications and custom user controls that the XAML and .js files were not associated to each other. But in Visual Studio if you know what todo its pretty straight forward. Then yoru 'XAML files can have JavaScript code files even if created seperating with different names.

Here is how you do it. When you silverlight solution and project is open in Visual Studio Right click on the project in the visual studio solution explorer. Click 'Unload Project'. If the solution is tied to Source control you will get a dialog 'Attempt to unload projects with shared checkouts' and you can select the option you want. So assuming you select 'continue' then the project is unloaded. Right click on the project and select Edit [project filename].csproj. You will see the project file open up in a raw xml edit mode. Fine the 'itemgroup' collection that has the file you want to make dependent on another file. Add a 'DependentUpon' node to the node that is your file and put the name of the file you want your file to be under. Save and close the project file. Then you right click the project and click 'reload' the project.
Its a cool trick and sure helped me clean up a few huge messy projects.

Silverlight, JSON and Automatic Design Asset Zip and index generation...

Lets say we have a huge silverlight application. And lets say that we have a lot of images, xaml and media that we use in our application. Silverlight does a great job of allowing us to use downloaders and catch events and deal with it but lets say we want to just do it once. Download everything in one file and then apply our assets. We also don't want all of the loose assets floating around our Silverlight apps directory structure...

From an architectural stand point this is a much cleaner method of keeping additional assets packaged especially when there is a lot of xaml and images etc and keep it as small as possible over the wire. Silverlight allows us to address all that by being able to download zip files. On the downside there is not dynamic way to know what is in the zip file and plus it is a pain to have to do it on your own. So this is how I addressed it.

First I built a windows application project in Visual Studio without any windows. I added directories with all my design assets and set them to be content and show up in the output directory. When you compile the project it builds out the executable and copies all the folders and assets added to the project to the output directory. From here Visual Studio starts the application. Although it doesn't have a UI persay it starts by looking for any zips that might be in the directory and deletes them.

Now the cool part happens... it looks at all the diretories and creates an index JSON file for each folder. It saves these all in the root of each directory and then proceeds to create zip files for each directory automatically. All I need todo is then have this projects zip files that are generated in the output folder be copied to my Silverlight project directory structure as a pre or post build event and I'm good. All these additional assets are kept nicely packaged and out of the main project. And I didn't have to mess with it on my own.

Also note that the attached project doesn't have the zip.exe that builds the zip via console commands passed to it. You can use the command line version of any thing like pkzip etc but you will have to edit the source of the main application to make it work. I have my own licensed copy of this command line tool that (pkzipc.exe) which is what the argument structure is designed for.