Text in ProgressBar in WPF

Question

This may not be easy for cognoscenti WPF, but I would like to know if there is an easy way to put text in a WPF ProgressBar. For me, an empty progress indicator looks naked. This is a screen real estate that can carry a message about that , or even just add numbers to the view. Now WPF is concerned with containers and extensions, and I am slowly thinking it over, but since I do not see the Text or Content properties, I think I will have to add something to the container, which is my progress bar. Is there a technique or two that are more natural than my initial WinForms impulses? What is the best, most WPF-natural way to add text to this progress bar?

Answer 1

If you need to use the reuse method to add text, you can create a new Style / ControlTemplate that has an additional TextBlock to display the text. You can grab the attached TextSearch.Text property to set the text to a progress bar.

If he doesn't need to reuse it, just put the progress bar on the grid and add a TextBlock to the grid. Since WPF can put elements together, this will work well.

If you want, you can create a UserControl that provides the ProgressBar and TextBlock as public properties, so this will be less work than creating a custom ControlTemplate.

Answer 2

Both of the previous answers (creating a new CustomControl or Adorner ) are best practices, but if you just want to quickly and dirty (or visually understand how to do this), then this code will work:

 <Grid Width="300" Height="50"> <ProgressBar Value="50" /> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"> My Text </TextBlock> </Grid> 

Just keep in mind that the z-index is such that the last element mentioned above will be on top.

In addition, if you do not already have Kaxaml , be sure to pick it up - this is great for playing with XAML when you are trying to figure things out.

Answer 3

It can be very simple (if there are many ways to make it work).

You can use Style to do this, or simply overlay TextBlock and ProgressBar .

I personally use this to show the percentage of progress while awaiting completion.

To keep it very simple, I only wanted one Binding only, so I attached TextBock.Text to ProgressBar.Value .

Then just copy the code to do this.

 <Grid> <ProgressBar Minimum="0" Maximum="100" Value="{Binding InsertBindingHere}" Name="pbStatus" /> <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> 

Here's what it might look like:

Check out the WPF Tutorial for a full post.

Answer 4

You can use Adorner to display text on top of it.

See the MSDN article on Adorners

You must create a class that inherits from the Adorner class. Override the OnRender method to draw the text you want. If you want, you can create a dependency property for your custom Adorner that contains the text you want to display. Then use the example in the link I mentioned to add this Adorner to your runtime adorner layer.

Answer 5

Right-click ProgressBar and choose Edit Template> Edit Copy.

Then place the TextBlock , as shown below, directly above the closing Grid tag in the style generated by VS.

  <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/> <TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/> </Grid> <ControlTemplate.Triggers> 

Answer 6

ProgressBar with text and a binding of 2 properties ( value / maximum value ):

 <Grid> <ProgressBar Name="pbUsrLvl" Minimum="1" Maximum="99" Value="59" Margin="5" Height="24" Foreground="#FF62FF7F"/> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.Text> <MultiBinding StringFormat="{}UserLvl:{0}/{1}"> <Binding Path="Value" ElementName="pbUsrLvl" /> <Binding Path="Maximum" ElementName="pbUsrLvl" /> </MultiBinding> </TextBlock.Text> </TextBlock> </Grid> 

Result:

---

Same thing, but with% progress :

 <Grid> <ProgressBar Name="pbLifePassed" Minimum="0" Value="59" Maximum="100" Margin="5" Height="24" Foreground="#FF62FF7F"/> <TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>