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.

XAML

	<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.

C#

	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();
	}