Download the demo project
Download the Q1 2012 BETA
RadSlideView is one of the major and widely used controls in our RadControls for Windows Phone tools. For the Q1 2012 BETA release we completely revamped its architecture and API design to meet all the feedback and feature requests we gathered from our users. Instead of inheriting from RadLoopingList, the control now inherits from the abstract DataControlBase class and exposes properties and methods similar to the ones found in our RadDataBoundListBox. We believe this approach will have better adoption and will be more intuitive to you – our users.
This re-design allowed us to improve performance significantly as well as to add many unique new features. One of these features is the two different item realization approaches that allow you put the control in a special mode that will load only the viewport item, which automatically boosts the overall loading time of the control for heavy data items. This mode, combined with the ItemPreviewTemplate property will enable you to implement complex visual trees without sacrificing performance. Additionally, when this special mode is applied, each item, when about to become the viewport one, will display a built-in busy indicator, running until the item is prepared for rendering. Then the newly realized item will be brought into view using a load animation, which can be any valid RadAnimation instance.
The following snippet demonstrates how to enable the viewport item realization mode:
<
telerikPrimitives:RadSlideView.ItemTemplate
>
<
DataTemplate
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Image
Source
=
"Images/OnDemand/wide-life-logo.png"
Stretch
=
"None"
HorizontalAlignment
=
"Left"
Canvas.ZIndex
=
"20"
/>
<
StackPanel
HorizontalAlignment
=
"Right"
VerticalAlignment
=
"Top"
Orientation
=
"Horizontal"
Margin
=
"0,0,4,8"
>
<
Image
Source
=
"Images/OnDemand/arrow-left.png"
Stretch
=
"None"
Tap
=
"OnLeftArrowTap"
/>
<
Image
Source
=
"Images/OnDemand/arrow-right.png"
Stretch
=
"None"
Tap
=
"OnRightArrowTap"
/>
</
StackPanel
>
<
Image
Source
=
"{Binding ImageUri}"
Stretch
=
"None"
Grid.Row
=
"1"
Margin
=
"12,-36,0,0"
/>
<
Grid
Grid.Row
=
"2"
Background
=
"{StaticResource PhoneBackgroundBrush}"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
Image
Source
=
"Images/OnDemand/yellow-stroke-2.png"
Stretch
=
"None"
Margin
=
"12,-20,0,0"
Tap
=
"OnTopStrokeTap"
/>
<
ScrollViewer
Grid.Row
=
"1"
HorizontalScrollBarVisibility
=
"Disabled"
VerticalScrollBarVisibility
=
"Auto"
Margin
=
"36,0,0,0"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
TextBlock
Text
=
"{Binding Title}"
FontSize
=
"{StaticResource PhoneFontSizeExtraLarge}"
FontFamily
=
"{StaticResource PhoneFontFamilyLight}"
/>
<
TextBlock
Text
=
"Text: Wikipedia"
Grid.Row
=
"1"
FontSize
=
"{StaticResource PhoneFontSizeSmall}"
Foreground
=
"{StaticResource PhoneSubtleBrush}"
Margin
=
"3,4,0,4"
/>
<
TextBlock
Text
=
"{Binding Content}"
Grid.Row
=
"2"
FontSize
=
"{StaticResource PhoneFontSizeMedium}"
Width
=
"432"
TextWrapping
=
"Wrap"
Margin
=
"3,0,0,0"
/>
</
Grid
>
</
ScrollViewer
>
</
Grid
>
</
Grid
>
</
DataTemplate
>
</
telerikPrimitives:RadSlideView.ItemTemplate
>
Since only the viewport item is realized, we will want to display some additional information on the adjacent off-screen items what will be loaded once one of these items become the viewport (selected) one. The ItemPreviewTemplate property will help us in this case:
<
telerikPrimitives:RadSlideView.ItemPreviewTemplate
>
<
DataTemplate
>
<
Grid
>
<
StackPanel
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Top"
Orientation
=
"Horizontal"
>
<
Image
Source
=
"Images/OnDemand/wide-life-logo.png"
Stretch
=
"None"
/>
<
Image
Source
=
"{Binding PreviewImageUri}"
Stretch
=
"None"
/>
<
Image
Source
=
"Images/OnDemand/yellow-triangle.png"
Stretch
=
"None"
/>
<
TextBlock
Text
=
"{Binding Title}"
FontSize
=
"{StaticResource PhoneFontSizeMediumLarge}"
Margin
=
"12,0,0,-6"
VerticalAlignment
=
"Bottom"
/>
</
StackPanel
>
<
StackPanel
HorizontalAlignment
=
"Right"
VerticalAlignment
=
"Top"
Orientation
=
"Horizontal"
Margin
=
"0,0,4,8"
>
<
Image
Source
=
"Images/OnDemand/arrow-left.png"
Stretch
=
"None"
/>
<
Image
Source
=
"Images/OnDemand/arrow-right.png"
Stretch
=
"None"
/>
</
StackPanel
>
</
Grid
>
</
DataTemplate
>
</
telerikPrimitives:RadSlideView.ItemPreviewTemplate
>
Next we may want to alter the default style of each SlideViewItem container in order to change the busy indicator appearance as well as the load animation:
<
telerikPrimitives:RadSlideView.ItemContainerStyle
>
<
Style
TargetType
=
"telerikSlideView:SlideViewItem"
>
<
Setter
Property
=
"BusyIndicatorStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikPrimitives:RadBusyIndicator"
>
<
Setter
Property
=
"InitialDelay"
Value
=
"0:0:0"
/>
<
Setter
Property
=
"AnimationStyle"
Value
=
"AnimationStyle7"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"LoadAnimation"
>
<
Setter.Value
>
<
telerikCore:RadScaleAnimation
StartScaleX
=
"0.5"
StartScaleY
=
"0.5"
EndScaleX
=
"1"
EndScaleY
=
"1"
/>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
telerikPrimitives:RadSlideView.ItemContainerStyle
>
As you can see practically any part of the visual tree may be modified with ease, making the entire process of setting-up the desired appearance a snap. Attached is the complete project that demonstrates all these features so that you can explore the code for yourself. You will need to get your hands on the Q1 2012 BETA in order to run the project. Please, let us know what you think of these new features as well as what may be further added/improved in the control.
Download the demo project
Download the Q1 2012 BETA
We have also left some new cool stuff as a surprise for the release. If you’d like to see all the new bits, make sure to sign-up for the Release Webinar Week, February 20-22. This 3-day event is packed with hour-long webinar sessions on the coolest new features shipping with the Q1 2012 release. One lucky winner from each webinar will leave with a Telerik Ultimate Collection license worth $1999. To enter the drawing and participate in the Q&A session, you must attend the live webinar.
Register at: http://www.telerik.com/support/webinars.aspx
Georgi worked at Progress Telerik to build a product that added the Progress value into the augmented and virtual reality development workflow.