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

Answer 1

If you are needing to have a reusable method for adding text, you can create a new Style/ControlTemplate that has an additional TextBlock to display the text. You can hijack the TextSearch.Text attached property to set the text on a progress bar.

If it doesn't need to be reusable, simply put the progress bar in a Grid and add a TextBlock to the grid. Since WPF can compose elements together, this will work nicely.

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

Answer 2

You could use an Adorner to display text over top of it.

See MSDN article on Adorners

You would create a class that inherits from the Adorner class. Override the OnRender method to draw the text that you want. If you want you could create a dependency property for your custom Adorner that contains the text that you want to display. Then use the example in the link I mentioned to add this Adorner to your progress bar's adorner layer.

Answer 3

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 4

This is based on the given answers. Since I´m using MahApps Metro, I ended up with this:

<Grid>
    <metro:MetroProgressBar x:Name="pbar" Value="50" Height="20"></metro:MetroProgressBar>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>

If you want to use the normal bar with Metro Style:

<Grid>
    <ProgressBar x:Name="pbar" Value="50" Height="20" Style="{StaticResource MetroProgressBar}"></ProgressBar>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>

Same without Style:

<Grid>
    <ProgressBar x:Name="pbar" Value="60" Height="20" Style="{x:Null}"></ProgressBar>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>

What is Happening?

You have your progressbar and simply just lay text over it. So you just use your progressbar as you would. Put the progressbar in a grid and lay an textblock in it. Then you can text as you wish or grab the current percenteage wich is the value from the progressbar.

Answer 5

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.

Answer 6

Right click ProgressBar, and click Edit Template > Edit a Copy.

Then put the TextBlock as shown below just above the closing tag of Grid 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>