New to Telerik UI for WinForms? Download free 30-day trial

How to Add Callout for StepProgressBar

Environment

Product Version Product Author
2022.1.222 RadStepProgressBar for WinForms Desislava Yordanova

Description

By default, RadStepProgressBar offers tooltips. However, it may be required to display more detailed information for the different steps. This article demonstrates a sample approach to how to achieve it.

Solution

It is appropriate to use a RadCallout for each step. The Getting Started with Callout article demonstrates how to build the callout. Once you are done with the design for the RadCallout, iterate the RadStepProgressBar.Steps and subscribe to the MouseEnter event where the callout is shown.

callout-for-stepprogresbar 001


public RadForm1()
{
    InitializeComponent(); 

    foreach (StepProgressItem item in this.radStepProgressBar1.Steps)
    {
        item.StepIndicator.MouseEnter += StepIndicator_MouseEnter; 
    }
}

private void StepIndicator_MouseEnter(object sender, EventArgs e)
{
    if (this.radCallout1.CalloutForm.Visible)
    {
        this.radCallout1.Close();
    }

    this.radCallout1.Show(sender as StepItemIndicatorElement);
} 


Public Sub New()
    InitializeComponent()

    For Each item As StepProgressItem In Me.RadStepProgressBar1.Steps
        AddHandler item.StepIndicator.MouseEnter, AddressOf StepIndicator_MouseEnter
    Next
End Sub

Private Sub StepIndicator_MouseEnter(ByVal sender As Object, ByVal e As EventArgs)
    If Me.RadCallout1.CalloutForm.Visible Then
        Me.RadCallout1.Close()
    End If

    Me.RadCallout1.Show(TryCast(sender, StepItemIndicatorElement))
End Sub

See Also

In this article