Since recently, SilverlightShow has a brand new Showcase section, with a much better, more intuitive interface to review all showcases featured on the website.
What did it take to redesign this section? What problems and issues had to be resolved, or have yet to be dealt with? We find this out in a case study submitted by one of CompletIT Senior Silverlight developers Nikolay Raychev. Nikolay has been responsible for the server-side development, integration with Silverlight solutions and SEO of the 2 main company websites - www.completit.com and www.silverlightshow.net. Due to his huge Silverlight experience he was assigned the development of the entire Showcase section.
Project Overview
1. Describe what the project is about - goals, target users, key functionalities
The main goal of the project was to replace the old (and also old-fashioned) showcase section of SilverlightShow with something new, interactive and easy to use. After the showcase page has loaded, all images had to be visible at once so the user could see all of them without going through pages, etc. The whole composition had to be zoomable, and also draggable, so the user could look at the items when the scene was zoomed in. A tooltip had to be displayed telling the user what’s the current item about. A dialog window had to show detailed information.
An important requirement was that the gallery had to support ordering by month so the user could see the latest items right away, as well as be able to browse through the items submitted earlier. The project had to be integrated in SilverlightShow using the existing data. The items had to open their old URLs so we wouldn’t lose the search engine indexation.
2. Did you have any limitations set - technologies to be used, time, resources, etc?
Since CompletIT is company is focused on delivering Silverlight solutions, and SilverlightShow is entirely dedicated to this technology there was no other choice but develop the module entirely in Silverlight. The timeframe was tight, not just because we are looking to expedite the redesign of SilverlightShow, but also because I had proposed to develop this project for my master’s thesis, and I had specific time constraints for that. Of course this required preparing tons of documentation to accompany the project, but it was definitely worth the efforts - I know that other university students, in addition to SilverlightShow visitors, will be able to learn from my experience.
3. What Silverlight features were used in this project?
- Animations:
- Build-in animations API based on Storyboards
- Expression Blend 4 FluidMoveBehavior
- ZoomablePanel and ZoomController – custom controls previously developed for our Book Shelf
- RatingControl - custom control previously developed for our Book Shelf
- EllipsePanel – custom control developed for the current project
- Other custom controls and templates
- Third-party Silverlight controls (Telerik RadWindow, ComponentOne RichTextBox, Toolkit ActivityControl
- Render Transforms API:
- ScaleTransform
- TranslateTransform
- DispatcherTimer
- Mouse events API
- VisualTreeHelper
- 3D Projection API
- HTML Page API
- MVVM
- Prism
- WCF - Silverlight enabled services
4. Project snapshots before / after
Before:
After:
Problem and Solution Insight
1. What were the pros and cons for using Silverlight to achieve those goals?
The main advantages of using Silverlight were:
- Using the same business objects as were used in the server part
- Easy consuming of the WCF services
- Easy creation of animations using storyboards. Using Expression Blend FluidMoveBehavior for animating movement of objects from one list to another
- Data Binding.
2. What were the major Silverlight-related problems faced during development?
In accordance with the provided design initially the items had to fill an ellipse and after clicking a button they had to order by month.
One of the problems was “How to make the items order as a filled ellipse?”
Together with Emil Stoychev we decided to make a custom layout control derived from Panel. At first I was thinking to start building the ellipse from the center when one of our colleagues – Bogdana Rakova came with the idea that the items can be divided into groups, for every group there would be columns and every column would have more items compared to the previous and the difference is n. This number n is different for the different groups and is decreasing for every next group. Finally the number n reaches 0. It’s enough to build half of the ellipse and you can mirror the rest. It’s good to work in such a smart team :) Colleagues are giving these clever ideas exactly when you need them. So I started developing the algorithm. It wasn’t so complex but wasn’t something you can build and test in a day or two. Finally a custom control called EllipsePanel was created.
Another problem was how to make items go smoothly to their positions ordered by month.
Here the Behaviors in Blend 4 came to use. I watched a video with Kenny Young at MIX who was showing how to use them. So I came with the solution with two ItemsControls. The first is making use of the EllipsePanel as an ItemsPanel in order to arrange the items as ellipse. The second one is using a StackPanel for the ordering by months and a second ItemsControl in its ItemTemplate for the ordering of items for every month. The real objects are moved from one list to another list structure in the ViewModel and the FluidMoveBehavior is making the visual part.
Conclusion
Were the initially set goals achieved, within the expected resources? What else has left to be improved?
We think that we managed to achieve the initial goals of the project, but there are still some issues to work on.
- The initial load time should be improved. Now the application is waiting not just for the results from the service, but also for every image to load. We discussed to initially display a “Loading” image for every item until that item’s image loaded. We’ll further work on this.
- The ellipse algorithm isn’t perfect so the width/height ratio of the ellipse varies depending of the number of items. This is also something we’ll be working to improve.
Of course, we’ll keep working to further improve and enhance this Showcase application, and for that we would surely count on the feedback of SilverlightShow users too!