Changing Colors

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

        <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

        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; 
    
        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.

    Example 3: Setting a yellow indicator in 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

        // 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; 
    
        ' 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:

    Rad Progress Bar default

    After:

    Rad Progress Bar yellow foreground

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

    Example 5: Setting a red border brush in 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

        // 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; 
    
        ' 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:

    Rad Progress Bar default

    After:

    Rad Progress Bar red border

In this article