I saw some applications making use of the carosel to display their products and that made me think. What if I had a set of products related to each other. Like if I was displaying Vaccum cleaners then clicking on of the vaccum cleaners would show me another carousel which would display different accessories for that vaccum cleaner.
We can architect this by creating different entities.
1. Carousel – This class handles the items in it and rotates them at the set speed.
2. Carousel Controller – The controller is responsible for creating and controlling the carousels in addition to fetching the data and maintaining their relations.
3. Carousel Item – This class defines the object that will rotated in the carousel.
Carousel:
This class will rotate the carousel items clockwise and each item will be clickable. The click event will be captured and a custom event will be invoked so that the subscribers (Carousel controller) will be notified of the click and will swap the current visible carousel with the next related carousel.
To rotate the items we can use the following formula:
Angle is calculated using : Angle = (((2*Math.PI) / (ItemCount)) * currentItemIndex);
Carousel Item’s X Co-ordinate = XRADIUS * Math.Cos(angle);
Carousel Item’s Y Co-ordinate = YRADIUS * Math.Sin(angle);
By changing the XRadius and the YRadius values the rotation path can be changed from a circle to a ellipse.
Now these co-ordinates are in reference to the origin so we scale these co-ordinates so that we get the right values.
X = X + OrigX;
Y = Y + OrigY;
We define an event called ItemSelected which the carousel controller can subscribe to.
Carousel Controller:
This class will be responsible for creating the carousel based on the relationships defined by the data source. It will also be responsible for swapping out the carousels.The data can retrieved from a SharePoint list or a database.
Every time the user clicks on an item in the carousel, the carousel invokes an event which the controller captures and runs through the data source to find the related data items. These items are then added to a carousel and this carousel is initialized and activated. This way all related entities can be displayed in a form of a carousel.
The Carousel and the carousel item will be implemented as silverlight user controls. These controls will be self sufficient in how they display what needs to be displayed but its actions will be controlled by the carousel controller.
I intend to blog about the detailed design and implementation once its over. Watch this space to read about the detailed design and implementation details.
| Share this post : | 
| 
|  |
