Double Ended Infinite Scrolling With Virtualization

[Michael]

I have created a project using the RadDataboundListbox that uses the OnDemandAutomatic virtualization mode.  This works great.  My question is,can I implement this functionality at the begining of the list?  Effectively  giving infite scrolling both ways.  I realize I would need to place the current postion of the listBox to somewhere in the middle of the data on load, ie.  similar the build in Agenda view of the Calendar application.  If this is possible can you offer an example or best practices?  Thanks.

[Deyan]

Hello Michael,

Thanks for writing and for your questions.

The OnDemand virtualization is currently working only when you reach the end of the scrollable list. We have another feature in RadDataBoundListBox that pretty much resembles the OnDemand mode but at the beginning of the list - the Pull to Refresh functinonality. The small difference is that when you are using the Pull To Refresh feature your end users will have to manually request data as opposed to the OnDemandAutomatic mode where data is automatically requested when you reach the end of the list.

You can read more about the PullToRefresh feature here:

http://www.telerik.com/help/windows-phone/raddataboundlistbox-features-pulltorefresh.html

Since your scenario is interesting, we will consider porting the OnDemand approach to work for the beginning of the list as well.

I hope this helps.

Regards,
Deyan
the Telerik team

[Michael]

Thank you for your reply.  The provided solution is definitely usable.  I think the ability to have a double ended infinitely scrolling list would be a nice feature for the future, any date ordered lists would benefit from this.

[Michael]

One other question, I want to customize the Pull To Refresh indicator to some static text, "Load 3 Months More" for example.  I've tried this approach without luck.  Any suggestions?


http://www.telerik.com/help/windows-phone/raddataboundlistbox-features-pulltorefresh.html

[Deyan]

Hi Michael,

Thanks for writing and for your question.

You can use the PullToRefreshIndicatorStyle property to apply a style to the pull-to-refresh indicator and change its contents.

I am pasting here the default style for this element for your convenience. You can change it as you require:

<Style TargetType="telerikListBox:PullToRefreshIndicatorControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikListBox:PullToRefreshIndicatorControl">
                    <Border
                        RenderTransformOrigin="1, 0"
                        x:Name="PART_LayoutRoot"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                        <Border.RenderTransform>
                            <RotateTransform x:Name="Rotation"/>
                        </Border.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="DefaultStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Indicator" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RefreshTimeLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BusyIndicator" Storyboard.TargetProperty="IsRunning">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <s:Boolean>
                                                        False
                                                    </s:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation
                                            Storyboard.TargetName="IndicatorRotate"
                                            Storyboard.TargetProperty="Angle"
                                            To="0"
                                            Duration="0:0:0.5">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="RefreshStarting">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Indicator" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RefreshTimeLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BusyIndicator" Storyboard.TargetProperty="IsRunning">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <s:Boolean>
                                                        False
                                                    </s:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation
                                            Storyboard.TargetName="IndicatorRotate"
                                            Storyboard.TargetProperty="Angle"
                                            To="-180"
                                            Duration="0:0:0.5">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Refreshing">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="IndicatorRotate"
                                            Storyboard.TargetProperty="Angle"
                                            To="0"
                                            Duration="0:0:0.5">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Indicator" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RefreshTimeLabel" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BusyIndicator" Storyboard.TargetProperty="IsRunning">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <s:Boolean>
                                                        True
                                                    </s:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="OrientationStates">
                                <VisualState x:Name="Vertical">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Rotation" Storyboard.TargetProperty="Angle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Horizontal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Rotation" Storyboard.TargetProperty="Angle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="-90"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="NormalLayout" Margin="{StaticResource PhoneHorizontalMargin}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter
                                    x:Name="PART_Indicator"
                                    Margin="{StaticResource PhoneMargin}"
                                    RenderTransformOrigin="0.5, 0.5">
                                <ContentPresenter.ContentTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Path Data="F1M69,689.3457L81.369,699.0007L86.128,695.3747L63,677.9087L63,712.9997L69,708.7457z" Fill="{StaticResource PhoneSubtleBrush}" Height="35.091" Opacity="0.33000200986862183" Stretch="Fill" Width="23.128" HorizontalAlignment="Left" Margin="16,3.334,0,0" UseLayoutRounding="False" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                                                <Path.RenderTransform>
                                                    <CompositeTransform Rotation="90" TranslateX="-5.706" TranslateY="10.294"/>
                                                </Path.RenderTransform>
                                            </Path>
                                            <Path Data="F1M85.5693,707.2471L72.0003,717.5881L72.0003,697.0001z" Fill="{StaticResource PhoneForegroundBrush}" Height="20.588" Stretch="Fill" Width="13.569" HorizontalAlignment="Left" Margin="25,22.425,0,0" UseLayoutRounding="False" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                                                <Path.RenderTransform>
                                                    <CompositeTransform Rotation="90" TranslateX="-21.765" TranslateY="2.675"/>
                                                </Path.RenderTransform>
                                            </Path>
                                            <Path Data="F1M47,699C47,700.1,47.9,701,49,701L60,701L60,691L49,691C47.9,691,47,691.9,47,693z" Fill="{StaticResource PhoneSubtleBrush}" Height="10" Opacity="0.33000200986862183" Stretch="Fill" Width="13" HorizontalAlignment="Left" Margin="0,16.425,0,0" UseLayoutRounding="False" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
                                                <Path.RenderTransform>
                                                    <CompositeTransform Rotation="90" TranslateX="14.812" TranslateY="-11.316"/>
                                                </Path.RenderTransform>
                                            </Path>
                                        </Grid>
                                    </DataTemplate>
                                </ContentPresenter.ContentTemplate>
                                <ContentPresenter.RenderTransform>
                                    <RotateTransform x:Name="IndicatorRotate" Angle="0"/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>

                            <telerikPrimitives:RadBusyIndicator
                                AnimationStyle="AnimationStyle7"
                                ContentPosition="Right"
                                Foreground="{StaticResource PhoneForegroundBrush}"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Stretch"
                                VerticalContentAlignment="Top"
                                Content="{x:Null}"
                                x:Name="BusyIndicator"/>
                            <StackPanel
                                VerticalAlignment="Center"
                                Grid.Column="1"
                                Orientation="Vertical"
                                Margin="30, 0, 0, 0">
                                <TextBlock
                                        x:Name="PART_RefreshInfoLabel"
                                        FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                        FontSize="{StaticResource PhoneFontSizeMediumLarge}"/>
                                <TextBlock
                                        x:Name="PART_RefreshTimeLabel"
                                        FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                        FontSize="{StaticResource PhoneFontSizeSmall}"
                                        Foreground="{StaticResource PhoneSubtleBrush}"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I hope this helps.

Kind regards,
Deyan
the Telerik team