Watch out the flow is coming! – Telerik CoverFlow for Silverlight 3

by XAML Team | Comments 6

If you think the light from the Silverlight 3 release has already gone dim, then you should wait to see the new blast that the Telerik team has prepared just to make sure that once again everybody is looking in the same direction. In this article I will introduce one of the new controls that are already extending the enormous capabilities of Silverlight 3.

 

      Telerik new CoverFlow


One of the buzz words that came up with Silverlight 3 is the Plane Projection that allows you to render UI element in a plane projection. We have been passionately waiting for this and now our new RadCoverFlow, which was completely built from scratch in Silverlight 3, supports not only images but also UI elements and videos! You will be able to have your videos played inside the cover flow control, which will be again out of the box since we were not willing to introduce breaking changes in the way the ItemsSource is set. Instead, an inside “magic” wrapper will control the data item set by the source and play it in case it is a video path, or display it in case of image path.

 

Another word – easing. All animations inside the RadCoverFlow are ease animations. Changing the animation in the previous version of RadCoverFlow wasn’t the most pleasant job. Now you will be able to set your own easing function or choose from the one shipped by the Silverlight 3 framework and animate the way RadCoverFlow moves its items.

 

The layout of the cover flow control can also be easily manipulated to suit all your needs. Moreover, as in the previous versions, the cover flow control has a mechanism for controlling the 3D look of the control, its CameraRotation and CameraDistance properties. These are just a small fraction of all new features introduced in the new RadCoverFlow control, and yet, in the end all of its functionality integrates in a consistent set that delivers more than exptected.

 

Our new RadCoverFlow for Silverlight 3 will be officially part of the 2009 Q3 release.  BUT, this is just a tiny piece of what Telerik has prepared for the Q3 release. That is why we plan to release a beta version within a month. It will include all new controls that are currently being developed. We will be looking forward to receiving your great feedback on what will be the next generation of Silverlight controls.

 

So watch out and sit tight for all cool stuff the Telerik team is developing!
Valeri Hristov
Team Lead,
Platform Team

6 Comments

Ben Hayat
Two words! "Thank You"!
Ben Hayat
Could you please provide a sample of the CF working with RIA services where the CF is connected to a RIA DataSource and DataPager. Also, be sure that each page also shows an image where the URL is collected from the database table.

My reason for making this request is as the folllowing. If we set the LoadSize of the DataSource and DataPager to 20, is the CF going to go and retrive those 20 images first and then when the user is finished with the first 20, is the CF going to get the next 20 images or will the CF get the image one at the time as the image is coming forward.

Secondly, it woulod be also important to show some data along the image for each page. This will truly demonstrate the "Real" usage of CF.

Thank you and looking forward to work with it.
Evan Hutnick
Hey Ben,

That sounds like a great idea.  Rest assured though that if the team doesn't cover that in a QSF demo I'll be all over the "real" usages of RadCoverFlow- I've been anxiously waiting for this one too. ;)

-Evan
Ben Hayat
To Team;
I wanted to share a site that I saw today and it kind of shows my idea of using the RIA Data Pager to limit the number of pages  per load. Here in this link http://books.sae.org/ you can see they show multiple loads (1, 2, 3, etc)  and in each load you can see 10 books in it. It would be great to be able to have CF take advantage of the paging system of RIA Services for this purpose.

Another cool thing with this link is that, if you bring your mouse over the top book, a little window pops up with more info and a link on it to show more detail. So, I suggest the your Top Item would have mouse over, mouse leave and mouse click as well, so we can control this.

Thirdly, which is a question, can we also put TextBox on each item for data entry? I'm thinking, this control is great to make "Wizard" control for multi page data entry.

Here are some suggestion:
a) The further an item is from the top, the more blur, transparent and smaller should be. This will create the effect that the item is far away.
b) Please add a property to the control to add a sound clip to it, so we can add a "Click" MP3 sound, so when the user click next or before, they can hear the sound.
c) Can we use a PNG file as the main content of each item? Please take a look at this sample: http://sirius2.intersoftpt.com/ Go to the CoverFlow sample, and the select the Second one from the last item. You can see each it (Earth, Book, Heart, Calandar, etc.) are all PNG files. You can also see how the items have become smaller and more transparent from the center.

Hope these ideas help.
Valeri Hristov
Hi guys,

RadCoverFlow is a regular ItemsControl, so I guess (I didn't try it yet) it will work with the DataPager exactly as the books site. On the other hand, you will also be able to fully customize the content of the items - on the screenshot above there is a small info panel on the center item - the item actually is a user control, that shows/hides the panel with an animation and you could put whatever you like inside, including a TextBox. The items that are not in the center are not active, e.g. you cannot click their elements.

Regarding the suggestions:
a) I am not sure this can be easily done right now.
b) I guess this should be implemented by the developer, because the possibilities are endless - some may want to play one sound when the items are changed to the left and other sound when the items are changed to the right, etc. I suppose a handler on the SelectionChanged event would be sufficient. Of course, if there is demand for such feature we will add it.
c) Yes, you can put PNG inside RadCoverFlow v2. Actually, you could put video or any other element. Regarding the transparency, as I said, this should be possible, but I cannot say how easy would it be right now. We can add it as a feature, though.
Ben Hayat
Hi Valeri;

Thanks for providing the extra information and I'm fine with your answers. As far as the sound goes, you are right about that. I guess we should see the first beta pretty soon!

@Evan
I missed to thank you for your comment and offer!

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by XAML Team - or - read latest articles in Developer Tools