Edit this page

Changing colors

There are two ways of changing the colors of a RadProgressBar – by setting the control’s properties or by assigning a custom Style to the control. Both methods can be used either in procedural code or in XAML. The latter is the more flexible approach but requires more knowledge and generally takes a little more effort. Alternatively, by simply setting the appropriate properties of the RadProgressBar, one can quickly and easily modify the coloring of the control to his liking, although there are some limitations to what can be modified.

Here is a list of the RadProgressBar properties that affect the coloring of the control:

  • Background – modifies the color of the progress track.

    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>
    

    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:
    Rad Progress Bar default
    After:
    Rad Progress Bar yellow background

  • Foreground – modifies the color of the progress indicator.

    XAML

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

    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.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.Style = myStyle2
    

    Here is how the control looks before and after the change of the Foreground property:
    Before:*
    Rad Progress Bar default
    After:
    Rad Progress Bar yellow foreground

  • BorderBrush – modifies the color of the RadProgressBar outer border.

    XAML

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

    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.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.Style = myStyle3
    

    Here is how the control looks before and after the change of the BorderBrush property:
    Before:
    Rad Progress Bar default
    After:
    Rad Progress Bar red border