RadControls for Windows Phone 7 – an in-depth comparison with MS Toolkit

Many users have asked the question “What are the differences between your controls and their equivalents in the Microsoft’s Toolkit for WP7”. With this article I will try to give you a more detailed perception on the added value of RadControls for Windows Phone 7.

Please note that this is “our” point of view and how we see the differences between our suite and the Toolkit. We by no means belittle the efforts of Microsoft’s team that created such a nice components package. 

I will list only the components/features that are present both in Telerik’s suite and the Toolkit. All of the features that are unique for Telerik only are bolded.

Page transitions

Page transitions are encapsulated by the root application visual - RadPhoneApplicationFrame, which uses the power of RadTransitionControl to define smooth and slick animations upon page load and unload. Four distinctive types of animation flow are defined within a transition: ForwardIn, ForwardOut, BackwardIn and BackwardOut, each one being freely modifiable either by code or through XAML. Each transition synchronizes events like Loaded, LayoutUpdated and CompositionTarget.Rendering so that the animation is as smooth as possible. Due to this synchronization mechanism even heavy pages such as Panorama or Pivot with lots of content are easily animated without any performance or visual impact.

Here is a list with all the transitions that come out of the box with Telerik’s package:

• Slide
• Rotate
• Swivel
• Turnstile
• Fade
• Scale
• Continuum
• ContinuumAndSlide
• FlipItems
• SlideAndSwivel
• Tile
• TurnstileAndSlide

DatePicker/TimePicker

These are selection tools that mimic the native controls found within the WP7 OS. The innovative user experience allows for infinite looping of all the three Date (or Time) components - Day, Month, Year (or Hour, Minute, TimeOfDay) where the middle selected items in each of the three lists form the desired Date/Time.

Following is a list of the features that are present within these controls: 

• Support for user-defined order and visibility control over all of the three lists within the selector part (SelectorFormat). Bound to the Culture property by default but freely modifiable.
• DisplayValueFormat property to allow for custom formatting of the display value within the pickers.
• Extremely fast and smooth infinite-looping experience including animations and multiple lists manipulation. Here is a simple comparison table that lists the frame and fill rates of both controls while scrolling a list:
  
  

  	Frame rate	Fill rate
  Telerik	48-50	1.2099
  MS Toolkit	35-37	2.3592
  Notes	In the Toolkit’s control you will experience significant delay when switching among the looping lists within the selectors while scrolling.

• Value ranges – Minimum Value and Maximum Value properties to allow selection only within given range. 
• Culture property that allows for applying arbitrary culture that differs from the OS one.
• “Leap Year” notification in the “Years” list.
• Stand-alone “Selectors” (the popup part of the picker) that may be used without the pickers themselves.
  

ListPicker

Represents a Selector control that initially displays the currently selected item only and may be expanded in two different modes:

• Inline: when item count is less than or equal to 5 (or as specified by the InlineModeThreshold property) the picker’s height is increased so that all the items are fully visible on the screen.
• Popup: when item count is more than 5 (or as specified by the InlineModeThreshold property) all the items are displayed in a separate Popup (RadWindow instance).

Following are the features available in the control:

• InlineModeThreshold property to allow for arbitrary threshold that switches between the two modes.
• Open and Close animation for the Popup part of the picker. By default RadTileAnimation is used which makes the control's user experience identical to its equivalent found in the native OS.
• IsAnimationEnabled property to optionally enable or disable animations in both modes.
  

WrapPanel

A predefined Panel implementation that positions its child elements sequentially from left to right or top to bottom. When an element extends beyond the panel edge, it is positioned in the next row/column respectively. RadWrapPanel adds the IsAnimated property that allows child elements to be nicely animated when you add or remove elements dynamically.

If you haven't a copy of our RadControls for Windows Phone 7 grab one directly on your phone from the Market Place or download a fully functional trial of our current CTP2 release. Do not hesitate to share your thoughts and feedback with us on what can be further improved in our suite and what functionality we should add to meet your requirements and expectations.

I will keep this post updated when new equivalent controls are added in both suites so that you may easily find out the differences.