Just as promised, I am going to share some code details and all references for my Silverlight 2010 Resolutions App.
Text Placement/Movement/Database Operations:
My initial goal was to create an interface with dynamic/random text placement. Text should also move in the z-index to simulate some kind of 3D space. Last year I had seen a company web site, which displayed its portfolio with a similar design; looking pretty interesting and fun to me.
The random text placement and movement algorithm I used in my app is based on Terence Tsang’s – aka ShineDraw – 3D Text Space program. Shinedraw’s web site is a true source of inspiration; you can find various Flash vs Silverlight samples to try out and compare both technologies’ capabilities.
The resolutions submitted by a user are stored in a database; that’s how I track the count of each resolution. All database operations are executed through web service calls: retrieval of resolution records, update of resolution counts etc. It would have been a nice feature to enable new entries by users, but due to time limitations that feature was left out.
Once the resolutions are retrieved from the database at startup; the first thing I do is to place resolution text blocks randomly on the page. Then I set the MaxFrame rate and include a CompositionTarget.Rendering event handler.
Application.Current.Host.Settings.MaxFrameRate = 24;
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
After a user has submitted his resolution selection list or based on 2 minute intervals, rendering is stopped and the webservice retrieves the updated resolutions from the database. The entire process, random placement, event handler activation etc., is executed once again. Even though I don’t need the DispatcherTimer for the frame rendering event, since we use CompositionTarget.Rendering, I use the DispatcherTimer to decided when to refresh the screen based on a specific time interval.
Browser Window – Placement and Resizing:
My app is using a canvas (LayoutRoot) as its main Layout Container. To enable the canvas to fill the entire browser window, I made sure that it wasn’t assigned any height and width in the MainPage.xaml. Once the Main Page Loaded event handler is in action, I use the browser width and height to assign them to my canvas.
this.Width = App.Current.Host.Content.ActualWidth;
this.Height = App.Current.Host.Content.ActualHeight;
I also wanted to put the app info button ( displayed as a “?”) and blog link in the left and right page corners respectively. Therefore I had to assign their Canvas.Left and Canvas.Top dependency properties after the LayoutRoot canvas was assigned its width and height. Just as an example, here’s what I did:
LogoCanvas.SetValue(Canvas.LeftProperty, this.Width - 60);
LogoCanvas.SetValue(Canvas.TopProperty, this.Height - 60);
This seems to work out pretty well, until the browser window is resized. So I also added an event handler for browser window size changes. The MainPage configuration method resets the LayoutRoot canvas width/height and the dependency properties as I mentioned earlier. The following is a simplified version of the actual code:
...
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
...
void Content_Resized(object sender, EventArgs e)
{
MainPage_Configuration();
}
User Interaction:
Users can interact with the app through the clouds (sounds funny I agree), which are custom created buttons. One button displays the first 10 resolutions with the highest count values, the other button gives the user the option to select/submit resolutions. The Top10 and Resolution selection pages are ChildWindows. If a user clicks on any resolution on the main page, text movement direction does also change.
Additional info is provided on the main page and on the selection page through a “?” sign placed in the left corner of the pages. When a user clicks on the “?”, an animation displays a stackpanel with some text details; another mouse click hides the stackpanel.
Style:
The cloud images and notebook background have all been created with Photoshop brushes. The buttons were created in Expression Blend.
Resolutions displayed on the notebook make use of a font named Marka to give the feel of handwriting. Isn’t this how we take notes; scribbling it on some piece of paper, which we then find whenever we are looking for something else? The main font used is Century Gothic; clean and simple.
The Splashscreen text/colors/gradients were all designed in Expression Blend.
If you didn’t have a chance to the test the app; just check it out and join the action!
