<p>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 <strong>what</strong> 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?</p>

[{'answer_id': 75969, 'author': 'Abe Heidebrecht', 'author_id': 9268, 'author_profile': 'https://Stackoverflow.com/users/9268', 'pm_score': 6, 'selected': True, 'text': "<p>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. </p>\n\n<p>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.</p>\n\n<p>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.</p>\n"}, {'answer_id': 76035, 'author': 'Bob Wintemberg', 'author_id': 12999, 'author_profile': 'https://Stackoverflow.com/users/12999', 'pm_score': 3, 'selected': False, 'text': '<p>You could use an Adorner to display text over top of it.</p>\n\n<p>See <a href="http://msdn.microsoft.com/en-us/library/ms743737(VS.85).aspx#adorn_single_element" rel="noreferrer">MSDN article on Adorners</a></p>\n\n<p>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.</p>\n'}, {'answer_id': 99245, 'author': 'SmartyP', 'author_id': 18005, 'author_profile': 'https://Stackoverflow.com/users/18005', 'pm_score': 6, 'selected': False, 'text': '<p>Both of the prior responses (creating a new <code>CustomControl</code> or an <code>Adorner</code>) are better practices, but if you just want quick and dirty (or to understand visually how to do it) then this code would work:</p>\n\n<pre><code>&lt;Grid Width="300" Height="50"&gt;  \n   &lt;ProgressBar Value="50" /&gt;\n   &lt;TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"&gt;\n      My Text\n   &lt;/TextBlock&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p>Just keep in mind that the z-index is such that the last item listed will be on top.</p>\n\n<p>Also, if you don\'t have <a href="http://www.kaxaml.com/" rel="noreferrer">Kaxaml</a> yet, be sure to pick it up - it is great for playing with XAML when you\'re trying to figure things out.</p>\n'}, {'answer_id': 30941868, 'author': 'Felix D.', 'author_id': 4610605, 'author_profile': 'https://Stackoverflow.com/users/4610605', 'pm_score': 5, 'selected': False, 'text': '<p><strong>This can be very simple</strong> (unless there are alot of ways getting this to work).</p>\n\n<p>You could use <code>Style</code> to get this done or you just overlay a <code>TextBlock</code> and a <code>ProgressBar</code>. </p>\n\n<p>I personally use this to show the percentage of the progress when waiting for completion.</p>\n\n<blockquote>\n  <p>To keep it very simple I only wanted to have <strong>one</strong> <code>Binding</code> only,\n  so I attached the <code>TextBock.Text</code> to the <code>ProgressBar.Value</code>.</p>\n</blockquote>\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Then just copy the Code to get it done.</strong></p>\n\n<pre><code>&lt;Grid&gt;\n   &lt;ProgressBar Minimum="0" \n                Maximum="100" \n                Value="{Binding InsertBindingHere}" \n                Name="pbStatus" /&gt;\n   &lt;TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" \n           HorizontalAlignment="Center" \n           VerticalAlignment="Center" /&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Here is how this could look like:</strong></p>\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n<a href="https://i.stack.imgur.com/OvaW7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OvaW7.png" alt="enter image description here"></a></p>\n\n<p>Check out <a href="http://www.wpf-tutorial.com/misc-controls/the-progressbar-control/" rel="noreferrer">WPF Tutorial</a> for the full post. </p>\n'}, {'answer_id': 35081337, 'author': 'AnjumSKhan', 'author_id': 3667257, 'author_profile': 'https://Stackoverflow.com/users/3667257', 'pm_score': 1, 'selected': False, 'text': '<p>Right click <code>ProgressBar</code>, and click Edit Template > Edit a Copy.</p>\n\n<p>Then put the <code>TextBlock</code> as shown below just above the closing tag of <code>Grid</code> in the Style generated by VS.</p>\n\n<pre><code>   &lt;Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/&gt;\n   &lt;TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/&gt;\n &lt;/Grid&gt;\n &lt;ControlTemplate.Triggers&gt;\n</code></pre>\n'}, {'answer_id': 54175304, 'author': 'Andrew___Pls_Support_UA', 'author_id': 4423545, 'author_profile': 'https://Stackoverflow.com/users/4423545', 'pm_score': 2, 'selected': False, 'text': '<p>ProgressBar with Text and Binding from 2 Properties ( <strong>Value/Maximum value</strong> ):</p>\n\n<pre><code>&lt;Grid&gt;\n    &lt;ProgressBar Name="pbUsrLvl"\n                 Minimum="1" \n                 Maximum="99" \n                 Value="59" \n                 Margin="5"  \n                 Height="24"  Foreground="#FF62FF7F"/&gt;\n    &lt;TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"&gt;\n        &lt;TextBlock.Text&gt;\n            &lt;MultiBinding StringFormat="{}UserLvl:{0}/{1}"&gt;\n                &lt;Binding Path="Value" ElementName="pbUsrLvl" /&gt;\n                &lt;Binding Path="Maximum" ElementName="pbUsrLvl" /&gt;\n            &lt;/MultiBinding&gt;\n        &lt;/TextBlock.Text&gt;\n    &lt;/TextBlock&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p>Rezult:</p>\n\n<p><a href="https://i.stack.imgur.com/cKsaG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cKsaG.png" alt="enter image description here"></a></p>\n\n<hr>\n\n<p>The same but <strong>with % of progress</strong> :</p>\n\n<pre><code>&lt;Grid&gt;\n    &lt;ProgressBar Name="pbLifePassed"\n                 Minimum="0" \n                 Value="59" \n                 Maximum="100"\n                 Margin="5" Height="24" Foreground="#FF62FF7F"/&gt;\n    &lt;TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}" \n           HorizontalAlignment="Center" VerticalAlignment="Center" /&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p><a href="https://i.stack.imgur.com/2irXR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2irXR.png" alt="enter image description here"></a></p>\n'}, {'answer_id': 58972019, 'author': 'Julian', 'author_id': 9479890, 'author_profile': 'https://Stackoverflow.com/users/9479890', 'pm_score': 1, 'selected': False, 'text': '<p>This is based on the given answers.\nSince I´m using MahApps Metro, I ended up with this:</p>\n\n<pre><code>&lt;Grid&gt;\n    &lt;metro:MetroProgressBar x:Name="pbar" Value="50" Height="20"&gt;&lt;/metro:MetroProgressBar&gt;\n    &lt;TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"&gt;&lt;/TextBlock&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p>If you want to use the normal bar with Metro Style:</p>\n\n<pre><code>&lt;Grid&gt;\n    &lt;ProgressBar x:Name="pbar" Value="50" Height="20" Style="{StaticResource MetroProgressBar}"&gt;&lt;/ProgressBar&gt;\n    &lt;TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"&gt;&lt;/TextBlock&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p>Same without Style:</p>\n\n<pre><code>&lt;Grid&gt;\n    &lt;ProgressBar x:Name="pbar" Value="60" Height="20" Style="{x:Null}"&gt;&lt;/ProgressBar&gt;\n    &lt;TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"&gt;&lt;/TextBlock&gt;\n&lt;/Grid&gt;\n</code></pre>\n\n<p>What is Happening?</p>\n\n<p>You have your progressbar and simply just lay text over it.\nSo you just use your progressbar as you would.\nPut the progressbar in a grid and lay an textblock in it.\nThen you can text as you wish or grab the current percenteage wich is the value from the progressbar.</p>\n'}]
['https://Stackoverflow.com/questions/75924', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1336/']