This is a migrated thread and some comments may be shown as answers.

Progress bar customization

1 Answer 185 Views

ProgressBar

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

1 Answer, 1 is accepted

answered on 09 Aug 2010, 05:29 PM

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="*" />

</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>

</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