Edit "Pull To Refresh" Style

5 posts, 2 answers
  1. Lel12
    Lel12 avatar
    7 posts
    Member since:
    Sep 2013

    Posted 17 Mar 2014 Link to this post

    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 !
  2. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 20 Mar 2014 Link to this post

    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
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. DevCraft banner
  4. Lel12
    Lel12 avatar
    7 posts
    Member since:
    Sep 2013

    Posted 20 Mar 2014 in reply to Todor Link to this post

    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   ?  




  5. Answer
    Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 24 Mar 2014 Link to this post

    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
     

    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.

     
  6. Lel12
    Lel12 avatar
    7 posts
    Member since:
    Sep 2013

    Posted 24 Mar 2014 in reply to Deyan Link to this post

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