WPF 中进度条上的文本

Question

对于 WPF 行家来说，这可能是理所当然的事情，但我想知道是否有一种简单的方法可以将文本放在 WPF ProgressBar 上。 对我来说，一个空的进度条看起来毫无意义。 这是屏幕空间，可以携带有关正在进行的内容的信息，甚至只是在表示中添加数字。 现在，WPF 都是关于容器和扩展的，我正在慢慢地思考这一点，但由于我没有看到“文本”或“内容”属性，我想我必须添加一些东西到我的进度条容器。 有没有一两种技术比我最初的 WinForms 冲动更自然？ 向进度条添加文本的最佳、最自然的 WPF 方式是什么？

Answer 1

带有文本和 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>

结果：

< img src="https://i.sstatic.net/cKsaG.png" alt="在此处输入图像描述">

---

相同，但进度百分比：

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

< /a>

Answer 2

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

发生了什么？

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

Answer 3

右键单击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>

Answer 4

一种简单的方法是在进度条后面的文本块中写入您想要的任何内容，并将其左边距更改为负数。

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

Answer 5

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

请参阅有关 Adorners 的 MSDN 文章

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

Answer 6

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

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

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

Answer 7

这可能非常简单（除非有很多方法可以实现这一点）。

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

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

为了保持简单，我只想有一个Binding，
所以我将 TextBock.Text 附加到 ProgressBar.Value。

                    sp; 然后只需复制代码即可完成。< /strong>

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

                     ;                   < strong>这是这样的：

                               

查看 WPF 教程完整的帖子。

Answer 8

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

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

只要记住 z 索引使得列出的最后一项将位于顶部。

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