Home / Community & Support / Developer Productivity Tools Forums / Silverlight > ProgressBar > Progress bar customization

• Kavi

  Posted on Aug 4, 2010 (permalink)

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

  Reply

• Miroslav Miroslav

  Posted on Aug 9, 2010 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > ProgressBar > Progress bar customization