.net WPF 中 ProgressBar 上的文本

Text on a ProgressBar in WPF

提问by Jacob Proffitt

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 whatis 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?

对于 WPF 专家来说，这可能是轻而易举的事情，但我想知道是否有一种简单的方法可以将文本放在 WPF ProgressBar 上。对我来说，一个空的进度条看起来很赤裸。这是屏幕房地产可能携带有关消息什么是进步，甚至只是添加数字来表示。现在，WPF 是关于容器和扩展的，我正在慢慢地围绕它进行思考，但是由于我没有看到“文本”或“内容”属性，我想我将不得不添加一些东西到作为我的进度条的容器。有没有一两种技术比我原来的 WinForms 冲动更自然？向进度条添加文本的最佳、最自然的 WPF 方式是什么？

采纳答案by Abe Heidebrecht

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 hiHyman the TextSearch.Text attached property to set the text on a progress bar.

如果您需要有一种可重用的方法来添加文本，您可以创建一个新的 Style/ControlTemplate，它有一个额外的 TextBlock 来显示文本。您可以劫持 TextSearch.Text 附加属性来设置进度条上的文本。

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.

如果不需要可重用，只需将进度条放在网格中，并在网格中添加一个 TextBlock。由于 WPF 可以将元素组合在一起，因此这会很好地工作。

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.

如果需要，您可以创建一个 UserControl，将 ProgressBar 和 TextBlock 公开为公共属性，因此它比创建自定义 ControlTemplate 的工作更少。

回答by SmartyP

Both of the prior responses (creating a new CustomControlor 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:

先前的两种响应（创建 newCustomControl或 an Adorner）都是更好的做法，但如果您只是想要快速而肮脏（或直观地了解如何做到这一点），那么此代码将起作用：

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

请记住，z-index 是这样的，列出的最后一项将在顶部。

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

此外，如果您还没有Kaxaml，请务必选择它 - 当您尝试解决问题时，它非常适合使用 XAML。

回答by Felix D.

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

这可能非常简单（除非有很多方法可以让它发挥作用）。

You could use Styleto get this done or you just overlay a TextBlockand a ProgressBar.

您可以使用Style来完成此操作，或者您只需覆盖 aTextBlock和 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 oneBindingonly, so I attached the TextBock.Textto the ProgressBar.Value.

为了保持它非常简单，我只想拥有一个Binding，所以我将 附加TextBock.Text到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 Tutorialfor the full post.

查看WPF 教程以获取完整帖子。

回答by Bob Wintemberg

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

您可以使用 Adorner 在其上方显示文本。

See MSDN article on Adorners

请参阅有关 Adorners 的 MSDN 文章

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.

您将创建一个继承自 Adorner 类的类。重写 OnRender 方法以绘制所需的文本。如果需要，可以为包含要显示的文本的自定义 Adorner 创建依赖项属性。然后使用我提到的链接中的示例将此装饰器添加到进度条的装饰器层。

回答by Andrew

ProgressBar with Text and Binding from 2 Properties ( Value/Maximum value):

带有文本和绑定的 ProgressBar 来自 2 个属性（值/最大值）：

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

Rezult:

结果：

---

---

The same but with % of 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>

回答by Julian

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

这是基于给定的答案。因为我使用的是 MahApps Metro，所以我最终得到了这个：

<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:

如果您想在 Metro 风格中使用普通栏：

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

你有你的进度条，只需在上面放置文字即可。所以你只需像你一样使用你的进度条。将进度条放在网格中并在其中放置一个文本块。然后您可以根据需要发送文本或获取当前百分比，即进度条中的值。

回答by AnjumSKhan

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

右键单击ProgressBar，然后单击编辑模板 > 编辑副本。

Then put the TextBlockas shown below just above the closing tag of Gridin the Style generated by VS.

然后将TextBlock如下所示的放在GridVS 生成的 Style的结束标记上方。

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