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

Display Label with ProgressBar Value


Product Version 2022.3.912
Product RadProgressBar for WPF


How to add label on top of the RadProgressBar indicating the current progress.


Add TextBlock element in a Canvas panel placed on top of the ProgressBar.

<Grid Width="250" Height="30"> 
    <telerik:RadProgressBar x:Name="progressBar" Minimum="0" Maximum="100"  
                            Value="40" ValueChanged="RadProgressBar_ValueChanged" 
        <TextBlock x:Name="progressBarLabel" VerticalAlignment="Center" Canvas.Top="6"/> 
In code-behind update the Text and the left position of the TextBlock in the canvas.

private void UpdateLabel() 
    double delta = progressBar.Maximum - this.progressBar.Minimum; 
    double normalizedValue = this.progressBar.Value / delta; 
    double offsetFromProgressValue = 5; 
    double labelOffset = this.progressBar.ActualWidth * normalizedValue; 
    this.progressBarLabel.Text = (normalizedValue * 100) + "%"; 
    Canvas.SetLeft(this.progressBarLabel, labelOffset + offsetFromProgressValue); 
private void RadProgressBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 
    if (this.progressBarLabel != null) 
private void progressBar_Loaded(object sender, RoutedEventArgs e) 
Custom ProgressBar Label
In this article