Changing Selected Color of Telerik RadStepProgressBar

[Jestin]

Hi Team,

We are using RadStepProgressBar in our project, and we would like to change the selected color from Yellow to Blue. However, we have not been able to find a solution.

Here is the current XAML code:

<telerik:RadStepProgressBar  
    Background="AliceBlue"
    VerticalAlignment="Top" 
    x:Name="stepProgressBar" 
    Grid.Row="0" 
    TrackFill="LightGreen" 
    SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
    ItemsSource="{Binding OrderSteps}" 
    DisplayMemberPath="Name" 
    AnimationDuration="0.6"
    Margin="0 0 0 0">
    <telerik:RadStepProgressBar.ItemContainerStyle>
        <Style TargetType="telerik:RadStepProgressBarItem">
            <Setter Property="TextBlock.TextAlignment" Value="Center" />
            <Setter Property="TextBlock.Foreground" Value="White" />
            <Setter Property="ShapeStroke" Value="Black" />
            <Setter Property="Background" Value="DarkSlateGray" />
            <Setter Property="TextBlock.TextAlignment" Value="Center" />
        </Style>
    </telerik:RadStepProgressBar.ItemContainerStyle>
</telerik:RadStepProgressBar>

 

Could you please assist us in changing the selected color to Blue?

Thank you.

[Stenly]

Hello Jestin,

To achieve this requirement, set the CheckedBackgroundBrush and CheckedBrush properties of the ThemeHelper class inside the Style that targets the RadStepProgressBarItem type.

The following code snippet shows this suggestion's implementation:

xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"

<telerik:RadStepProgressBar.ItemContainerStyle>
    <Style TargetType="telerik:RadStepProgressBarItem">
        <Setter Property="TextBlock.TextAlignment" Value="Center" />
        <Setter Property="TextBlock.Foreground" Value="White" />
        <Setter Property="ShapeStroke" Value="Black" />
        <Setter Property="Background" Value="DarkSlateGray" />
        <Setter Property="TextBlock.TextAlignment" Value="Center" />
        <Setter Property="helpers:ThemeHelper.CheckedBackgroundBrush" Value="LightBlue"/>
        <Setter Property="helpers:ThemeHelper.CheckedBrush" Value="Blue"/>
        
        <!--Optionally, you can set the MouseOverBackgroundBrush and MouseOverBrush properties to change the mouse-over visual state colors-->
        <Setter Property="helpers:ThemeHelper.MouseOverBackgroundBrush" Value="LightGreen"/>
        <Setter Property="helpers:ThemeHelper.MouseOverBrush" Value="DarkGreen"/>
    </Style>
</telerik:RadStepProgressBar.ItemContainerStyle>

The produced result is as follows:

I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik

[Jestin]

Thank you very much Stenly, It worked.