WPF中ProgressBar上的文本

zbdgwd5y  于 2023-05-23  发布在  其他
关注(0)|答案(8)|浏览(286)

这对于WPF的行家来说可能是一个不用动脑筋的问题,但是我想知道是否有一种简单的方法可以将文本放在WPF的ProgressBar上。对我来说,一个空的进度条看起来是赤裸裸的。这是屏幕真实的,可以携带关于**什么 * 正在进行的消息,或者甚至只是在表示中添加数字。现在,WPF都是关于容器和扩展的,我正在慢慢地把我的想法 Package 在这方面,但由于我没有看到一个“Text”或“Content”属性,我想我必须在容器中添加一些东西,这是我的进度条。有没有一种或两种技术比我最初的WinForms冲动更自然?向进度条添加文本的最佳、最符合WPF的方式是什么?

5f0d552i

5f0d552i1#

前面的两个响应(创建一个新的CustomControlAdorner)都是更好的实践,但是如果你只是想快速和肮脏(或者直观地理解如何做到这一点),那么这段代码将工作:

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

请记住,z索引是这样的,列出的最后一项将在顶部。
另外,如果您还没有Kaxaml,请务必选择它--当您试图解决问题时,它非常适合使用XAML。

zpf6vheq

zpf6vheq2#

这可能非常简单(除非有很多方法可以让它工作)。

您可以使用Style来完成此操作,或者只需覆盖TextBlockProgressBar
我个人用这个来显示等待完成时的进度百分比。
为了保持简单,我只想有一个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全文。

8ftvxx2r

8ftvxx2r3#

如果您需要一个可重用的方法来添加文本,您可以创建一个新的样式/控制模板,其中有一个额外的TextBlock来显示文本。您可以劫持TextSearch.Text附加属性来设置进度条上的文本。
如果不需要重用,只需将进度条放在Grid中,然后向Grid添加TextBlock。由于WPF可以将元素组合在一起,这将很好地工作。
如果需要,可以创建一个将ProgressBar和TextBlock公开为公共属性的UserControl,这样做比创建自定义ControlTemplate要少。

dpiehjr4

dpiehjr44#

你可以使用一个装饰器来显示文本在它的顶部。
请参阅MSDN上有关装饰者的文章
您将创建一个继承自Adorner类的类。重写OnRender方法以绘制所需的文本。如果需要,可以为自定义Adorner创建一个从属属性,其中包含要显示的文本。然后使用我提到的链接中的示例将此装饰器添加到进度栏的装饰器层。

mkh04yzy

mkh04yzy5#

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:

相同,但具有进度%

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

cigdeys3

cigdeys36#

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

wixjitnu7#

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

发生了什么?
你有了进度条,只需简单地把文本放在上面。所以你只要用你的进度条就行了。把进度条放在一个网格中,然后在其中放置一个文本块。然后,你可以根据你的意愿发送文本,或者从进度条中获取当前的百分比值。

brjng4g3

brjng4g38#

一个简单的方法是在进度条后面的textBlock中写任何你想写的东西,并将它的左边距改为负数。

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

相关问题