Edit "Pull To Refresh" Style

[Lel12]

Hello , 

I would like to  change the  color of the  images that represent the " Pull To Refresh"  Action (the two arrows and the circle)   



I read this article that shows how to change the " <Setter Property="RefreshTimeLabelFormat" Value="last refresh time: {0:H:mm}"/>"


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


Which property do I have to edit to change the images ?  Can I just change the colors or do I have to add new images ?   


Thank you !

[Todor]

Hello Amine,

Thank you for your question.

You can use the PullToRefreshIndicatorStyle property to adjust the style of the indicator. Here's the default style:

<Style x:Key="IndicatorStyle" 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>
                                    <DoubleAnimation
                                    Storyboard.TargetName="PART_Indicator"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1"
                                    Duration="0:0:1.5">
                                        <DoubleAnimation.EasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <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>
                                    <DoubleAnimation
                                    Storyboard.TargetName="PART_Indicator"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1"
                                    Duration="0:0:0.5">
                                        <DoubleAnimation.EasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <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>
                                    <DoubleAnimation
                                    Storyboard.TargetName="PART_Indicator"
                                    Storyboard.TargetProperty="Opacity"
                                    To="0"
                                    Duration="0:0:0.5">
                                        <DoubleAnimation.EasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                    <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 have highlighted the places where the color of the different elements is defined. You can change these value to the colors of your choice and add the modified style to the Resources of your Page/Application. Then you can apply the style to RadDataBoundListBox:

<telerikPrimitives:RadDataBoundListBox
    PullToRefreshIndicatorStyle="{StaticResource IndicatorStyle}"
    IsPullToRefreshEnabled="True" />

I hope this information helps.

Regards,
Todor
Telerik

 

 

[Lel12]

Thank you for your answer !   I have th following problem when I try to add this style. 


  <DiscreteObjectKeyFrame.Value>
                                                        <s:Boolean>
                                                            False
                                                        </s:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>


  Visual Studio tells that  the namespace "s"  is not defined and the Boolean is not supported by Visual Studio. 

Do I have to reference another assembly   ?  

[Deyan]

Hello Amine,

You should simply define the namespace on your page where the other namespaces are defined. You should call the new namespace "s" and it should point to the System namespace from the mscorlib assembly which is already referenced in your project.

I hope this helps.

Regards,
Deyan
Telerik

 

 

[Lel12]

Thank you it is working now i had to add the mscorlib reference which was missing !