If you missed the buzz, the Telerik team plans to distribute a beta release introducing new controls that will be officially included in the Q3 2009 release scheduled for November 2009. For those of you that didn’t have the opportunity to get familiar with what the new CoverFlow offers, take a look at my previous blog post here.

 

One of the new pieces that will be part of the pack is the new CoverFlow control. It is important to note that from Q3 2009 all previous versions of the control will be replaced with this one, which is specifically built for Silverlight 3.So, the team has decided to release a beta version in order to give the community its deserved time to preview and assess the control prior to its initial launch. In this blog you can find information concerning all API changes introduced in the new version.

What is new?

ContentType

One of my favorite new features is the ability to render any UI elements inside the CoverFlow. You are free to create any type of controls and place them within a CoverFlowItem. The we know that most common scenarios are loading videos or images inside the CoverFlow control, we did a little trick. We introduce an internal wrapper that will automatically load a collection of videos or images associated with the ItemsSource of the control. The wrapper and the rendering of the reflections are controlled by property called ContentType. It has the following possible values:

 

Element - the control will render its elements as UI Elements (Buttons, User Controls, Grids etc.). Note that in this case if you have any animations or visual states executing inside a CoverFlowItem, its reflection will not be updated.  This is made for the purpose of optimization. If you are willing to have your animations or visual states reflected you should use the ElementMedia value

 

ElementMedia - using this value will force the CoverFlow control to use CompositionRendering that will render the reflection on each frame, thus reflecting any changes inside a CoverFlowItem such as animations or visual states.

 

Image- If you set the ContentType value to Image, the ItemsSource of the control will expect URI of images. It will use the wrapper internally to create an Image control, handle its loading and both display the image or show an error in case an image cannot be accessed.

Video -   This is similar to the Image value, but instead of URI to images, typically you would have a collection of URIs pointing to videos. Again the loading animation and the error will be handled by the CoverFlow itself. The video that is selected will be always played from the beginning.

 

EasingFunction

As easing functions are now integral parts of the Silverlight framework, we have introduced the EasingFunction property. It determines the easing with which RadCoverFlow changes its items. Together with that we introduce the ItemChangeDelay which is of type TimeSpan and defines the speed of the animation.

Camera and layout

There are also some enhancements concerning the look and the layout of the control. Here is a brief list that describes the enhancements to the functionality introduced by all new properties part of the beta version.

 

CameraDistance - Distance between the control and the camera.
CameraRotation - Rotation that determines the view angle towards the control.
RotationY - Plane projection in Y dimension applied to all CoverFlow items that are not selected.
ItemScale - Percentage scale of all items that are currently not selected.
DistanceBetweenItems  - Determines the distance between items except from  the selected item.
DistanceFromSelectedItem - Determines the distance of all elements from the selected item.
ItemWidth and ItemHeight - Define the size of every item inside the CoverFlow. However, you can explicitly set the width and height of the CoverFlowItem which will automatically override the ItemWidth and ItemHeight values.
OffsetX and OffsetY - Offset the flow layout from its center.

What is changed?

CameraViewpoint is a substitute for CameraY. The new property determines the point from which the camera looks at the object. The enum has three self-explaining values, Top, Bottom and Center.

OffsetY is a substitute for CenterOffsetY.

What is removed?

ReflectionStartAlpha and ReflectionRelativeHeight are marked as obsolete. We have removed all properties by which you used to control the item’s reflection. Instead, you should edit the OpacityMask of the reflection in the control template.

 

We decided to remove the ScrollBar control from the default template of RadCoverFlow, since now it’s pretty straight-forward how to use an ElementBinding to achieve similar results. Moreover, you can bind any type of a range base control to the SelectedIndex of CoverFlow without even tampering with the control template. Due to this change, properties like NavigationLargeStep, NavigationPanelTemplate, NavigationPanel, NavigationData  and methods NavigateNext, NavigatePrevious, NavigateNextLargeStep, NavigatePreviousLargeStep, NavigateToIndex have been removed. If you need to navigate through out a collection, you should either use a range base control with an element binding, or directly manipulate the SelectedIndex.

 

In the previous version there were some issues concerning the layout of the CoverFlow due to which you had to use the ItemMaxHeight and ItemMaxWidth in order to control the layout. Now, these properties are removed, and you can directly use the ItemHeight and ItemWidth to specify the exact size of the items.

 

There are a lot more to share in the upcoming months prior to our Q3 release, but I hope this article can serve as a good starting point as well as an adoption guide for those of you who are interested in using our new CoverFlow control.


About the Author

Hristo Borisov

Hristo Borisov (@hristoborisov) is currently a product line manager in Telerik leading all cloud technologies part of the Telerik Platform after spending more than 6 years with the company. A passionate advocate of applying lean startup practices to existing organizations, Hristo is on the quest for discovering scalable and sustainable business models through product and customer development using tools like MVPs, Pivots, and Lean Business Model Canvases.

Related Posts

Comments

Comments are disabled in preview mode.