Progress bar customization

2 posts, 0 answers
  1. Kavi
    Kavi avatar
    25 posts
    Member since:
    Aug 2009

    Posted 04 Aug 2010 Link to this post

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

    Thanks.
  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 09 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
Back to Top