Changing Colors

Updated on Sep 24, 2025

There are two ways of changing the colors of a RadProgressBar – by setting the control's properties directly or by assigning a custom Style to the control. Both methods can be used either in procedural code or in XAML.

This article will demonstrate a few examples of using RadProgressBar's properties to change the appearance of the control.

• Background: Modifies the color of the progress track.

  Example 1: Setting a yellow background in XAML

  XAML

  	<UserControl.Resources>
  		<Style x:Key="myStyle" TargetType="telerik:RadProgressBar">
  			<Setter Property="Background" Value="Yellow" />
  		</Style>
  	</UserControl.Resources>
  	<Grid>
  		<!-- Set Background using a Style  -->
  		<telerik:RadProgressBar Style="{StaticResource myStyle}" />
  		<!-- Set Background directly -->
  		<telerik:RadProgressBar Background="Yellow" />
  	</Grid>

  Example 2: Setting a yellow background in code-behind

  C#

  	RadProgressBar myProgressBar = new RadProgressBar();
  	// Set Background directly 
  	myProgressBar.Background = new SolidColorBrush(Colors.Yellow);
  	// Set Background using a Style
  	Style myStyle = new Style(typeof(RadProgressBar));
  	myStyle.Setters.Add(new Setter(RadProgressBar.BackgroundProperty, new SolidColorBrush(Colors.Yellow)));
  	myProgressBar.Style = myStyle;

  VB.NET

  	Dim myProgressBar As New RadProgressBar()
  	' Set Background directly '
  	myProgressBar.Background = New SolidColorBrush(Colors.Yellow)
  	' Set Background using a Style'
  	Dim myStyle As New Style(GetType(RadProgressBar))
  	myStyle.Setters.Add(New Setter(RadProgressBar.BackgroundProperty, New SolidColorBrush(Colors.Yellow)))
  	myProgressBar.Style = myStyle			

  Here is how the control looks before and after the change of the Background property:

  Before:

  

  After:

  

• Foreground: Modifies the color of the progress indicator.

  Example 3: Setting a yellow indicator in XAML

  XAML

  	<Style x:Key="myStyle2" TargetType="telerik:RadProgressBar">
  		<Setter Property="Foreground" Value="Yellow" />
  	</Style>
  	<!--  Set Foreground using a Style  -->
  	<telerik:RadProgressBar Value="50" Style="{StaticResource myStyle2}" />
  	<!--  Set Foreground directly  -->
  	<telerik:RadProgressBar Value="50" Foreground="Yellow" />

  Example 4: Setting a yellow indicator in code-behind

  C#

  	// Set Foreground directly
  	myProgressBar.Foreground = new SolidColorBrush(Colors.Yellow);
  	// Set Foreground using a Style
  	Style myStyle2 = new Style(typeof(RadProgressBar));
  	myStyle2.Setters.Add(new Setter(RadProgressBar.ForegroundProperty, new SolidColorBrush(Colors.Yellow)));
  	myProgressBar.Value = 50;
  	myProgressBar.Style = myStyle2;

  VB.NET

  	' Set Foreground directly'
  	myProgressBar.Foreground = New SolidColorBrush(Colors.Yellow)
  	' Set Foreground using a Style'
  	Dim myStyle2 As New Style(GetType(RadProgressBar))
  	myStyle2.Setters.Add(New Setter(RadProgressBar.ForegroundProperty, New SolidColorBrush(Colors.Yellow)))
  	myProgressBar.Value = 50
  	myProgressBar.Style = myStyle2

  Here is how the control looks before and after the change of the Foreground property:

  Before:

  

  After:

  

• BorderBrush: Modifies the color of the RadProgressBar outer border.

  Example 5: Setting a red border brush in XAML

  XAML

  	<Style x:Key="myStyle3" TargetType="telerik:RadProgressBar">
  		<Setter Property="BorderBrush" Value="Red" />
  	</Style>
  	<!--  Set BorderBrush using a Style  -->
  	<telerik:RadProgressBar Value="50" Style="{StaticResource myStyle3}" />
  	<!--  Set BorderBrush directly  -->
  	<telerik:RadProgressBar Value="50" BorderBrush="Red" />

  Example 6: Setting a red border brush in code-behind

  C#

  	// Set BorderBrush  directly
  	myProgressBar.BorderBrush = new SolidColorBrush(Colors.Red);
  	// Set BorderBrush using a Style
  	Style myStyle3 = new Style(typeof(RadProgressBar));
  	myStyle3.Setters.Add(new Setter(RadProgressBar.BorderBrushProperty, new SolidColorBrush(Colors.Red)));
  	myProgressBar.Value = 50;
  	myProgressBar.Style = myStyle3;

  VB.NET

  	' Set BorderBrush  directly'
  	myProgressBar.BorderBrush = New SolidColorBrush(Colors.Red)
  	' Set BorderBrush using a Style'
  	Dim myStyle3 As New Style(GetType(RadProgressBar))
  	myStyle3.Setters.Add(New Setter(RadProgressBar.BorderBrushProperty, New SolidColorBrush(Colors.Red)))
  	myProgressBar.Value = 50;
  	myProgressBar.Style = myStyle3

Here is how the control looks before and after the change of the BorderBrush property:

Before:

After: