61

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

4

7 回答 7

68

之前的两个响应（创建一个新的CustomControl或一个Adorner）都是更好的做法，但如果你只是想要快速和肮脏的（或从视觉上理解如何做到这一点），那么这段代码可以工作：

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

请记住，z-index 使得列出的最后一项位于顶部。

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

于 2008-09-19T03:19:52.573 回答
35

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

您可以使用Style来完成此操作，或者您只需覆盖 aTextBlock和 a 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 教程以获取完整的帖子。

于 2015-06-19T15:25:44.627 回答
30

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

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

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

于 2008-09-16T19:23:33.297 回答
6

您可以使用 Adorner 在其顶部显示文本。

请参阅有关装饰器的 MSDN 文章

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

于 2008-09-16T19:30:56.773 回答
3

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

结果：

在此处输入图像描述

相同，但进度百分比：

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

在此处输入图像描述

于 2019-01-14T03:05:58.507 回答
1

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

然后在VS生成的StyleTextBlock中将如下图的结束标记放在上面。Grid

   <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
   <TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
 </Grid>
 <ControlTemplate.Triggers>
于 2016-01-29T09:46:32.947 回答
1

这是基于给定的答案。由于我使用的是 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 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>

没有样式也一样：

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

怎么了？

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

于 2019-11-21T09:56:21.307 回答