Online Advertising, Web Development & General Rantings

The mashup began by me wanting to write a feed reader type of application end-to-end with Silverlight. Basically I wanted to really see if Silverlight could handle a real RIA scenario.

I wanted to utilize a lot of features in Silverlight that I knew would be required for any type of business RIA. I also wanted to go wild with the UI and test out just how flexible XAML was.

Here is a screen shot of my DIGG mashup! (The rest of this post is at my Cynergy blog)

This is going to be a simple post BUT I thought I’d share it because I have been racking my brain for so long trying to work out how to do something like this in pure xAML. This shows why design is just as important to the UX toolset as blend is. There are just some things that can’t be done in blend!

[Thanks to Germain from over at the expression forums for showing me how to do this]

A couple of months ago I recreated the Windows Media Player interface using Blend and Silverlight 1.1 alpha refresh, I wired up the UI so that it behaved similar to the actual application. It had a lot of code in the code behind that managed the resizing, it also made extensive use of the canvas control for layout positioning,  it had a lot of absolute positioning and funky logic to make it work when the page resized.

Today it’s time to rewrite that project in Silverlight 2.0 beta. The main reason why I’m doing this is because I feel that there isn’t enough examples of real world skinning using the new Silverlight 2.0 bits. There needs to be more samples out there for people to learn from, I for one would of loved to have more demo’s to digest in the early days of the Silverlight 2.0 beta release.

Anyway hope you guys can learn from this real world sample, I know I learnt heaps making it…

[read the article at my new home at Cynergy]

After skinning my nth control I got fed up with continually referring to the MS source code via reflector and made up my own diagram with all the control contracts in them. Print it out and stick it up on your work wall, hopefully you guys find it useful. Shoot me a comment of any changes you feel would be beneficial to this diagram.

If you don’t know what a contract is then refer back to my post on “Skinning a button - 4 different ways and counting“. Put simply the standard Silverlight controls wire themselves up to customized skins by finding specifically named storyboard’s and visual elements. At the moment the easiest way to retrieve these contracts is to interrogate the controls source code via reflector, I thought it would be easier to have a document that identified these contracts.

I also plan on maintaining this diagram over time, enjoy

Low quality JPG - [500k] - ControlContracts.jpg

High quality PNG - [850k] - ControlContracts.png

This builds on top of  my other diagram “Silverlight Control Hierarchy“.

You can also find this article on my new home site at CynergySystems.

First up let me apologize for the long gaps between my posts, the honest truth is it’s taking longer than I thought to master the new features in Silverlight 2.0 beta. It’s not that it’s hard or anything, well actually some things are, it’s more that there’s so much to learn! Also I’m taking my time to truly understand why they did it one way versus another way, really cement in my mind the reasoning behind the decisions they made with the architecture.

When I do post I will be sharing the sum total of my learning’s minus the pain of getting there. The first task I set myself was to investigate how to skin a button or rather turn my existing blend assets into a button.

This is what I found out …

In the process of mastering the Silverlight 2.0 controls I’ve documented graphically the hierarchy of the controls. It’s a simple diagram that shows relationships. I’m using this to cement my understanding of controls, in particular when creating my own controls, where and what parents to inherit from.

I plan on extending and maintaining this overtime. Please send feedback on improvements to this diagram.

In this post I will take the login screen mockup and create a Silverlight layout from it. But before I delve into the screens let’s talk about layouts in general.

When building applications one of the hardest things to get right is the layout of controls and how they behave when the application resizes.

When designers create there mockups they generally create screens that are snapshots taken at a single point in time. Some of the more experienced designers produce multiple mockups that show the same application behaving as they’d expect when resized at the same single point in time. I prefer the multiple mockup process showing the effect of resizing but at the end of the day it all depends on what your designers/UX people are willing to do.