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

Display Label with ProgressBar Value

Environment

Product Version 2022.3.912
Product RadProgressBar for WPF

Description

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

Solution

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" 
                            Loaded="progressBar_Loaded"/> 
    <Canvas> 
        <TextBlock x:Name="progressBarLabel" VerticalAlignment="Center" Canvas.Top="6"/> 
    </Canvas> 
</Grid> 
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) 
    { 
        UpdateLabel(); 
    }             
} 
 
private void progressBar_Loaded(object sender, RoutedEventArgs e) 
{ 
    this.UpdateLabel(); 
} 
Custom ProgressBar Label
In this article