it-swarm.cn

WPF中ProgressBar上的文本

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

50
Jacob Proffitt

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

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

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

28
Abe Heidebrecht

两个先前的响应(创建一个新的CustomControlAdorner)是更好的实践,但如果你只是想快速和脏(或直观地了解如何做),那么这段代码将起作用:

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

请记住,z-index是列出的最后一项将位于顶部。

此外,如果你没有 Kaxaml ,请务必选择它 - 当你想要解决问题时,玩XAML非常棒。

57
SmartyP

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

您可以使用Style来完成此操作,或者只是覆盖TextBlockProgressBar

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

为了保持简单,我只想要oneBinding,所以我将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>

以下是这可能是这样的:

enter image description here 

查看 WPF教程 完整帖子。

28
Felix D.

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

请参阅 MSDN关于Adorners的文章

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

5
Bob Wintemberg

右键单击ProgressBar,然后单击“编辑模板”>“编辑副本”。

然后将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>
1
AnjumSKhan

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

Rezult:

enter image description here 


相同但是 有%的进度

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

enter image description here 

0
Andrew