Double Ended Infinite Scrolling With Virtualization

5 posts, 0 answers
  1. Michael
    Michael avatar
    16 posts
    Member since:
    Jul 2012

    Posted 30 Aug 2012 Link to this post

    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.
  2. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 30 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Michael
    Michael avatar
    16 posts
    Member since:
    Jul 2012

    Posted 30 Aug 2012 Link to this post

    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.
  5. Michael
    Michael avatar
    16 posts
    Member since:
    Jul 2012

    Posted 30 Aug 2012 Link to this post

    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
  6. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 03 Sep 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner