Question

这可能是WPF认知的明智之举，但我想知道是否有一种简单的方法将文本放在WPF ProgressBar上。对我来说，空的进度条看起来很赤裸。这是屏幕上的空间，可以传递关于什么正在进行的消息，甚至只是在表示中添加数字。现在，WPF完全是关于容器和扩展的，我正在慢慢地围绕着它，但由于我没有看到“文本”或“内容”属性，我想我将不得不添加一些东西到我的进度条的容器。是否有一种技术或两种技术比我原来的WinForms冲动更自然？什么是最好的，最WPF自然的方式来向该进度条添加文本？

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非常棒。

Answer 2

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

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

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

Answer 3

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

您可以使用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完整帖子。

Answer 4

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

请参阅MSDN article on Adorners

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

Answer 5

右键单击ProgressBar，然后点击修改模板＆gt;编辑副本。

然后将TextBlock放在由VS生成的样式中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 6

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

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

正在发生什么？

您拥有进度条，只需在其上方放置文字即可。因此，您只需按需使用进度条即可。将进度条放在网格中，然后在其中放置一个文本块。然后，您可以根据需要发短信或从进度栏中获取当前的百分比值。

WPF中ProgressBar上的文本

7 个答案: