The standard Silverlight for Windows Phone ListBox, as many of you already now, can be easily tuned to use a different Items Panel from the standardized Stack Panel. This is a really very powerful feature that many of pointed out was missing in RadDataBoundListBox. Since the WrapPanel is another commonly used layout panel in the ListBox context, many of you asked for similar feature in RadDataBoundListBox provided that it further extends to supporting the powerful UI virtualization approach that we already use in our control.

Some time ago Georgi Atanasov from my team gave a very thorough explanation of how to mimic a Wrap Layout in RadDataBoundListBox. This is a really nice approach but it is limited and also requires some additional coding. Now, the Wrap Layout support in Telerik’s listbox is fully functional, supporting Horizontal and Vertical orientation and utilizing the UI virtualization mechanism.

As opposed to the standard ListBox control, our terminology here is slightly different which comes from our different UI virtualization implementation. We call the way we order items in the viewport a Virtualization Strategy, so the standard stack mode comes as StackVirtualizationStrategy and the wrap mode is WrapVirtualizationStrategy. Although these are the names of the actual classes that hold the implementation, our API uses VirtualizationStrategyDefinition classes that simply describe a virtualization strategy instance. Currently the following two definitions are shipped:

  • StackVirtualizationStrategyDefinition
  • WrapVirtualizationStrategyDefinition

Here’s a quick XAML example of how activating the Wrap mode in RadDataBoundListBox is done: 

 

<telerikPrimitives:RadDataBoundListBox x:Name="listBox">
    <telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
        <telerikPrimitives:WrapVirtualizationStrategyDefinition Orientation="Horizontal"/>
    </telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>

</telerikPrimitives:RadDataBoundListBox>

 

What the above snippet does is setting the VirtualizationStrategyDefinition property (now exposed by RadDataBoundListBox' Q1 2012 version) to an instance of the WrapVirtualizationStrategyDefinition class. The latter, as its name suggests, represents a simple definition for a virtualization strategy, i.e. instructs RadDataBoundListBox to order its visual items in Wrap mode and also contains property values that specify the wrap mode behavior. For now, the only option is to choose between Horizontal or Vertical orientation.

If you are already eager to check out the Wrap Mode (currently in Beta) for RadDataBoundListBox, go download our latest release and get back to us with your feedback so that we can put a final touch to it based on your suggestions!


Deyan Ginev
About the Author

Deyan Ginev

Deyan has been with Telerik for more than ​six years working on several different products with main focus on mobile technologies. Deyan is currently working on NativeScript– a platform for developing native mobile apps with JavaScript. Find him on Twitter via
@deyan_ginev.

Related Posts

Comments

Comments are disabled in preview mode.