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 


About the Author

Georgi Atanasov


Related Posts

Comments

Comments are disabled in preview mode.