Useful information

In this post I list some of the useful information I've used during the project.
The following links where really helpfull:

• http://www.silverlight.net/learn/videos/silverlight-videos/navigation-framework/
• http://msdn.microsoft.com/en-us/library/cc296245(VS.95).aspx

The other more global website I've used during the project are

• http://msdn.microsoft.com/en-us/library/cc838158(VS.95).aspx
• http://www.silverlight.net/

The book I used

• Beginning Silverlight 2 From Novice to Professional (Robert Liar)

Search for a solution

Variable height
Silverlight is a great technique but it also gives me a lot of painfull thoughs. The first big thing I run into was the variable height of the Silverlight canvas. In the design of the homepage the Silverlight canvas can be very small say 200 px height. On the second page (projectdetails) the images are bigger and with the variable textblocks the height can be vary from 500px to 600px. I don't know why, there are 100% height and width options, the content in the canvas moves related to each other but the canvas size doesn't change.

For example: if you set the height of the canvas to auto, the content inside the canvas has a total height of 300px the canvas remain 300px. When you navigate to the next page 'a new frame is loaded', the canvas stays 300px height. There are complicated javascript and silverlight functions available to solve this problem, but these don't work in each browser.

The problem here is not particular the silverlight canvas, but its caused by a combination of the object tag and the silverlighthostcontroller (div where the object is loaded in). There are solutions available to set the silverlight canvas full height and width, but then you have to create your whole page in silverlight. In my case where the silverlight object is hosted in one page within the master design this is not the required solution.

I overcome this problem by using the maximum height I need, so 600px and fill up the white space with some other silverlight design.

Issue (note that this is not only in Firefox but also in IE8):
http://forums.silverlight.net/forums/t/5623.aspx

Load async XML
The next issue to overcome is the location of the xmldata file. The xmldata was part of the silverlight project instead of the webproject. In this way the file will be compiled into the XAP package. Without recompiling there is no way to add new projects to the XML file which is not required. The way to overcome this is to dynamicly add the xmllocation using asycromic download within the code.

http://www.kirupa.com/blend_silverlight/loading_xml_sl2_pg1.htm

On going development

With the system plan finished it was time to actually build the project. With the help of my Silverlight books and some internet pages managed to create the first page. The homepage contains a scrollviewer and some images. From there on I searched through the internet how page navigation works. In Silverlight is this slightly different then normal HTML and it reminded me a lot of html frames back in the old days.

Once the page navigation was finished I create one of the image controls withing the view. The image control contains a canvas, rectangle, image and textblock. The design, my ideas and the Silverlight book helped me to create a storyboard. A storyboard describes a little story and a step by step action:

Example: move rectange from x1 to x8 in 3 keyframes, move rectange from y1 to y8 in 3 keyframes, change color of rectangle from gray to red starting from the 3th keyframe.

After my storyboard was finished I created my control in a usercontrol so I could specify some properties and multiply them easily.

Next was the projectdata, the projectdata will be listed in a xmlfile and needs to be loaded. I created some functionality to approve this and using databinding I was able to combine the data with the properties of the usercontrol.

page navigation tutorial
http://blogs.msdn.com/dphill/archive/2008/10/07/silverlight-navigation-part-1.aspx

System Plan

In the last periode I worked on my System Plan. The System Plan describes the system by the use of diagrams, visual sketches and desciptive texts. You can find the following information: use case diagrams and scenarios, screen designs, wireframes, sketches, personas, architecture diagram and the sitemap.

To develop the System Plan I used Microsoft Word, Adobe PDF, Microsoft Visio and Adobe Photoshop.

The document is still in draft version and can be found here: http://www-student.it.uts.edu.au/~rkoster/system-plan.html