This is a migrated thread and some comments may be shown as answers.

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

12 Answers 222 Views

DataBoundListBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

12 Answers, 1 is accepted

Accepted

answered on 24 Sep 2012, 10:25 AM

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.

answered on 26 Sep 2012, 07:14 AM

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.

answered on 09 Dec 2013, 10:20 AM

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

answered on 26 Mar 2014, 04:00 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

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

12 Answers, 1 is accepted