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:
this.Width = App.Current.Host.Content.ActualWidth;
this.Height = App.Current.Host.Content.ActualHeight;
LogoCanvas.SetValue(Canvas.LeftProperty, this.Width - 60);
LogoCanvas.SetValue(Canvas.TopProperty, this.Height - 60);
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
void Content_Resized(object sender, EventArgs e)
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.
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!