Progress bar customization

[Kavi]

Hi,
how do i change the color of the progress bar from default orange to red?
A possible solution would be appreciated.

Thanks.

[Miroslav]

Hello Kavi,

You can edit the ControlTemplate of the ProgressBar, it is a simple template.

I am pasting the default template here for you:

<LinearGradientBrush x:Key="ProgressBar_FillBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFFBA3" Offset="1" />
        <GradientStop Color="#FFFFFBDA" Offset="0" />
        <GradientStop Color="#FFFFD25A" Offset="0.43" />
        <GradientStop Color="#FFFEEBAE" Offset="0.42" />
    </LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBar_Background" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ProgressBar_OuterBorder" Color="#FF848484" />
<CornerRadius x:Key="ProgressBar_OuterBorderCornerRadius">2</CornerRadius>
<SolidColorBrush x:Key="ProgressBar_InnerBorder" Color="#FFFFFFFF" />
<CornerRadius x:Key="ProgressBar_InnerBorderCornerRadius">1</CornerRadius>


    <Style TargetType="telerik:RadProgressBar"
         >
        <Setter Property="Foreground" Value="{StaticResource ProgressBar_FillBrush}" />
        <Setter Property="Background" Value="{StaticResource ProgressBar_Background}" />
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Maximum" Value="100"/>
        <Setter Property="Orientation" Value="Horizontal"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="BorderBrush" Value="{StaticResource ProgressBar_OuterBorder}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadProgressBar">
                    <Grid>

                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="OrientationStates">
                                <vsm:VisualState x:Name="Horizontal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                       Storyboard.TargetName="transformationRoot"
                                                                       Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RotateTransform Angle="0" />
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Vertical">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                       Storyboard.TargetName="transformationRoot"
                                                                       Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RotateTransform Angle="-90" />
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Determinate"/>
                                <vsm:VisualState x:Name="Indeterminate">
                                    <Storyboard RepeatBehavior="Forever">
                                        <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                       Storyboard.TargetName="IndeterminateRoot"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                       Storyboard.TargetName="DeterminateRoot"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateGradientFill"
                                                                       Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X">
                                            <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                            <SplineDoubleKeyFrame KeyTime="00:00:.5" Value="20"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <telerikPrimitives:LayoutTransformControl x:Name="transformationRoot">
                            <Grid x:Name="Root">
                                <Border x:Name="ProgressBarTrack"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{StaticResource ProgressBar_OuterBorderCornerRadius}"/>
                                <Grid x:Name="ProgressBarRootGrid">
                                    <Border Margin="{TemplateBinding BorderThickness}"
                                            x:Name="ProgressBarRootGradient" Canvas.ZIndex="1"
                                            BorderBrush="{StaticResource ProgressBar_InnerBorder}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            CornerRadius="{StaticResource ProgressBar_InnerBorderCornerRadius}" />

                                    <Grid x:Name="IndeterminateRoot" Visibility="Collapsed">
                                        <Border Margin="{TemplateBinding BorderThickness}"
                                                x:Name="IndeterminateSolidFill"
                                                Opacity="1"
                                                RenderTransformOrigin="0.5,0.5"
                                                Background="{TemplateBinding Foreground}"
                                                CornerRadius="{StaticResource ProgressBar_OuterBorderCornerRadius}"/>
                                        <Rectangle Margin="{TemplateBinding BorderThickness}"
                                                x:Name="IndeterminateGradientFill"
                                                Opacity="0.7" RadiusX="1" RadiusY="1">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="20,1"
                                                             MappingMode="Absolute" SpreadMethod="Repeat">
                                                    <LinearGradientBrush.Transform>
                                                        <TransformGroup>
                                                            <TranslateTransform X="0"/>
                                                            <SkewTransform AngleX="-30"/>
                                                        </TransformGroup>
                                                    </LinearGradientBrush.Transform>
                                                    <GradientStop Color="#CCFFFFFF" Offset="0"/>
                                                    <GradientStop Color="#00FFFFFF" Offset=".50"/>
                                                    <GradientStop Color="#CCFFFFFF" Offset="1.10"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                    <Grid Margin="1" x:Name="DeterminateRoot">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Rectangle x:Name="SkipValueSpacer"
                                           Fill="Transparent" Width="0" Height="1"/>
                                        <Rectangle HorizontalAlignment="Left"
                                           Margin="{TemplateBinding BorderThickness}"
                                           x:Name="ProgressBarIndicator"
                                           Fill="{TemplateBinding Foreground}"
                                           StrokeThickness="0.5"
                                           RadiusX="1" RadiusY="1"
                                           Grid.Column="1"/>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </telerikPrimitives:LayoutTransformControl>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The brush that you need to edit in this case is: ProgressBar_FillBrush

All the best,
Miroslav
the Telerik team