Text on a ProgressBar in WPF

Question

This may be a no-brainer for the WPF cognoscenti, but I'd like to know if there's a simple way to put text on the WPF ProgressBar. To me, an empty progress bar looks naked. That's screen real estate that could carry a message about what is in progress, or even just add numbers to the representation. Now, WPF is all about containers and extensions and I'm slowly wrapping my mind around that, but since I don't see a "Text" or "Content" property, I'm thinking I'm going to have to add something to the container that is my progress bar. Is there a technique or two out there that is more natural than my original WinForms impulses will be? What's the best, most WPF-natural way to add text to that progress bar?

Answer 1

Both of the prior responses (creating a new CustomControl or an Adorner) are better practices, but if you just want quick and dirty (or to understand visually how to do it) then this code would 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 item listed will be on top.

Also, if you don't have Kaxaml yet, be sure to pick it up - it is great for playing with XAML when you're trying to figure things out.

Answer 2

This can be very simple (unless there are alot of ways getting this to work).

You could use Style to get this done or you just overlay a TextBlock and a ProgressBar.

I personally use this to show the percentage of the progress when waiting for completion.

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

                                           Then just copy the Code to get it done.

<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 is how this could look like:

                                   

Check out WPF Tutorial for the full post.