WPF中ProgressBar上的文本

Question

对于WPF专家来说，这可能是一件轻而易举的事，但我想知道是否有一种简单的方法在WPF ProgressBar上放置文本。对我来说，一个空的进度条看起来很赤裸。那是屏幕上可以承载关于正在进行的内容的消息，甚至只是添加数字到表示中的空间。现在，WPF完全涉及容器和扩展，我正在慢慢理解这一点，但由于我看不到“Text”或“Content”属性，所以我认为我将不得不向作为我的进度条容器的内容添加一些东西。是否有一种比我原来的WinForms冲动更自然的技术或两种技术？最佳的、最自然的WPF方式是如何向该进度条添加文本？

- Jacob Proffitt

---

你可以尝试这个 - WPF带有动态文本和文本颜色更新的进度条 - Rohit

++ 用于使用“行家”的单词 - Jack

Answer 1

前面两个回答（创建一个新的CustomControl或Adorner）都是更好的实践方法，但如果你只是想快速而简单地完成（或者仅仅是为了视觉上理解如何完成），则以下代码可以实现：

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

请记住，z-index 的作用是最后一个列出的项目将显示在顶部。

此外，如果您还没有使用 Kaxaml，一定要下载它 - 它非常适合在您尝试弄清楚事情时使用 XAML 进行测试。

- SmartyP

---

这是我最初走过的路线，但需要注意的是，在将UI设置为Windows Classic或在XP上的系统上，进度条将显示为深蓝色，这将使文本无法阅读。 - apc

Answer 2

这可以非常简单（除非有很多方法让它工作）。

您可以使用Style来完成此操作，或者只需叠加TextBlock和ProgressBar。

我个人用它来显示等待完成时的进度百分比。

为了保持非常简单，我只想要Binding一个，因此我将TextBock.Text附加到ProgressBar.Value。

            然后只需复制代码即可完成。

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

                     这是示例:

                        

查看完整文章，请转到WPF教程。

- Felix D.

Answer 3

如果您需要一种可重复使用的方法来添加文本，可以创建一个新的样式/控件模板，其中包含一个额外的TextBlock以显示文本。您可以利用TextSearch.Text附加属性在进度条上设置文本。

如果不需要可重复使用性，只需将进度条放置在Grid中并添加一个TextBlock到该Grid中。由于WPF可以组合元素，所以这将很好地工作。

如果您想要，可以创建一个UserControl，公开ProgressBar和TextBlock作为公共属性，这样比创建自定义ControlTemplate要简单。

- Abe Heidebrecht

Answer 4

您可以使用装饰器在其上方显示文本。

请查看MSDN关于装饰器的文章 您需要创建一个继承自Adorner类的类。覆盖OnRender方法以绘制您想要的文本。如果需要，可以为您的自定义装饰器创建一个依赖属性，其中包含要显示的文本。然后使用我提到的链接中的示例将此装饰器添加到进度条的装饰器图层中。

- Bob

Answer 5

绑定 2 个属性的带文本 ProgressBar ( 值/最大值 )：

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

结果：

---

同样的，但是带有进度百分比：

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

- Andrew___Pls_Support_UA

Answer 6

右键单击 ProgressBar，然后点击“编辑模板”>“复制编辑”。

然后，在 VS 生成的样式中，在 Grid 的结束标签之前放置如下所示的 TextBlock。

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

- AnjumSKhan

Answer 7

这是根据提供的答案而得出的。由于我使用了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>

如果您想使用具有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>

同样没有样式：

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

发生了什么？

您拥有进度条，只需在其上放置文本即可。 所以您可以像使用进度条一样使用它。 将进度条放入网格中，并在其中放置文本块。 然后您可以按照您的意愿编写文本或获取当前百分比，该百分比是进度条的值。

- Julian

Answer 8

一个简单的方法是在进度条后面的文本块中写任何你想要的东西，并将其左边距更改为负数。

<ProgressBar  BorderBrush="black" Width="250" Height="20" Minimum="0" Maximum="100" Value="{Binding Happiness}"/>

            <TextBlock Margin="-140,0" FontSize="20" Text="{Binding Happiness}" ></TextBlock>
            <TextBlock Margin="-135,0" FontSize="20"  >%</TextBlock>

- Dana Török