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