WPF 中 ProgressBar 上的文本

Posted 2023-02-22

【中文标题】WPF 中 ProgressBar 上的文本

【英文标题】：Text on a ProgressBar in WPF

【发布时间】：2010-09-09 17:00:20

【问题描述】：

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

【问题讨论】：

你可以去 - WPF Progress Bar with dynamic text and text color update

++ 用于使用 cognoscenti 一词

【参考方案1】：

之前的两个响应（创建一个新的CustomControl 或一个Adorner）都是更好的做法，但如果你只是想快速而肮脏（或直观地理解如何做），那么这段代码可以工作：

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

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

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

【讨论】：

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

【参考方案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 Tutorial 以获取完整帖子。

【参考方案3】：

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

如果不需要重复使用，只需将进度条放在一个 Grid 中，并在该网格中添加一个 TextBlock 即可。由于 WPF 可以将元素组合在一起，因此效果很好。

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

【参考方案4】：

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

见MSDN article on Adorners

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

【参考方案5】：

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>

雷祖特：

---

相同但进度百分比：

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

【参考方案6】：

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

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

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

【参考方案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 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>

发生了什么？

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