Modify the default text of the pull-to-refresh behaviour

13 posts, 1 answers
  1. ellic
    ellic avatar
    16 posts
    Member since:
    Oct 2011

    Posted 19 Sep 2012 Link to this post

    I'm using the DataBoundListBox, when I pull down the DataBoundListBox, the text of the tip is "pull to refresh" and "release to refresh", besides, they aren't placed in the center of this tip-block.

    I want to change the  "pull to refresh" and "release to refresh" to other text, so what's the right way to do it.

    Ps. There is another problem, after the refresh action had completed, the "loading" circle indicator still shown up, which is supposed that it would disappear.

    Thanks in advance.
  2. Answer
    Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 24 Sep 2012 Link to this post

    Hello Ellic,

    We have a couple of help articles describing how to use the pull-to-refresh feature:

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

    You can change the style of the PullToRefresh indicator by setting the PullToRefreshIndicatorStyle property exposed by RadDataBoundListBox. Here is its default style:

    <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>

    You can reuse it in your application.

    Also, to change the text in the indicator you will need to provide a custom string loader that returns the new text or directly set the Text properties of the elements that display these labels via the style. These elements are called PART_RefreshInfoLabel and PART_RefreshTimeLabel. Providing a custom string loader for a control is described here:

    http://www.telerik.com/help/windows-phone/localization-string-loaders.html

    You will need to use the PrimitivesLocalizationManager class to do this.

    I hope this helps.

    Kind regards,
    Deyan
    the Telerik team

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. DevCraft banner
  4. ellic
    ellic avatar
    16 posts
    Member since:
    Oct 2011

    Posted 25 Sep 2012 Link to this post

    Hi, Deyan

    Thanks for your reply, it helped me a lot.

    And I have another question. The DataBoundListBox worked fine except that the scrollbar's scroll-behaviour seemed to have some problems. When I scrolled down or up the DataBoundListBox , the scrollbar didn't scroll smoothly, it just scroll-stop-scroll-stop-scr....(Please forgive my poor English decription >_< ) . So, it's a known problem or something else?

    Thanks.
  5. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 26 Sep 2012 Link to this post

    Hi Ellic,

    Thanks for writing back.

    The behavior of the scrollbar is by design. It is related to the way we have implemented our scrolling in RadDataBoundListBox/RadJumpList using the native ScrollViewer component. As you already know, in Windows Phone Mango Microsoft introduced performance improvements in the scrolling behavior by porting part of the logic related to scrolling in the ScrollViewer component to another, so-called Manipulation Thread, which is independent from the UI thread. It is in this thread where scrolling parameters are calculated. Since now scrolling happens on another thread, the UI thread does not know anything about the scrolling parameters unless they're synched. Synching is done in certain intervals but not constantly and therefore from UI perspective we do not know the extact scrolling position to update the scrollbar as it appears on the native ScrollViewer.

    Here is some more information on this:

    http://blogs.msdn.com/b/slmperf/archive/2011/06/02/listbox-scrollviewer-performance-improvement-for-mango-and-how-it-impacts-your-existing-application.aspx

    I hope this answers your question.

    Regards,
    Deyan
    the Telerik team

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  6. ellic
    ellic avatar
    16 posts
    Member since:
    Oct 2011

    Posted 09 Oct 2012 Link to this post

    Hi, Deyan

    Until now I have the time to modify the sytle of the telerikListBox:PullToRefreshIndicatorControl, and what's the namespace(xmlns) of the telerikListBox?

    Thanks.

    Updated:I've solved this problem, thanks all the same.
  7. Matti
    Matti avatar
    8 posts
    Member since:
    Sep 2013

    Posted 24 Oct 2013 Link to this post

    I also am facing the same problem with templating databoundlistbox. What is the xmlns namespace for teleriklistbox?

    Styling the databound list box requires this information, and I don't seem to find it anywhere.



    Edit: Found it:



    xmlns:telerikListBox="clr-namespace:Telerik.Windows.Controls.DataBoundListBox;assembly=Telerik.Windows.Controls.Primitives"



  8. Todor
    Admin
    Todor avatar
    778 posts

    Posted 24 Oct 2013 Link to this post

    Hi Matti,

    This is the namespace, you are looking for:

    xmlns:telerikListBox="clr-namespace:Telerik.Windows.Controls.DataBoundListBox;assembly=Telerik.Windows.Controls.Primitives"

    Let me know if you need further assistance.
     
    Regards,
    Todor
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. Fredrik
    Fredrik avatar
    54 posts
    Member since:
    Sep 2010

    Posted 09 Dec 2013 Link to this post

    Hello !!

    I have succesfully managed to changed the text "pull to refresh" and "release to refresh" to custom texts by modifying the standardstyle.
    But how about the indicators "loading" text?
    It always shows the text "loading" even if I modifying the content property off the progress indicator (then it shows my own content text AND the text "loading")

    Another thing I discovered is that the my changed text of "pull to refresh" is not changed when slowly pulling down the first time until the visualstate is changed to "RefreshStarting".
    Modifying the "Normal" state is not doing the trick?!

    Regards

    Fredrik
  10. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 12 Dec 2013 Link to this post

    Hi Fredrik,
    The "loading" label is localized and to change it you'll have to create a custom string loader.
    To learn how to do that, please take a look at this article: String Loaders in RadControls for WindowsPhone
    Then refer to the localization strings for DataBoundListBox
    Let us know how it goes.

    Regards,
    Kiril Stanoev
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  11. Fredrik
    Fredrik avatar
    54 posts
    Member since:
    Sep 2010

    Posted 12 Dec 2013 Link to this post

    Hi Kiril !!

    Worked great .....thanks.
  12. Marcin
    Marcin avatar
    1 posts
    Member since:
    Oct 2013

    Posted 21 Mar 2014 Link to this post

    Sorry, but this is sick. All common texts should be implemented as properties of controls. Tons of code to changle a little element...
  13. Todor
    Admin
    Todor avatar
    778 posts

    Posted 26 Mar 2014 Link to this post

    Hello Marcin,

    Thank you for your feedback.

    Very often we provide a way to change the text through a property as well. However, the localization approach is not very complex and doesn't require a lot of code. If you don't like the StringLoaders method, you can use ResourceManagers as shown here. With this approach, if you want to change just one element, you simply need to add it in a Resource file and set the PrimitivesLocalizationManager to the resource manager of your resource file. For example if your resource file is called PrimitivesResources, that's how you set the PrimitivesLocalizationManager:

    PrimitivesLocalizationManager.Instance.ResourceManager = PrimitivesResources.ResourceManager;

    If you want to customize more strings, you will just need to add one entry for each of them in the resource file that you have already created.

    I hope this information helps.

    Regards,
    Todor
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  14. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 16 Jun 2014 Link to this post

    Nice and easy solution.

    I already had a resource dictionary, just added needed strings ( i was localizing PullToRefresh indicator: http://www.telerik.com/help/windows-phone/localizationstrings-listbox.html ) and enabled it via LocalizationManager.GlobalResourceManager = Resource1.ResourceManager; ( http://www.telerik.com/help/windows-phone/localization-resource-managers.html ) and that's it.
Back to Top
DevCraft banner