首页 / 知识

关于.net:WPF中ProgressBar上的文本

2023-04-16 03:36:00

Text on a ProgressBar in WPF

这对于WPF的知识点可能是不费吹灰之力的,但是我想知道是否有一种简单的方法可以在WPF ProgressBar上放置文本。 对我来说,一个空的进度条看起来是赤裸的。 这是屏幕空间,可以携带有关正在进行中的消息,甚至可以在表示中添加数字。 现在,WPF就是关于容器和扩展的,我正在慢慢地解决这个问题,但是由于我没有看到" Text"或" Content"属性,因此我想我必须添加一些内容 到我进度条所在的容器中 有没有比我最初的WinForms冲动更自然的一种或两种技术? 将文本添加到进度条的最佳,最WPF方式是什么?


先前的两个响应(创建一个新的CustomControlAdorner)都是更好的做法,但是如果您只是想快速又肮脏(或者想直观地了解如何做),则可以使用以下代码:

1
2
3
4
5
6
<Grid Width="300" Height="50">  
   <ProgressBar Value="50" />
   <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
      My Text
   </TextBlock>
</Grid>

请记住,z-index使得列出的最后一项在最上面。

另外,如果您还没有Kaxaml,请务必将其拾起-当您尝试弄清问题时,它非常适合使用XAML。


这可能非常简单(除非有很多方法可以使它起作用)。

您可以使用Style完成此操作,也可以只覆盖TextBlockProgressBar

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

To keep it very simple I only wanted to have one Binding only,
so I attached the TextBock.Text to the ProgressBar.Value.

然后只需复制代码即可完成。

1
2
3
4
5
6
7
8
9
<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教程中的完整文章。


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

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

如果需要,可以创建一个将ControlBar和TextBlock公开为公共属性的UserControl,因此与创建自定义ControlTemplate相比,它的工作量较小。


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

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

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


具有2个属性(值/最大值)的文本和绑定的ProgressBar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

相同,但进度百分比:

1
2
3
4
5
6
7
8
9
<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


这是基于给定的答案。
由于我正在使用MahApps Metro,因此我得到了以下结果:

1
2
3
4
<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中使用普通栏:

1
2
3
4
<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>

同样没有样式:

1
2
3
4
<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>

怎么了?

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


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

然后如下所示将TextBlock放在VS生成的样式中Grid的结束标记上方。

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


文本方法屏幕空间

最新内容

相关内容

猜你喜欢