[Solved] StepProgressBar connection color settings

[Shiori]

Is it possible to add a setting that changes the color of the StepProgressBar connection when it is completed?
I would like to set this manually rather than through a theme.
Example: gray → blue

[Nadya | Tech Support Engineer]

Hello, Shiori,

Yes, it is possible to customize RadStepProgressBar and achieve a setting that changes the color of the StepProgressBar connection when it is completed. You can manually set the connection colors on the RadStepProgressBar. Each StepProgressItem has a Connection property (of type StepConnectionElement) with two key color properties:

• Connection.BackColor — the color of the pending/incomplete portion
• Connection.ProgressColor — the color of the completed portion

I prepared a sample example for your reference. Feel free to customize it further according to your needs:

private Color completedConnectionColor = Color.Green;
private Color pendingConnectionColor = Color.Gray;
private void StepProgressBar_StepProgressChanged(object sender, StepProgressChangedEventArgs e)
{
    ApplyConnectionColors((RadStepProgressBar)sender);
}
private void ApplyConnectionColors(RadStepProgressBar stepProgressBar)
{
    foreach (StepProgressItem step in stepProgressBar.Steps)
    {
        if (step.Connection == null)
            continue;

        if (step.Progress == 100)
        {
            step.Connection.ProgressColor = completedConnectionColor;
        }
        else
        {
            step.Connection.ProgressColor = pendingConnectionColor;
        }
    }
}

I hope this helps. Let me know if you have any other questions. 

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Shiori]

Hello. Thank you very much for your prompt response. It was extremely helpful, as I was able to complete the process I was seeking.

[Nadya | Tech Support Engineer]

Hi, Shiori,

I am glad to hear that the suggested solution helps you to complete your process. In case you have any other questions, do not hesitate to reach out again.

[Shiori]

Hello. I have another question.
Where can I change the border (outline) color of the StepIndicator?
Does the setting vary depending on whether the step is completed, incomplete, or focused?

[Nadya | Tech Support Engineer]

Hello, Shiori,

You can change the border color around the StepIndicator by using the BorderColor property. In the same ApplyConnectionColors(), you can set BorderColor as follows:

if (step.Progress == 100)
{
    step.StepIndicator.BorderColor = Color.Red;
    step.Connection.ProgressColor = completedConnectionColor;
}
else
{
    step.StepIndicator.BorderColor = Color.LightGray;
    step.Connection.ProgressColor = pendingConnectionColor;
}

I hope this helps.
Regards

[Shiori]

Thank you very much! It was very informative.