Change color of the spinner

[Antonin]

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

[Martin]

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