Change color of the spinner

2 posts, 1 answers
  1. Antonin
    Antonin avatar
    1 posts
    Member since:
    Mar 2017

    Posted 03 Apr Link to this post

    Hi, I would like to change the color of my BusyIndicator. I have been able to change the background and the stroke but I can't modify the "spinner" colors.

    This is quite a simple question that have been answered several times but I don't understand how to implement the solutions I saw in my code. Maybe you will be able to explain me the solution for the following code:

    <ControlTemplate x:Key="GridViewLoadingIndicatorTemplate" TargetType="{x:Type grid:GridViewLoadingIndicator}">
            <Border x:Name="BusyIndicatorBackground" Background="#F1F1F1" Opacity="0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Idle"/>
                        <VisualState x:Name="Loading">
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BusyIndicatorBackground" Storyboard.TargetProperty="Opacity">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BusyIndicator" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="180"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Path x:Name="BusyIndicator"
                    Stretch="Fill"
                    Stroke="{TemplateBinding BorderBrush}"
                    StrokeThickness="{TemplateBinding BorderThickness}"
                    Fill="{TemplateBinding Background}"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Width="36"
                    Height="36"
                    Data="M18,5.0000002 C10.820298,5 5,10.820298 5.0000002,18 5,25.179701 10.820298,31 18,31 25.179701,31 31,25.179701 31,18 31,10.820298 25.179701,5 18,5.0000002 z M18,0 C27.941126,0 36,8.0588746 36,18 36,27.941126 27.941126,36 18,36 8.0588746,36 0,27.941126 0,18 0,8.0588746 8.0588746,0 18,0 z"
                    RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-180"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
            </Border>
        </ControlTemplate>
        <Style x:Key="GridViewLoadingIndicatorStyle" TargetType="{x:Type grid:GridViewLoadingIndicator}">
            <Setter Property="Template" Value="{StaticResource GridViewLoadingIndicatorTemplate}"/>
            <Setter Property="Background" Value="{StaticResource GridView_LoadingIndicatorBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource GridView_LoadingIndicatorBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>

     

    Thank you,

    Antonin Charrier

     

    PS: I'm quite new to WPF and Telerik, I think you understood it

  2. Answer
    Martin
    Admin
    Martin avatar
    99 posts

    Posted 06 Apr Link to this post

    Hello Antonin,

    I can guess that you are using some of our older themes seen from the code snippet. The trick there is that the GridView_LoadingIndicatorBackground is actually a LinearGradientBrush, which when applied to the path (spinner) shows a spinning effect because of the difference in the colors. If you are to pass to the GridViewLoadingIndicator's Background a SolidColorBrush, it will technically still spin, but you will not see any difference.

    For the Office_Black theme the brush is:
    <LinearGradientBrush x:Key="GridView_LoadingIndicatorBackground" EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFFFBE00" />
      <GradientStop Color="#FFFFFBA3" Offset="0.5" />
      <GradientStop Offset="1" Color="#99FFFFFF" />
    </LinearGradientBrush>

    So you can modify the colors in that and pass that to the Background of the GridViewLoadingIndicator (is the case in which you would like to change only the colors and not the structure of the spinner).

    Note that you would need to make the style either implicit or pass it with a reference to the GridViewLoadingIndicator in order for it to apply.

    Regards,
    Martin
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top